Menu items - not displaying as a row ???

jeddi · 01-25-2013, 10:45 AM

Hi,

I am now trying to get to grips with
HTML5 and css.

I have a simple html page here:

My test Site

This is the HTML:

Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Auto World</title>
<meta name="keywords" content="A Website">
<meta name="description" content="The Maddest Auto Community">
<meta name="revisit-after" content="2 days">
<meta name="robots" content="all, index, follow">
<meta name="author" content="SimplePage.net">
<meta name="Rating" content="General">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<noscript>
 <p>This site needs Javascript to work properly. PLEASE ENABLE JAVASCRIPT.</p>
</noscript>


	<header>
		<section>
			<h1>Auto World</h1>
			<h2>The Maddest Auto Community</h2>
		</section>
	</header>	
	<nav>
		<u1>
			<li><a ref=" ">Home</a></li>
			<li><a ref=" ">Product a</a></li>
			<li><a ref=" ">Product b</a></li>
			<li><a ref=" ">Services</a></li>
		</ul>
	</nav>	
	<footer>
		
		
	</footer>	
</body>
</html>

MY CSS is:

Code:

* 
{
margin:0 0;
padding:0 0;
}

h1 
{
font-family:comic sans;
font-size:30px;
color:#FF0000;
}

h2 
{
font-family:comic sans;
font-size:16px;
color:#777;
}
	
h3,h4,h5,p,li,a 
{
font-family:Helvetica,Arial,sans-serif;
}  

header nav
{
display:block;
width:900px;
margin:0 auto;
}

	header section
	{
	display:block;
	height:60px;
	background:555;
	padding:30px 30px 30px 30px;
	-moz-border-radius:0px 0px 25px 25px;
	-webkit-border-radius:0px 0px 25px 25px;
	}
	
nav
{
background:#332F28;	
height:30px;
border:1px solid #777;
border-width:0px 1px 1px 1px;
}

	nav ul 
	{
	list-style:none;
	}

		nav ul li 
		{
		float:left;
		margin:0px 24px;
		}


			nav ul li a
			{
			font-size:15px;
			color:#777;
			text-decoration:none;
			display:block;
			padding:6px 10px 4px 10px;
			height:29px;
			border-width:0px 2px;
			border-style:solid
			border-color:fff;
			}

Now, this is supposed to give me a rounded corner header
and the menu items should be on the menu bar displayed nicely.

For some reason I am not getting any of this.

Can anyone see where I have gone wrong ?

Thanks.

.

Excavator · 01-25-2013, 11:15 AM

Hey jeddi,
Your rounded corners might work better like this -

Code:

	header section
	{
	display:block;
	height:60px;
	background:#555;
	padding:30px 30px 30px 30px;
  border-radius: 0 0 25px 25px;
	-moz-border-radius:0px 0px 25px 25px;
	-webkit-border-radius:0px 0px 25px 25px;
	}

Your menu items will need to be floated to make them sit in the nav bar you've made. Look at this example - http://nopeople.com/CSS%20tips/ulmenu/index.html

jeddi · 01-25-2013, 01:53 PM

Thank you

As this my first foray into HTML5, I was beginning to think
it was a hoax ha ha.

Does anyone know why my menu isn't working

My test site

Thanks again.

.

jerry62704 · 01-25-2013, 02:47 PM

You set a height on "nav" of 30px, but the list is 76px. It is dropping below the container. The container color is (to my eyes and monitor) hiding the top 30px of the menu.

Remove the height from nav and let it set itself automatically and if you have color, make it friendly to the text.

Excavator · 01-25-2013, 03:57 PM

Quote:

Originally Posted by jeddi

Does anyone know why my menu isn't working

You probably want to float your li's to get them to sit side by side on your nav. Did you look at that example I linked you to? It has a horizontal menu much like this one, click on the Markup/CSS to see how it's coded.

jeddi · 01-28-2013, 12:10 PM

Hi Excavator,

yes I did take a look at the example.

EDIT
OK - see my problem
I had a 1 (one) instead of an L in my <ul> tag

Code:

<nav>
	<u1>
		<li><a ref="#">Home</a></li>
		<li><a ref="#">Product a</a></li>
		<li><a ref="#">Product b</a></li>
		<li><a ref="#">Services</a></li>
	</ul>
</nav>

That was the problem

Thanks.

.

Excavator · 01-28-2013, 05:17 PM

Quote:

Originally Posted by jeddi

EDIT
OK - see my problem
I had a 1 (one) instead of an L in my <ul> tag

Check out the links about validation in my signature line. They can really help when looking for little errors like that.

.