...

View Full Version : Menu items - not displaying as a row ???



jeddi
01-25-2013, 11: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 (http://professional-world.com/)

This is the HTML:


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


*
{
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, 12:15 PM
Hey jeddi,
Your rounded corners might work better like this -
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, 02:53 PM
Thank you :thumbsup:

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

Does anyone know why my menu isn't working :confused: :confused:


My test site (http://professional-world.com/)

Thanks again.


.

jerry62704
01-25-2013, 03: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, 04:57 PM
Does anyone know why my menu isn't working :confused: :confused:





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 (http://nopeople.com/CSS%20tips/ulmenu/index.html)? It has a horizontal menu much like this one, click on the Markup/CSS to see how it's coded.

jeddi
01-28-2013, 01: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


<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, 06:17 PM
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.


.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum