div and classes SOLVED

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

div and classes SOLVED

Post by m3rajk »

i need a centered division. i noticed that align is dprecated. by making a class and using text-align:center i found that the line with the text align is ignored (using mozilla 1.3.1 haven't checked othere)


anyone know why? until i can find a way to make it work with the class i'm using align. i would like to move to the class.
Last edited by m3rajk on Thu Oct 02, 2003 1:27 pm, edited 1 time in total.
User avatar
cybaf
Forum Commoner
Posts: 89
Joined: Tue Oct 01, 2002 5:28 am
Location: Gothenburg Sweden

Post by cybaf »

Code: Select all

pageCoords = new getPageCoords();

function centerAlign(id) {
   divObj = document.getElementById(id)
   if(pageCoords.width > 760) {
      newLeft = Math.ceil(((pageCoords.width - parseInt(divObj.offsetWidth())) /2));
   } else newLeft = 0;
   divObj.style.left = newLeft;
}

function getPageCoords() {
   this.width = (is.ns || is.ns6up) ? window.outerWidth:document.body.clientWidth;

   this.height = (is.ns || is.ns6up) ? window.innerHeight:document.body.offsetHeight;

   return this;
}
just took a bit from a VERY large javascript that I've made. the is object is just a browsercheck. but I didn't include the function that creates that here.

This script will allow you to center any div inside a browserwindow. as of now the above script is not really crossbrowser but if you want to have a look at my original script just say so.

Regards,
//cybaf
User avatar
Vincent Puglia
Forum Commoner
Posts: 67
Joined: Thu Sep 04, 2003 4:20 pm
Location: where the World once stood

Post by Vincent Puglia »

Hi

Did you try:

Code: Select all

<center><div id="Test" style="....">
</div></center>
Vinny
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Well that would sort of defeat the whole point, wouldn't it?

Try using margin-left: auto and margin-right: auto. Or use a wrapper div.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

Vincent Puglia wrote:Hi

Did you try:

Code: Select all

<center><div id="Test" style="....">
</div></center>
Vinny
the class i had turned the font-face and font-color correctly. it didn't work so i made a test one ...

Code: Select all

.center&#123; text-align:center &#125;
and used that in a page

Code: Select all

&lt;html&gt;&lt;head&gt;&lt;title&gt;div class test&lt;/title&gt;&lt;style type="text/css"&gt;@import url(textStyle.css);&lt;/style&gt;&lt;/head&gt;&lt;body&gt;
&lt;div class="center"&gt;testing centering&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;
and that didn't align
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Try changing your CSS from:

Code: Select all

.center&#123; text-align:center &#125;
to

Code: Select all

.center &#123;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
&#125;
as Unipus suggested.

Mac
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

works like a charm. thanks.
Post Reply