hi, my css navigation menu is not linking up centered with my header div, or the image in it. it is off to the left. i have the navigation inside a centered div but its not centering. also, my #left_content image is not showing up in browser except for way below the #wrapper div to the left, and its not lining up with the header div either it goes all the way to the left. any help greatly appreciated. thanks .derek
EDIT- i added left padding to the containing div of the navigation to move it to the center. is that the correct way to center a list navigation in the page?
here is the page im talking about
http://derekvanderven.com/jewel_gallery/home.html
here is the css
Code:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
height: 0;
}
#wrapper {
margin: 0 auto 0 auto;
width: 1007px;
height: 863px;
background-image: url(home/background.jpg);
background-repeat:repeat-x;
}
#content_wrapper {
margin: 0 auto 0 auto;
width: 801px;
height: 863px;
}
#header {
margin: 0 auto 0 auto;
width: 801px;
height: 100px;
background-image: url(home/header.jpg);
background-repeat:no-repeat;
}
#left_content{
float: left;
height:840px;
width: 400px;
background-color: black;
background-image: url(home/vertical_jewels.jpg);
background-repeat:no-repeat;
background-position: right;
text-align: left;
padding-left: 15px;
}
#navigation_div {
margin: 0 auto 0 auto;
width: 801px;
height: 25px;
}
/***********************css navigation code*****************/
ul#navigation
{
font-size:.9em;
font-family: "Courier New";
margin: 0 auto;
padding: 0;
list-style-type: none;
background: ;
color: #FFF;
float: left;
width: 100%;
}
ul#navigation li
{
display: inline;
}
ul#navigation a
{
float: left;
margin: 0 auto;
display:block;
padding: .2em 2em;
text-decoration:none;
color: #fff; /* text color*/
background: #A06710; /* background color */
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
}
ul#navigation a:hover
{
color: #995522; /* hover text */
background: black; /* background color may be transparent value*/
border-color: #aaab9c #fff #fff #ccc;
}
/*********************END CSS NAVIGATION CODE ********************/
and here is the 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" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>
<title>Jewel Gallery</title>
</head>
<body>
<div id="wrapper">
<div id="content_wrapper">
<div id="header">
</div>
<div id="navigation_div">
<ul id="navigation">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">Education</a></li>
<li><a href="services.html">Ask The Experts</a></li>
<li><a href= "archive.html">Archive</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul> </div><!--end navigation-->
</div><!--end navigation_div-->
<div id="left_content">
</div> <!--end leftcontent-->
</div><!--end contentwrapper-->
</div> <!--end wrapper div-->
</body>
</html>
Last edited by silverglade; 03-31-2009 at 04:31 PM..
|
i had no idea i could put padding on p. so i changed all my pages to do that.
