Forums

kendra69

Hello All,

Can you take a look and see what the menu issue is - as you can see I would like the gray to go up the sides of the menu bar - plus the darker orange doesn't extend the full length of the menu bar. Also, I had a rollover shade when you were selecting the menu you wanted and it seems to be gone. I think it might be an image problem but not sure - any help appreciated.

Thanks!
Kendra

The link is http://funfamilyparties.com/index1.htm

Here is the html:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>

<title>4OAK Fantasy Football</title>

<LINK REL=StyleSheet HREF=\"screen.css\" TITLE=\"Contemporary\">

</head>

<body>

<div id=\"wrap\">
<div id=\"container\">
<div id=\"top\">
<h1></h1>


<div id=\"menu\">
<ul>
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">About</a>
<li><a href=\"images1/fantasyplayerswithcards-1.pdf\">NFL Players</a></li>
<li class=\"rules\"><a href=\"#\">Rules</a>
<li><a href=\"http://www.wenalway.com/forum\">Forum</a></li>
<li><a href=\"#\">Contact Us</a></li>
<li><a href=\"#\">Register</a></li>
</div>


<div id=\"content\">
<font color=#8A4117 size=\"4\">4OAK Fantasy Football<br><br>

The game that blends fantasy football and poker.<br><br>

</div></div>
</div>
<div class=\"clear\"></div>
	  
<div id=\"bottom\">
<center><strong><font face=\"Arial, Helvetica, sans-serif\" color=yellow size=\"2\">&copy; All rights reserved. KVR Company 2009<br></strong></center>

</font>
</body>
</html>

Here is the CSS:


body {
position:relative;
margin: auto;
width:100%;
height:100%;
background-color: #986547;
background-image:url(images1/football.jpg);
body text=\"#FFFFFF\"; 
padding-top: 10px;
}

#container
{
width: 1000px;
line-height: 130%;
}

#wrap {
margin: 10px auto;
width: 1000px;
}

#top h1 {
background-image:url(images1/test1.jpg);
background-repeat:no-repeat;
height: 225px;
clear: both;
}

#menu {padding:0 10px;
margin-top:-22px;
height: 40px;
line-height: 40px;
background: white url(images1/menu.jpg) no-repeat;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
font-size: 0px;
} 
#menu li a{
background-color:#8A4117;
color:yellow;
display:block;
font-size:17px;
line-height:40px;
padding:0 40px;
text-align:center;
text-decoration:none;
width:auto;
} 

#menu ul {
padding:0;
}
#menu ul li ul li a {
color:yellow;
display:block;
font-size:15px;
line-height:40px;
padding-right:40px;
text-align:left;
text-decoration:none;
width:8em;
}

#menu li a:hover{
background-color: #8A4117;
} 

#menu ul ul {
margin: 0; padding: 10;
top: 40px;
position: absolute;
visibility: hidden;
} 
#menu ul li.forms ul li a {width: 240px;}
#menu ul li.parent resources ul li a {width: 240px;}

#menu ul li:hover ul{
visibility:visible;
} 


#content {
background: #666666 url(images1/content.jpg) repeat-y;
color: black;
padding: 50px;
}

#bottom {
background: #8A4117 url(images1/bottom.jpg) no-repeat;
padding: 20px 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;}

.clear {
    clear:both;
}

apostrophe

You should start by validating your markup, 53 errors http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffunfamilyparties.com%2Findex1.htm

You have the same colour set for hover as you have for the normal background #8A4117.

kendra69

Thank you - I have changed the color so I can see the hover color now - I will go thru and fix the validator issues. My biggest question is how do I fix the menu bar issue with the color not extending or wrapping at the sides - I don't want that different color at the end.

I would appreciate a quick response as I want to go live soon. Thanks so much for your help - this forum is great!

I have it on a new site now - http://www.4oakfantasyfootball.com/

The html:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>

<title>4OAK Fantasy Football</title>

<LINK REL=stylesheet HREF=\"screen.css\" TITLE=\"Contemporary\">

</head>

<body>

<div id=\"wrap\">
<div id=\"container\">
<div id=\"top\">
<h1></h1>


<div id=\"menu\">
<ul>
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">About</a>
<li><a href=\"images1/fantasyplayerswithcards-1.pdf\">NFL Players</a></li>
<li class=\"rules\"><a href=\"#\">Rules</a>
<li><a href=\"http://www.wenalway.com/forum\">Forum</a></li>
<li><a href=\"#\">Contact Us</a></li>
<li><a href=\"#\">Register</a></li>
</div>


<div id=\"content\">
<font color=#8A4117 size=\"4\">4OAK Fantasy Football<br><br>

The game that blends fantasy football and poker.<br><br>

</div></div>
</div>
<div class=\"clear\"></div>
	  
<div id=\"bottom\">
<center><strong><font face=\"Arial, Helvetica, sans-serif\" color=yellow size=\"2\">&copy; All rights reserved. KVR Company 2009<br></strong></center>

</font>
</body>
</html>

The css:


body {
position:relative;
margin: auto;
width:100%;
height:100%;
background-color: #986547;
background-image:url(images/football.jpg);
body text=\"#FFFFFF\"; 
padding-top: 10px;
}

#container
{
width: 1000px;
line-height: 130%;
}

#wrap {
margin: 10px auto;
width: 1000px;
}

#top h1 {
background-image:url(images/test1.jpg);
background-repeat:no-repeat;
height: 225px;
clear: both;
}

#menu {padding:0 10px;
margin-top:-22px;
height: 40px;
line-height: 40px;
background: white url(images/menu.jpg) no-repeat;
}

#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
font-size: 0px;
} 
#menu li a{
background-color:#986547;
color:yellow;
display:block;
font-size:17px;
line-height:40px;
padding:0 40px;
text-align:center;
text-decoration:none;
width:auto;
} 

#menu ul {
padding:0;
}
#menu ul li ul li a {
color:yellow;
display:block;
font-size:15px;
line-height:40px;
padding-right:40px;
text-align:left;
text-decoration:none;
width:8em;
}

#menu li a:hover{
background-color: #8A4117;
} 

#menu ul ul {
margin: 0; padding: 10;
top: 40px;
position: absolute;
visibility: hidden;
} 
#menu ul li.forms ul li a {width: 240px;}
#menu ul li.parent resources ul li a {width: 240px;}

#menu ul li:hover ul{
visibility:visible;
} 


#content {
background: #666666 url(images/content.jpg) repeat-y;
color: black;
padding: 50px;
}

#bottom {
background: #8A4117 url(images/bottom.jpg) no-repeat;
padding: 20px 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;}

.clear {
    clear:both;
}

apostrophe

If you don't want that lighter orange on the menu why are you using it as a background image?

I've just done a quick fix and replaced that with the content background:

#menu {
background:#666666 url(images/content.jpg) repeat scroll 0 0;
height:40px;
line-height:40px;
margin-top:-22px;
padding:0 10px;
}

and I gave the first menu item a class of home and added a bit of extra padding

#menu li.home a {
padding:0 30px 0 40px;
}

kendra69

Thanks so much. I was trying to make it too hard. Some CSS is still not quite clicking with how it works but when I took that image out for the menu bar it made sense to me. I tried to add the div class of "home" to the index page plus add the css but I can't seem to get it to work. How do I put it in the html - is it <div id = "home">? and then how do I put the rest of the menu bar - the home ends up small and blue. Sorry for my noviceness but I'm learning. Thanks again for your help!

Kendra

apostrophe

<li class=\"home\">
<a href=\"#\">Home</a>
</li>

kendra69

Thank you! It worked.

Kendra

treehouse : what would you like to learn today?

Forums

CSS Menu Issue