SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    it must be too early... need some help

    Ok, i feel a bit stupid here... I can't get my div aligned to the center of the browser window. I allready did it with tables, but i'd like to leave those behind me whenever i can. Any ideas?

    I tried searching for an older topic, but i couldn't really find one. So my guess is that this should be really easy...

    ][ Med

  2. #2
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you wanna show us what you got so far?

    See this page for positioning...
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  3. #3
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your url doesn't say anything aout positioning a div.
    And it doesn' t really matter what i have. I'm just wondering what i need in my css to have a div positioned in the center of my browser. Only horizontally is important.

    thanx anyway,
    ][ Med

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Easy way to do it:
    Code:
    <div align="center">
    ..throw in all of your other divs here for layout...
    </div>

  5. #5
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but that really doens't work. At least not on IE 5.1.6 on my mac. And if there is one browser it should work... it surely is the browsert on my computer.

    ps. that version of IE is the latest version.

    Thanx again
    ][ Med

  6. #6
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might wanna try this:

    Code:
    .center1  { 
               margin-left: auto;
               margin-right: auto;
              }
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  7. #7
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! that one seems to work for me too.

    I'm building in DWMX and it doesn't show there but it does show in the browser.

    thanks again
    ][ Med

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    By the way IE 5.1.6 is NOT the latest version out for Mac. IE 5.2.2 is.

    --Vinnie

  9. #9
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It IS the latest version for the Classic Environment. 5.2.2 on X isn't any better compared to 5.1.6. It's just the number that differs....

    ][ Med

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Med
    your url doesn't say anything aout positioning a div.
    Yes it does:

    Can This Be Done With Text?
    You bet. If you noticed in the last example, that yellow box that told you to close the window to get back to the tutorial also sat over top of the text.

    Here's an example where a block of text is positioned 80 pixels from the top of the window
    and 400 pixels from the left of the browser window.
    Here's the command I used to position the text:

    <DIV style="position: absolute; top:80px; left:400px; width:200px; height:25px">80 from the top and 400 from the left</DIV>


    Originally posted by Med
    And it doesn't really matter what i have. I'm just wondering what i need in my css to have a div positioned in the center of my browser.
    Again...yes it does. You could have conflicting styles which are preventing your aligning the object to the center.

    Anyway, the correct answer to align a DIV center (horizontally) is this:


    <style type="text/css">
    <!--
    div { text-align: center; }
    -->
    </style>

    you use it like so:
    <div> this is a test to see if this aligns center</div>

    reference:
    http://www.htmlhelp.com/reference/cs...ext-align.html
    http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    from fiurst quote; Maybe i wasn't precise enough... I was tralking about centering the div.

    <DIV style="position: absolute; top:80px; left:400px; width:200px; height:25px">80 from the top and 400 from the left</DIV>
    This doesn't seem to center the div.... does it?


    <style type="text/css">
    <!--
    div { text-align: center; }
    -->
    </style>

    you use it like so:
    <div> this is a test to see if this aligns center</div>
    I did try this. Actually it was the first thing i did. even before i came here with my question. And that really didn't work in my browser. So that's why i asked for something else. And i'm sure you are right, but i guess IE on Mac doesn't really support this very wel yet.

  12. #12
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Med...all that means is that the browser you're using isn't standards compliant. That bit is CSS level 1, which has been around for quite some time. If it's a big deal to you, I suggest a different browser.

    As for the bit about the absolute positioning, it's a simply matter to change that so that it aligns center. That however is not the preferred method of doing so. It is inline which is bad form.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  13. #13
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im assuming that you are wanting to position a main div and then place all the content within that. if thats the case then try something like:

    CSS
    Code:
    <style type="text/css">
    <!--
    body {
    /* margin right and left will set the document to center in IE6, Moz and Op (i think), */
    	margin-right: auto;
    	margin-left: auto;
    /* text align center will center the document for IE5 */
    	text-align: center;
    }
    div.center {
    	height: 25px;
    	width: 200px;
    	border: 1px solid #CCCCCC;
    /* text align left is used to counteract the effects of the "text-align: center;" used in the body. */
    	text-align: left;
    
    }
    -->
    </style>
    HTML
    Code:
    <div class="center">This should be centered in all browsers including IE5
    </div>
    Hope that helps.

  14. #14
    SitePoint Zealot Med's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help. In the end i came up with the following conclussion. The reason why the iTec's code didn't work. Was because my documents were XHTML compliant. It's a standard setting i have in DWMX.

    Removing the DTD makes it work in IE 5.1.6 but not in Netscape 7.

    However with the next code, suggested by Lister14, does work in a XHTML compliant document within IE 5.1.6 and Netscape 7. On mac, haven't tested it on pc yet.

    Code:
    <style type="text/css">
    <!--
    
    div  { 
    	width: 200px;
    	border: 1px solid #CCCCCC;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    -->
    </style>
    Ok so maybe it was my stupid mistake not to mention that i was working in a XHTML document. But i guess if i posted my code i wouldn't have posted it with the DTD, so we still would have had the same problem.

    But now that i got the problem pinned down. Can anyone explain why there is this big difference in writting CSS in HTML and XHTML? At least when i comes to centering a div. Never really noticed any difference .

    Thanks again, and i'm curious to what folows next.
    ][ Med

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically the latest Micro$oft IE 6.0 and Mozilla 1.0 (PC versions) have two modes one where they guess at what you've written - quirks/buggy mode - and the other were they try to follow the DTD - complaint-mode.

    Hence when using XHTML theoretically they should follow the hardcode DTD and parse the mark-up according to the W3C Technical Recommendations.

    However, adding the XML declaration for example:

    <?xml version="1.0" encoding="utf-8" ?>

    Will confuse IE 6.0 to such an extent that it reverts to buggy rendering mode and acts like IE 5.0 with regards to the boxes.
    Last edited by xhtmlcoder; Nov 19, 2002 at 05:14.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •