SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Last thing to be done with site

    This is the stupid thing I'm getting whole time

    [IMG]
    http://i54.tinypic.com/kb802.jpg
    [/IMG]

    HTML PART
    Code:
    <div id="bar-left"> </div>
    <div id="bar-right"> </div>
    <div id="bar-mid">&nbsp;&nbsp;Booter </div>
    CSS PART
    Code:
    #bar-left {
        background: url(bar-left.png) no-repeat;
        width: 12px;
        height: 58px;
        float:left;
    }
    
    #bar-mid {
        background: url(bar-mid.png) repeat-x;
        height: 58px;
        width:1000px;
        text-align:left;
        line-height:55px;
        font-weight:bold; 
        margin:0 auto;
    }
    
    #bar-right {
        background: url(bar-right.png) no-repeat;
        width:12px;
        height:58px;
        float:right;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cruelity93 View Post
    This is the stupid thing I'm getting whole time

    [IMG]
    http://i54.tinypic.com/kb802.jpg
    [/IMG]
    Then don't do it like that

    Usually you would never float empty elements that just carry decoration as things will always move around. I;m sure I already gave you this example but you should do it 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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .bar, .barleft, .barright {
        height:58px;
        line-height:58px;
        margin:0 12px;
        background:url(bar-mid.png) repeat-x;
    }
    .barleft {
        background:url(bar-left.png) no-repeat 0 0;
        margin:0 0 0 -12px;
        padding:0 0 0 12px;
        position:relative;
    }
    .barright {
        background: url(bar-right.png) no-repeat 100% 0;
        margin:0 -12px 0 0;
        padding:0 12px 0 0;
        position:relative;
    }
    </style>
    </head>
    <body>
    <div class="bar">
        <div class="barleft">
            <div class="barright"> Content goes here </div>
        </div>
    </div>
    </body>
    </html>
    Use nested elements and not floats and the ends won't go anywhere.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I add float:center;

    It doesn't go to center, any idea why?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cruelity93 View Post
    If I add float:center;

    It doesn't go to center, any idea why?
    Because you can only float things to the left or right...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Don't float it. Give it a width and use margin:auto to center it.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used margin:auto.
    Which made it center, but the text is on the center/right side, and text-align:left;
    Doesn't help, and which class should I give a width?
    And wouldn't width mess up with other browsers/other viewers?

    And you already gave it margin?


    #bar-mid, #bar-left, #bar-right {
    height:58px;
    line-height:58px;
    margin:0 15px;
    width:1000px;
    background:url(bar-mid.png) repeat-x;
    }
    #bar-left {
    background:url(bar-left.png) no-repeat 0 0;
    margin:0 0 0 -12px;
    padding:0 0 0 12px;
    position:relative;
    }
    #bar-right {
    background: url(bar-right.png) no-repeat 100% 0;
    margin:0 -12px 0 0;
    padding:0 12px 0 0;
    position:relative;
    text-align:left;
    line-height:52px;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cruelity93 View Post
    I used margin:auto.
    Which made it center, but the text is on the center/right side, and text-align:left;
    Doesn't help, and which class should I give a width?
    And wouldn't width mess up with other browsers/other viewers?
    What is that you want centered exactly as I think we are talking at cross purposes here?

    If you want the whole element centered it will need a width and margin:auto.

    If you just want the text centered then use text-align:center on the main parent.

    Code:
    #bar-mid{text-align:center}
    And you already gave it margin?
    The element is width auto and therefore stretches all the way across the page by default. It cannot be centered because in essence it is already centered. I gave it a margin left and right of 12px which was to mak room for the transparent corners as previously explained.

    Block elements will only be centred when they have a width and their side margins are explicitly set to auto.

    Code:
    #bar-mid, #bar-left, #bar-right {
        height:58px;
        line-height:58px;
        margin:0 15px;
        width:1000px;
        background:url(bar-mid.png) repeat-x;
    }
    You've just gone and given 1000px width to all three elements which will upset things because the inner elements have margins and padding applied.!

    If you have another inner block element inside those nested divs that you want centred then you would give that new element a width and use margin:auto.

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the bar centered, and when I use margin:auto;
    It centers but doesn't keep text at left side, not even when I use text-align:left;

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Silly question, but could we see the ENTIRE markup for that menu? It seems like you've got a whole bunch of DIV and other pointless markup for what should just be a UL with a bunch of LI, with a class on the last one.

    Of course it appears you are trying to make them all perfect width and use images to do border's job too...

    Pretty sure that if it was written properly, that triple-nest of DIV would be unnecessary. CSS is only as good as the markup it's applied to, and I think you've REALLY over-thought your markup. There is likely NO reason for that entire section of wrapping div nonsense AND the menu inside it to be anything more than:

    Code:
    <ul id="mainMenu">
    	<li class="first"><a href="#" class="current">Home</a></li>
    	<li><a href="#">Booter</a></li>
    	<li><a href="#">Updates</a></li>
    	<li><a href="#">Settings</a></li>
    	<li><a href="#">Shoutbox</a></li>
    	<li><a href="#">Tools</a></li>
    	<li><a href="#">Logout</a></li>
    	<li><a href="#">Admin Panel</a></li>
    	<li class="last"><a href="#">Booter</a></li>
    </ul>
    But I'd have to see the rest of it to be sure on that.

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no problem @ the navigation, but the topbar.


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
  •