April 7, 201016 yr Ive put a navigation bar on the page and add the links but they sit underneath the image Ive been trying for ages now but as a noob cant work out why heres the code... CSS #content { width: 1200px; margin:0px; } #nav { height: 75px; width: 434px; float: right; margin-top: 40px; background-image: url(images/navigation.png); width: 640 px; Height: 480px; } nav_menu li { list-style: none; display:inline; padding left:0px; padding-right: 0px; } HTML <div id="content"> <div id="logo"> </div> <div id="nav"> <ul class ="nav_menu"> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> </ul> </div> </div> Also the body is set up with no margin or padding. Another issue is that nothing is placed where i want it, the logos one side o the page and the nav bars down the bottom...lol I wished this was all a lot easier on my head...
April 7, 201016 yr hhmmm why have you got two height and width attributes for your #nav? I don't think this will fix it however.
April 7, 201016 yr Your nav_menu style should have a . in front. You need a doctype and you have two heights for #nav. This worked for me:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> <style type="text/css"> body { margin: 0; } #content { background: skyblue; height: 500px; width: 1200px; margin:0px; } #nav { height: 75px; width: 434px; float: right; margin-top: 40px; background-image: url(images/navigation.png); width: 640 px; /*Height: 480px;*/ } .nav_menu li { list-style: none; display:inline; padding left:0px; padding-right: 0px; } </style> </head> <body> <div id="content"> <div id="logo"> </div> <div id="nav"> <ul class ="nav_menu"> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> <li> <a href="#> home </a></li> </ul> </div> </div> </body> </html>
April 7, 201016 yr Author My appologies but when I put up the code it was from another pc and I had to loosley type it out.. Heres the exact dode I have but first.. Ive realised that both the navigation bar and logo have been saved with the image size of 640 x 480 - Surely this cant be right and would push things around the page, no? I made them in illustrator and saved them in web devices etc. Is this right? anyway this is the code and the exact problems are now listed as 1.The nav bar image displays below the links 2.The logo is half way down the page CSS *{ padding:0; margin:0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #797979; margin: 0px; padding: 0px; background-color: #156894; background-image:url(images/background_02.png); background-repeat: repeat-x; visibility:visible; height:auto } #container { width: 1200px; height:auto; margin: auto; } #clouds { width: 850px; float: left; background-image:url(images/logo2.png); background-repeat: no-repeat; } #title { background-image:url(images/logo2.png); background-repeat: no-repeat; height: 480px; width: 640px; float: left; margin-top: 0px; margin-left: 0px; } #navigation { background-image: url(images/navagation.png); background-repeat: no-repeat; height: 480px; width: 640px; float: right; margin-top: 40px; } .nav_menu li{ list-style:none; display:inline; padding-left: 13px; padding-right: 13px; float: left; padding-top: 14px; } .nav_menu a { font-size: 11px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: #848484; font-weight: bold; } .nav_menu a:hover { color: #156894; } 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Design Lab | HV-Designs Tutorial</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"><!--BEGIN CONTAINER--> <div id="title"><!--BEGIN TITLE--> </div><!--END TITLE--> <div id="navigation"><!--BEGIN NAVIGATION--> <ul class="nav_menu"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Free Quote</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div><!--END NAVIGATION--> </div><!--END CONTAINER--> </body> </html> Its probably pretty obvious to you that Im working through a tutorial, its from hv designs, but noone else seems to be having any issues with it...HV Designs PSD to HTML Convert.. Please help, If it can find out whats going on it really would help me, Im loosing my sanity. Like I said before though could this be down to file sizes??
April 7, 201016 yr Two images 640px wide won't fit in #container width: 1200px. Edit the #container to width: 1280px and then they should fit. Was 1200 a typing error?
April 7, 201016 yr Author Two images 640px wide won't fit in #container width: 1200px. Edit the #container to width: 1280px and then they should fit. Was 1200 a typing error? no sadly, still learning and didnt realise it could be bigger than 1200px Ill try it now thanks
April 7, 201016 yr Author It didnt work sadly. I tried saving the images as smaller files but they - as expected - just shrink on the page. Any other ideas? Surely the way its set up the links should be posioned within the nav bar image?
April 7, 201016 yr This is what I've got using width: 1280px for #container. I made two images 640*480px as I haven't got your's. One is a sort of mauve and the other orange with the links over it:- http://www.wickham43.com/forumposts/adam100407-2.html The orange one for #navigation is 40px down because you have margin-top: 40px. Is that what you were expecting? Compare my source code with your's.
Create an account or sign in to comment