SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header Buttons Question

    Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a).

    Thanks so much.

    Code:
    <html>
    
    <head>
    
    <style type="text/css">
    body{
    	color: #fff;
    	font: 10pt Arial, Helvetica, sans-serif;
    }
    * {
    	margin: 0; 
    	padding: 0; 
    }
    #header{	
    	width:760px; 
    	margin: 0 auto;
    }
    #header ul{ 
    	height: 44px; 
    	line-height: 44px; 
    	display: block; 
    	list-style: none; 
    	background: #1F2C56; 
    }
    #header li{ 
    	display: inline; 
    	background: #395A8D;  
    	float: right;  
    }
    #header li a{ 
    	height: 44px; 
    	line-height: 44px; 
    	display: block; 
    	width: 94px;
    	text-align: center;	
    border-left: 1px solid Black;  
    	float: left; 
    }
    #header li a:hover{ 
    	background: #1F2C56; 
    	text-decoration: none;
    }
    #header .visual{ 
    	height:263px; 
    	background: #1F2C56;  
    	border-top: 3px solid Black;   
    }
    a{ color: #FFFFFF; text-decoration: none; }
    </style>
    </head>
    <body>
    <div id="header">
    	<h1>Welcome</h1>
            <ul>
                <li><a href="">Link 8 Link 8 Link 8</a></li>
                <li><a href="">Link 7</a></li>
                <li><a href="">Link 6</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 1</a></li>
            </ul>
    	<div class="visual"> </div>
    </div>
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you are talking about all the links not being on the smae line give width:12.5&#37; on the <li>'s

    Can you add white-space:nowrap; to make the text shoot down? I added it everywhere but no effect.

    Also on the containing <ul> add overflow:hidden; to allow it to contain the floated <li>'s.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I tried that and now the text that was being pushed down isn't showing.

    Basically I want to be able to fit all the text that is getting pushed down within the buttons but still maintain even spacing.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The problem is the line-heights you have set on the ul and li a. They are forcing the wrapped text out of it's fixed height container. Since the li are fixed height you will need to find a top padding that you are content with and adjust the height with the paddding.

    Code:
    #header li a{ 
        height: 34px; 
        padding-top:10px; 
        display: block; 
        width: 94px;
        text-align: center;    
        border-left: 1px solid Black;  
        float: left; 
    }

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yea..........which is how I told you to...
    Code:
    <!doctype html>
    <html>
    
    <head>
    
    <style type="text/css">
    body{
    	color: #fff;
    	font: 10pt Arial, Helvetica, sans-serif;
    }
    * {
    	margin: 0; 
    	padding: 0; 
    }
    #header{	
    	width:760px; 
    	margin: 0 auto;
    }
    #header ul{ 
    	height: 44px; 
    overflow:hidden;/*contain the floats*/
    	line-height: 44px; 
    	overflow:hidden;
    	background: #1F2C56; 
    }
    #header li{ 
    	display: inline; 
    	background: #395A8D;  
    	float: right;  
    	width:12.5&#37;;
    }
    #header li a{ height:44px;
    	line-height: 44px; 
    	display: block; 
    	width: 94px;
    	text-align: center;	
    border-left: 1px solid Black;  
    	float: left; 
    }
    #header li a:hover{ 
    	background: #1F2C56; 
    	text-decoration: none;
    }
    #header .visual{ 
    	height:263px; 
    	background: #1F2C56;  
    	border-top: 3px solid Black;   
    }
    a{ color: #FFFFFF; text-decoration: none; }
    </style>
    </head>
    <body>
    <div id="header">
    	<h1>Welcome</h1>
            <ul>
                <li><a href="">Link 8 Link 8 Link 8</a></li>
                <li><a href="">Link 7</a></li>
                <li><a href="">Link 6</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 1</a></li>
            </ul>
    	<div class="visual"> </div>
    </div>
    </body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray I tried that but it's still shooting to the bottom like before

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Also on the containing <ul> add overflow:hidden; to allow it to contain the floated <li>'s.
    If it is a fixed height list item they are wanting then overflow is not needed to wrap up the inner elements. That is only needed for content driven heights.

  8. #8
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan but I don't want to hide that last bit of content (the last Link 8), I want to be able to display it.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray I tried that but it's still shooting to the bottom like before
    It worked fine for me.

    Do you have to have fixed height list items?

    Here is what I had done , removed line-height from ul and li a -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    body{
        color: #fff;
        font: 10pt Arial, Helvetica, sans-serif;
    }
    * {
        margin: 0; 
        padding: 0; 
    }
    #header{    
        width:760px; 
        margin: 0 auto;
    }
    #header ul{ 
        height: 44px; 
      /*no line-height*/
        display: block; 
        list-style: none; 
        background: #1F2C56; 
    }
    #header li{ 
        display: inline; 
        background: #395A8D;  
        float: right;  
    }
    #header li a{ 
        height: 34px; 
        padding-top:10px; 
        display: block; 
        width: 94px;
        text-align: center;    
        border-left: 1px solid Black;  
        float: left; 
    }
    #header li a:hover{ 
        background: #1F2C56; 
        text-decoration: none;
    }
    #header .visual{ 
        height:263px; 
        background: #1F2C56;  
        border-top: 3px solid Black;   
    }
    a{ color: #FFFFFF; text-decoration: none; }
    </style>
    </head>
    <body>
    <div id="header">
        <h1>Welcome</h1>
            <ul>
                <li><a href="">Link 8 Link 8 Link 8</a></li>
                <li><a href="">Link 7</a></li>
                <li><a href="">Link 6</a></li>
                <li><a href="">Link 5</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 1</a></li>
            </ul>
        <div class="visual"> </div>
    </div>
    </body>
    </html>




  10. #10
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray, that certainly DOES work, thanks! I think I may have forgotten to add my doctype when I tested it.

    Question, is it possible with this code to have it all on the same line? My original question was that I wanted to change this:

    #header li a{
    height: 44px;
    line-height: 44px;
    display: block;
    width: 94px;
    text-align: center;
    border-left: 1px solid Black;
    float: left;
    }


    And somehow get everything to fit (within the same line).

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by theflyingminst View Post
    Thanks Ray, that certainly DOES work, thanks! I think I may have forgotten to add my doctype when I tested it.

    Question, is it possible with this code to have it all on the same line? My
    And somehow get everything to fit (within the same line).
    First off, you have 760px fixed width to deal with. You are going to have to be aware of the text characters in your links if you want the buttons the same width.

    Or do not set a width and let the content determine the width. Then you either have all your list items to the left(or right) or center them.

    Left floated li items

    Centered with display:inline


    Centered widthless floats

  12. #12
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome links, thanks Ray!


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
  •