Hi the image that you see below is the top bar i have created for my website. As you can see it doesn't fit the very top of the screen and the width doesn't reach both ends. http://img535.imageshack.us/img535/3374/csstopbar.png Here is the css code for the top bar below. /* top */ #top { background: url(images/top.jpg); height: 45px; font-size: 14px; color: #FFFFFF; width: 100%; display: block; text-align: left; border-bottom: 5px #FFFFFF solid; } #top ul { margin: 0px 0px 0px 20px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } #top ul li { float: left; display: inline; list-style-type: none; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } #top ul li.top_text { padding-top: 15px; font-size: 14px; } #top ul li.top_form { padding-top: 10px; } #top ul li.top_input { padding-top: 14px; vertical-align: middle; } #top form { margin: 0px; padding: 0px; } #top ul li.top_text_right { padding-top: 15px; float: right; margin-right: 20px; font-size: 14px; } #top ul li.t { padding-left: 20px; } #top ul li img { vertical-align: middle; } #top a { color: #FFFFFF; font-weight: bold; } #top ul li.top_line, #top ul li.top_line_right { background-image: url(images/top_line.jpg); width: 4px; height: 45px; background-repeat: no-repeat; margin: 0px 10px; } #top ul li.top_line_right { float: right; } #top ul li.top_select { float: right; padding: 13px 20px 0px 0px; } #top select { border: 1px solid #b5c7c9; padding: 1px; text-align: left; font-size: 12px; color: #125a84; height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; } #top input.text { border: 1px solid #000000; width: 150px; padding: 0px; text-align: left; vertical-align: middle; } Code (markup): Can anyone tell me how to do this, what code i have to put in? Thankyou.
as per css snippet there is nothing to do with div #top, have you set margin and padding to 0 for your body? body{margin:0; padding:0} if this doesn't get you the result, please post entire html/css, so that we can look into it.
Thanks for the help, i got the width part working fine now but it won't still go to the top of the page. Here is my full html document with the css included. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>My Website</title> <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" /> <!--CSS Starts Here --> <style type="text/css"> body { margin:0; padding:0; background-image:url('images/bg.png'); background-repeat:repeat-y; font-family: arial; font-size: 12px; color: #000000; } /* top */ #top { background: url(images/top.jpg); height: 45px; font-size: 14px; color: #FFFFFF; width: 100%; display: block; text-align: left; border-bottom: 5px #FFFFFF solid; } #top ul { margin: 0px 0px 0px 20px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } #top ul li { float: left; display: inline; list-style-type: none; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } #top ul li.top_text { padding-top: 15px; font-size: 14px; } #top ul li.top_form { padding-top: 10px; } #top ul li.top_input { padding-top: 14px; vertical-align: middle; } #top form { margin: 0px; padding: 0px; } #top ul li.top_text_right { padding-top: 15px; float: right; margin-right: 20px; font-size: 14px; } #top ul li.t { padding-left: 20px; } #top ul li img { vertical-align: middle; } #top a { color: #FFFFFF; font-weight: bold; } #top ul li.top_line, #top ul li.top_line_right { background-image: url(images/top_line.jpg); width: 4px; height: 45px; background-repeat: no-repeat; margin: 0px 10px; } #top ul li.top_line_right { float: right; } #top ul li.top_select { float: right; padding: 13px 20px 0px 0px; } #top select { border: 1px solid #b5c7c9; padding: 1px; text-align: left; font-size: 12px; color: #125a84; height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; } #top input.text { border: 1px solid #000000; width: 150px; padding: 0px; text-align: left; vertical-align: middle; } </style> <!-- CSS Ends Here --> </head> <body> <!--Top Bar Starts Here --> <div id="top" metal:define-macro="top"> <p id="line"></p> <ul> <li class="top_text"><b>Main Logo Goes Here</b></li> <li class="top_text_right"><a href=''>Sign In</a> <a href=''>Sign Up</a> <fb:login-button perms="email,user_birthday"></fb:login-button></li> </ul> </div> <!-- Top Bar Ends Here --> <p>Welcome to my website!</p> </body> </html> Code (markup): Thanks.