December 18, 200817 yr Hi please take a moment to have a look Im making a nav but having problems with the look show in the print screen(word document) should be as attachment The code is #nav { height:80px; background-color:black; width:1074px; word-spacing: 2em; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: right; margin: 0 0.15em; } #nav li a { height: 2em; line-height: 2em; float: right; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #white; text-decoration: none; text-align: center; } Spot anything any help is much apreciated navshot.doc
December 18, 200817 yr Looks like your doing ok. When I started learning css I just couldn't get my head around it as I was designing with tables for years and divs just did not make any sense at all. Please post the xhtml and i'll have a look.
December 18, 200817 yr Author Looks like your doing ok. When I started learning css I just couldn't get my head around it as I was designing with tables for years and divs just did not make any sense at all. Please post the xhtml and i'll have a look. <html> <head> <title>Slippy Website design Staffordshire Web Design</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="header"> <img src="website_logo.png"> </div> <div id="nav"> <ul> <li><a href="#" title="Contact">Contact |</a></li> <li>Blog |</li> <li>Portfolio |</li> <li>About |</li> <li>|Home |</li> </ul> </div> </body> </html>
December 18, 200817 yr Not sure if this is what you are after, but you can muck around with it css #nav { height:80px; background-color:black; width:1074px; word-spacing: 2em; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: right; margin: 0 0.15em; } #nav a:hover { color: #0000FF; border:1px solid #FFFFFF; font-size:26px; text-align:center; } #nav li a { height: 2em; line-height: 2em; float: right; width: 9em; display: block; border-left:0.1em solid #FFFFFF; color: white; text-decoration: none; text-align: left; padding-left:4px; } html <head> <title>Slippy Website design Staffordshire Web Design</title> <link rel="stylesheet" type="text/css" href="basic.css" /> </head> <body> <div id="header"> <img src="website_logo.png"> </div> <div id="nav"> <ul> <li><a href="#" title="Contact">Contact </a></li> <li><a href="#" title="Contact">Blog </a></li> <li><a href="#" title="Contact">Portfolio </a></li> <li><a href="#" title="Contact">About </a></li> <li><a href="#" title="Contact">Home </a></li> </ul> </div> </body> </html> Pat
December 19, 200817 yr Author Hi again new problem arised~probably easy to fix this is in ie7 My nav looks like this ................................................contact .......................................blog .........................portfolio ............about home When i want it to be in a straght line My code is #nav { height:80px; background-color:black; width:1074px; word-spacing: 2em; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: right; margin: 0 0.15em; } #nav li a { height: 2em; line-height: 2em; float: right; width: 9em; display: block; border-left:0.1em solid #FFFFFF; color: white; text-decoration: none; text-align: left; padding-left:4px; }
Create an account or sign in to comment