SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems centering an element inside of a DIV

    Hey guys,

    I'm trying to center a UL inside of a DIV. I realize I can do this using "margin: auto" as long as I have a fixed width on the UL and on the parent container, but I don't want to set a fixed width on the UL, as it may have changing content.

    Is there any way to do this? Thanks.

    (As a side point: "margin: auto" works on IE7 just fine with no fixed width, but from what I understand, IE7's handling of this is incorrect.)

    Louis

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume the ul is floated?

    If its not floated then it will stretch 100% of the parent anyway and is effectively centred automatically. That doesn't mean the list items will be centred though unless they have been made to be inline elements and centred with text-align:center.

    If you are talking about centering a floated element then I have a demo here that explains how to do it.

    I'd need to see a demo of what you have to give more specific answers.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    No, the UL is not floated, but the LI items are. I don't want width set on the LI's or on the UL, because I don't want to have to change the CSS everytime the content changes.

    Here is the CSS:

    Code:
    #tabs_content {
      margin: auto;
      width: 580px;
      background: url(../images/back/bg_tabs_content.jpg) no-repeat 0 29px;
    }
    
    ul#tabs_navigation {
    	margin: auto;
    	height: 29px;
    }
    
    ul#tabs_navigation li {
    	float: left;
    	height: 28px;
    	display: block;
    	line-height: 28px;
    	background: url(../images/back/bg_tab.gif) repeat-x 0 0;
    	margin: 0 3px 0 0;
    	border: solid 1px #e1e1e1;
    }
    And here's the HTML:

    Code:
      <div id="tabs_content">
    
        <ul id="tabs_navigation">
    	<li><a href="#">About</a></li>
    	<li><a href="#">Table of Contents</a></li>
    	<li><a href="#">Look Inside</a></li>
    	<li><a href="#">Classroom Support</a></li>
    	<li><a href="#">Examination Copy</a></li>
        </ul>
    
      </div><!-- tabs_content ends -->
    Thank you!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I'm Just in the way out the out but that link I gave above will do what you want. I'll have a look when I get back in about 3 hours.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks. However, I tried using your floated centered link, but it won't work in my layout because I have a background image applied to a containing element, so when I add "position: relative; left: 50&#37;" the background image moves with it.

    Louis

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You will have to add some extra elements and leave your background image alone and move inner elements instead.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    #tabwrap{
        overflow:    hidden;
        width:100&#37;;
        position:relative;
    background: url(../images/back/bg_tabs_content.jpg) no-repeat 0 29px;
    }
    #tabs_content {
      
        position:relative;
        left:50%;
        float:left;
    }
    ul#tabs_navigation {
        position:relative;
        left:-50%;
        list-style:none;
        margin:0;]
        padding:0;
    }
    
    ul#tabs_navigation li {
        float: left;
        height: 28px;
        line-height: 28px;
        background: url(../images/back/bg_tab.gif) repeat-x 0 0;
        margin: 0 3px 0 0;
        border: solid 1px #e1e1e1;
        white-space:nowrap;
    }
    </style>
    </head>
    <!--[if IE ]>
    <style type="text/css">
    #tabs_content ul{float:left;} 
    
    </style>
    <![endif]-->
    <body>
    <div id="tabwrap">
        <div id="tabs_content">
            <ul id="tabs_navigation">
                <li><a href="#">About</a></li>
                <li><a href="#">Table of Contents</a></li>
                <li><a href="#">Look Inside</a></li>
                <li><a href="#">Classroom Support</a></li>
                <li><a href="#">Examination Copy</a></li>
            </ul>
        </div>
    </div>
    <!-- tabs_content ends -->
    </body>
    </html>
    This is the only way to centre floats. You could use the other method I showed in that linked page by using inline-blocks and display:table instead of floats but is a little complicated to follow.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Or something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    #tabs_content {
      background: url(../images/back/bg_tabs_content.jpg) no-repeat 0 29px;
        text-align:center;
        width:100&#37;
    }
    ul#tabs_navigation {
        position:relative;
        list-style:none;
        margin:0;
        padding:0;
        display:table;
        margin:auto;
        text-align:center;
    }
    
    ul#tabs_navigation li {
        height: 28px;
        line-height: 28px;
        display:table-cell;
    }
    ul#tabs_navigation li a{
        float:left;
        background: url(../images/back/bg_tab.gif) repeat-x 0 0;
        margin: 0 3px 0 0;
        border: solid 1px #e1e1e1;
        white-space:nowrap;
    
    }
    </style>
    </head>
    <!--[if lt IE 8]>
    <style type="text/css">
    ul#tabs_navigation {display:inline-block;}
    ul#tabs_navigation{display:inline; }
    ul#tabs_navigation li{display:inline-block}
    ul#tabs_navigation li{ display:inline;}
    ul#tabs_navigation a{ display:inline-block;}
    </style>
    <![endif]-->
    <body>
    <div id="tabs_content">
        <ul id="tabs_navigation">
            <li><a href="#">About</a></li>
            <li><a href="#">Table of Contents</a></li>
            <li><a href="#">Look Inside</a></li>
            <li><a href="#">Classroom Support</a></li>
            <li><a href="#">Examination Copy</a></li>
        </ul>
    </div>
    <!-- tabs_content ends -->
    </body>
    </html>

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks, I'll take a look at this again tomorrow -- I'll probably use the float method with an extra DIV wrapped around for the Background. More unsemantic markup -- great!

    Louis

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The last example has no extra divs but it may be harder to understand initially.


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
  •