December 24, 201015 yr Hi, my content area seems to shift to the side for some reason. I don't really need to explain the problem in detail, as it can clearly be seen through the image below. can anyone help me resolve this problem. I'm new to css and it's really confusing me. Thanks My index and style code can be seen below: Index.html <!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" <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Home</title> <body> <div id="header_wrap"> <div id="header"> </div> </div> <div id="navbar_wrap_outer"> <div id="navbar_wrap_inner"> <div class="navbar"> <div class="button"><a href="#">Home</a></div> <div class="button"><a href="#">Online Services</a></div> <div class="button"><a href="#">Information Age</a></div> <div class="button"><a href="#">Digital Divide</a></div> <div class="button"><a href="#">Site Map</a></div> </div> </div> </div> <div id="content_wrap"> <div id="content"> </div> </div> </body> </html> Style.css @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; /*NOTE THIS*/ width: 960px; height:30px; /*margin:0px;*/ margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; /*NOTE THIS*/ height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; /*NOTE THIS*/ background: url(../images/nav-background.png) /*width:960 px;*/ height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; /*width:50px;*/ padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } #content_wrap { } #content { float:left; color:#333; background:#FFFFFF; height:350px; width:960px; display:inline; }
December 24, 201015 yr Hi, Replace below html and css, in which i have do some changes. and now its working. Below is the index.html code <!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>Untitled Document</title> </head> <body> <div id="header_wrap"> <div id="header"> </div> </div> <div id="navbar_wrap_outer"> <div id="navbar_wrap_inner"> <div class="navbar"> <div class="button"><a href="#">Home</a></div> <div class="button"><a href="#">Online Services</a></div> <div class="button"><a href="#">Information Age</a></div> <div class="button"><a href="#">Digital Divide</a></div> <div class="button"><a href="#">Site Map</a></div> </div> </div> </div> <div id="content"> Your Content here </div> </body> </html> Below is the style.css @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; /*NOTE THIS*/ width: 960px; height:30px; /*margin:0px;*/ margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; /*NOTE THIS*/ height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; /*NOTE THIS*/ background: url(../images/nav-background.png) /*width:960 px;*/ height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; /*width:50px;*/ padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } #content { margin:0px auto; color:#333; background:#0C0; height:350px; width:960px; } Thanks
Create an account or sign in to comment