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

HTML & CSS
1

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


<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>




#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

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

Thanks man

So this rule here


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

should be changed to


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

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. :slight_smile:

First, about this comment in your css:

nav {
    display: block;[COLOR=DarkGreen]/* If this is not displayed the black background does not show, is this correct..?*/[/COLOR]
    [COLOR=Blue]overflow:hidden;/*contain floated ul*/[/COLOR]
    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:

<!doctype html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Test Page</title>

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 900px;
    [COLOR=Blue]padding:1px 0;[/COLOR] [COLOR=Blue]/*un-collapse child margins*/[/COLOR]
    background-color: #FF0;
}
nav {
    [COLOR=Blue]display: block;/* define html5 elements as display:block manually for now*/
    overflow:hidden;/*contain floated ul*/[/COLOR]
    background: #000;
    [COLOR=Blue]padding: 20px 0;[/COLOR]
}
nav ul {
    [COLOR=Blue]float: right;
    margin: 0 10px 0 0;[/COLOR]
    padding:0;
    list-style: none;
}
nav ul li {
    [COLOR=Blue]float:left;
    margin-right: 5px;[/COLOR]
    font-size: 25px;
}
nav ul li a {
    [COLOR=Blue]padding: 5px 10px;[/COLOR]
    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);
}
[COLOR=Blue]p {margin:1em;}[/COLOR]
</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

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

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.

nav ul li a {
 [COLOR=Blue]   float:left;
    width:130px;[/COLOR]
    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.


nav {
    [COLOR=Blue]display: block;/[/COLOR]* 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;
    [COLOR=Blue]text-align:center;[/COLOR]
}
nav ul li {
    [COLOR=Blue]display:inline;[/COLOR]
}
nav ul li a {
    [COLOR=Blue]display:inline-block;
    width:130px;
    margin:0 1px;[/COLOR]/*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

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!!!