January 26, 201115 yr Ok, i would like to make my navigation bar look alot more professional. I know that i shouldnt use images as nav links becasue of blind people that has already been explained to me. Im just struggling to come up with a design that fits well. First of all let me show you what i have so far. My CSS. body { background:#000000; font-family:Arial,Helvetica,Sans-serif; font-size:12px; font-weight:400; color:#999999; line-height:18px; } img { border:none; } #container { margin: 0 auto; width:1021px; background:transparent; } #header { background:#000000; padding:0px; margin:0; } #header img { margin: 0px; padding: 0px; border:none; } #navigation { float: left; width: 100%; background:#000000; } #navigation ul { margin:0px; padding:0px; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 3px 8px; color:#000000; text-decoration: none; } My Code. (only relevant parts C+P ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <html> <title>Portsmouth Destroyers | Coaching Staff</title> <link rel="stylesheet" type="text/css" href="portsmouthdestroyers.css"> <head> <style> .hr { border-top: 0px; height: 0px; clear: both; } </style> <body> <div id="container"> <div id="header"> <img src="http://i275.photobucket.com/albums/jj288/worrioz/WEBSITEBANNERDRAFT.png" alt="Portsmouth Destroyers" > </div> <!--WEB BANNER--> <div id="navigation"> <ul> <li><a href="Homepage.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/HOMEBUTTON.png" alt="Home"></a></li> <li><a href="ClubHistory.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/CLUBHISTORYBUTTON.png" alt="Club History"></a></li> <li><a href="Roster.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/ROSTERBUTTON.png" alt="Roster"></a></li> <li><a href="GameInPictures.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/GAMEINPICTURESBUTTON.png" alt="Game In Pictures"></a></li> <li><a href="Schedule.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/SHEDULEBUTTON.png" alt="Schedule"></a></li> <li><a href="WhereAreTheyNow.htm"><img src="http://i275.photobucket.com/albums/jj288/worrioz/WHEREARETHEYNOWBUTTON.png" alt="Where Are They Now?"></a></li> </ul> </div> <div id="fix"> <div class="aside"> <br /> <br /> <h6> <img src="http://i275.photobucket.com/albums/jj288/worrioz/NextGameBox-2.png" alt="Next Game"> </h6> <h3 style="font-size:250%" align="center"><u><b> SPONSORS </b></u></h3> <img src="http://i275.photobucket.com/albums/jj288/worrioz/pararail-1.png" width="260px" alt="PARARAIL"/> </body> </html> Im looking for a more sleek and slick nav bar, in the same style as the current one, and in the same place if possible. Any help would be much appreciated. Thanks
January 26, 201115 yr Images are fine - use an alt tag which is sort of the text replacement of the image. And supplying us to a link of your website will help almost everyone.
January 26, 201115 yr Author Images are fine - use an alt tag which is sort of the text replacement of the image. And supplying us to a link of your website will help almost everyone. it hasnt been published yet, its still in the development stage, hence why i posted the coding lol.
Create an account or sign in to comment