I am having a few problems with this code shown at http://yellowdoors.co/TestingHTMLCSS/testIndex -
In Firefox the link "Contact" does not fit so it moves to the next line.
In IE and Chrome they all fit on one line but I am hoping to be able to widen the links so that they fully extend the entire width of the image below. Also, in all three browsers I am getting too much space between the links list and the image. Would like them to be just above the image with only a very little space.
For now, I moved this test page outside of the Wordpress template where it will wind up eventually so that I could validate the code first. The CSS and Html validated. Hope someone can help.
Kathy
The code -
#menu {
width: 600px;
}
ul#list-nav{
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
background-color: #fff;
float: left;
width: 100%;
}
ul#list-nav li{
display:inline;
}
ul#list-nav a{
display:block;
float: left;
padding: .2em 1em;
text-decoration:none;
color: #000;
/* border-right: dotted 1px #fff; */
}
ul#list-nav a:hover{
text-decoration: underline;
}
img
{
margin-top: 0px;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styleTestIndex.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul id="list-nav">
<li><a href="#">Home </a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Services </a></li>
<li><a href="#">Clients </a></li>
<li><a href="#">Resources </a></li>
<li><a href="#">Blog </a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="http://yellowdoors.co/WordPress2/wp-content/uploads/2011/10/keyFPOcopy.jpg" width="600" class="" height="138" alt="key.jpg" />
</div>
</body>
</html>
web-design@yahoogroups.com is sponsored, owned, and founded by Technogypsie Designs (formerly Wandering Leaf Designs)
~etching your presence on the web
leafworks@yahoo.com
To unsubscribe or change your settings:
Please go to http://www.yahoogroups.com
- login, - choose group to modify, - change to unsubscribe,
web only, digest, or single post mode
By email: send a email from your email address receiving this
post to web-design-unsubscribe@yahoogroups.com
1 comments:
I have read your post. It is very knowledgeable information. I love to learn and use in our projects...
Web design London
Post a Comment