SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Ethan-27's Avatar
    Join Date
    Jan 2011
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My mind has gone blank today, can anyone help me with this...?

    I cannot figure out how to make my buttons bigger in width or height. I have tried applying these properties to every rule but having no luck. Have I written something that is cancelling out so to speak.

    The desired look is to have the menu in a black backgrounded "nav" tag and the "menu" to be floated to the right. I have achieved this but have I done it the right way... is this what is holding my buttons from being able to have a size...?

    Here is the HTML and below is the css

    HTML Code:
    <body>
    <div id="wrapper">
    <nav> 
      <ul>
    <li><a href="#"> Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
            <li><a href="#">Resources</a></li>
        <li><a href="#"> Help</a></li>
      </ul>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </nav>
    </div>
    </body>


    Code CSS:
     
    #wrapper {
    	width: 900px;
    	background-color: #FF0;
     
    }
    ul, ol, dl {
    	margin: 0px;
    	padding: 0px;
     
    }
     
    nav{
    	display:block; /* If this is not displayed the black background does not show, is this correct..?*/
    	background-color:#000;
    	padding-top: 20px;
    	padding-bottom: 20px;
     
     
    	}
     
     
    nav ul {
    	padding-top: 5px;
    	/*padding-right: 10;*/
    	padding-bottom: 10px;
     
    	float: right;
    	margin-right: 10px;
    }
     
    nav ul li {
    	display:inline;
    	/*list-style-type: none;*/
    	font-size: 25px;
     
     
     
    }
     
    nav ul li a {
    	padding-top: 5px;
    	padding-right: 10px;
    	padding-bottom: 5px;
    	padding-left: 10px;
     
    	background:-webkit-gradient(linear, left top, left 	bottom, from(#f70830), to(#c4d927));
    	margin-right: 5px;
     
    }
     
     
    nav ul a, nav ul a:visited {
    	text-decoration: none;
    	background:-moz-linear-gradient(top,#f70830, #c4d927);
    	border-radius:10px 10px 10px 10px;
    	-moz-border-radius: 10px 10px 10px 10px;	
     
     
    }
     
    nav ul a:hover, nav ul a:active, nav ul a:focus { 
    	color: #00F;
    	border-radius:10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
    	background: -webkit-gradient(linear, left top, left bottom, from(#0a1df5), to(#181a05));
       background: -moz-linear-gradient(top, #0a1df5,#181a05);
     
    }

    Like I say I have tried applying width and height to everything ut its not happening, can anyone help me...

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The <li> needs to be inline-block, block, or floated to take a width and height. If you want them to be inline then block is out. So chose one of the others. That should do it.

  3. #3
    SitePoint Zealot Ethan-27's Avatar
    Join Date
    Jan 2011
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man

    So this rule here

    Code CSS:
    nav ul li {
        display:inline;
        /*list-style-type: none;*/
        font-size: 25px;
    }

    should be changed to

    Code CSS:
    nav ul li {
        display:inline-block;
        /*list-style-type: none;*/
        font-size: 25px; 
        width:90px;
        height:90px;
    }


    I just tried the above and the result Im getting is that the buttons are now further apart from each other but no bigger in width or height. They have also shifted further down from the top of the nav tag. If I add "float right" however they just start to overlap each other.

    In this rule aswell the "display: "function doesnt seem to make a difference which way I have it, even if I delete the menu looks the same.

    Any ideas anyone...?

  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)
    Hi,

    There are some things going on here with your floats that you have not taken care of.
    I don't write code with html5 and my opinion is that others shouldn't be using it yet either, I'll play along with it for now though.

    First, about this comment in your css:
    Code:
    nav {
        display: block;/* If this is not displayed the black background does not show, is this correct..?*/
        overflow:hidden;/*contain floated ul*/
        background-color: #000;
        padding: 20px 0;
    }
    The only reason your needing to use display:block there is because nav, along with other new html5 elements, do not have default CSS styling in most browsers, and unknown elements are treated as inline elements.

    The reason you were getting the black BG to show in your code was because of the empty <p> tags you had nested in the nav. They are what was holding the height open and causing confusion on what the actual height was.

    You will see that I added overflow:hidden; to force the nav section to enclose the floated ul. Now your black BG will extend past the floats with needing empty <p> tags.

    I just tried the above and the result Im getting is that the buttons are now further apart from each other but no bigger in width or height.
    As Eric pointed out, inline-block does allow elements to sit beside each other like floats but you have white-space nodes to contend with since they are still inline elements. I would just use a float instead in this case.

    Just changing them to floats or inline-block will not have any effect on dimensions either. You can control yourself that with actual dimensions or paddings.

    Try your code with these adjustments:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8"> 
    <title>Test Page</title>
    
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    #wrapper {
        width: 900px;
        padding:1px 0; /*un-collapse child margins*/
        background-color: #FF0;
    }
    nav {
        display: block;/* define html5 elements as display:block manually for now*/
        overflow:hidden;/*contain floated ul*/
        background: #000;
        padding: 20px 0;
    }
    nav ul {
        float: right;
        margin: 0 10px 0 0;
        padding:0;
        list-style: none;
    }
    nav ul li {
        float:left;
        margin-right: 5px;
        font-size: 25px;
    }
    nav ul li a {
        padding: 5px 10px;
        background: -webkit-gradient(linear, left top, left  bottom, from(#f70830), to(#c4d927));
        text-decoration: none;
    }
    nav ul a, nav ul a:visited {
        background: -moz-linear-gradient(top,#f70830, #c4d927);
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
    }
    nav ul a:hover, nav ul a:active, nav ul a:focus {
        color: #00F;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        background: -webkit-gradient(linear, left top, left bottom, from(#0a1df5), to(#181a05));
        background: -moz-linear-gradient(top, #0a1df5,#181a05);
    }
    p {margin:1em;}
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
        <nav> 
            <ul>
                <li><a href="#"> Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#"> Help</a></li>
            </ul>
        </nav>
        <p>Paragraph following nav</p>
        <p>Paragraph following nav</p>
        <p>Paragraph following nav</p>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Zealot Ethan-27's Avatar
    Join Date
    Jan 2011
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, really appreciate your efforts.

    I have applied all the changes to my code and can see how the "nav" area looks so much more tidy.

    I still however cannot figure out how to make the buttons all the same size. If I apply padding to them they wont be the same as the text length inside them is different. I have applied width and height to the "nav ul li" rule but once again it just starts to lap over.

    I have read everything you've said but I just cant seem to get these buttons sorted out

    Any ideas where to apply the dimensions too....?

  6. #6
    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 Ethan-27 View Post
    I still however cannot figure out how to make the buttons all the same size.

    Any ideas where to apply the dimensions too....?
    If you want them all the same width/height then float the anchor so it becomes a block level, then it will accept dimensions.

    If you want them all centered then you will need to calculate the widths with margins and paddings included so that it fills the entire space available. Or you can go back to inline-block and use text:align center on the UL to center the inline-block LI. In that case you would need remove the float from the UL so it does not shrinkwrap.

    Code:
    nav ul li a {
        float:left;
        width:130px;
        padding: 5px 10px;
        background: -webkit-gradient(linear, left top, left  bottom, from(#f70830), to(#c4d927));
        text-decoration: none;
    }
    EDIT:
    To center them using inline-block like I mentioned above it would go something like this.
    However, IE6/7 will need a little hack to them work if they are to be supported.
    Code:
    nav {
        display: block;/* define html5 elements as display:block manually for now*/
        background-color: #000;
        padding: 20px 0;
    }
    nav ul {
        margin: 0 10px 0 0;
        padding:0;
        list-style: none;
        text-align:center;
    }
    nav ul li {
        display:inline;
    }
    nav ul li a {
        display:inline-block;
        width:130px;
        margin:0 1px;/*white-space nodes will add to the lt/rt margins*/
        padding: 5px 10px;
        background: -webkit-gradient(linear, left top, left  bottom, from(#f70830), to(#c4d927));
        text-decoration: none;
        font-size: 25px;
    }

  7. #7
    SitePoint Zealot Ethan-27's Avatar
    Join Date
    Jan 2011
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are the man!!!

    Thankyou so much, got it sorted!!!

    Although it looks a bit messy at the mo I have now applied different widths and height to the different states of the "a" tag to give it that kinda pop out at you when you rollover feeling. Im sure you can do this is css3 more smoothly but I cant remember how...

    This is so cool!!!


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
  •