PDA

View Full Version : navigation alignment problem and no-show of left content


silverglade
03-31-2009, 06:10 PM
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

here is the page im talking about

http://derekvanderven.com/jewel_gallery/home.html

here is my css

@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 my 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" />
<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>

coloeagle
04-01-2009, 12:49 AM
You've got set heights for some divs and set widths for bothe wrapper div's. Play around with these (change or delete)

Also, why both a wrapper div and a content_wrapper div? Are you wanting the gradient image to show behind the actual page content?

Rob_Che
04-01-2009, 09:49 AM
You have the Nav set to 801px wide and the elements floated left for starters.

I agree with Coloeagle though - looks like you're making life difficult for yourself. I'd be tempted to set the widths to good round numbers too - 801px wide gives me shivers.

silverglade
04-01-2009, 09:53 AM
ya i want the gradient to be on the left and right of the content. i got the navigation centered by adding left padding. i guess not the best solution but it worked. i played around with the widths and heights but #left_content is still popping out of #content_wrapper for some reason. it floats left out of #content_wrapper.any more help greatly appreciated. thank you. derek

also, 801px is the width of my background image size, the rest have to line up to that, i should have made it even in photoshop but i didnt.

silverglade
04-01-2009, 10:54 AM
ok i got it to work by repositioning the div order in code. does anyone know why this worked. because i sure dont.got rid of the navigation div around ulnavigation.


<!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>
<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> <!--end navigation-->


<div id="left_content"></div>



</div><!--end contentwrapper-->
</div> <!--end wrapper div-->
</body>
</html>

Corrosive
04-01-2009, 11:05 AM
ok i got it to work by repositioning the div order in code. does anyone know why this worked. because i sure dont. i put the leftcontent div inside the ulnavigation div. and leftcontent stayed inside and didnt pop out like it did before.
here is the new 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" />
<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>
<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> <!--end navigation-->


<div id="left_content"></div>

</div><!--end navigation div-->

</div><!--end contentwrapper-->
</div> <!--end wrapper div-->
</body>
</html>


I don't see an opening tag for your navigation div, just a closing tag...

</div><!--end navigation div-->

This is still not correct I'm afraid.

silverglade
04-01-2009, 11:10 AM
thanks corrosive, check out my above post i altered it while you posted. thanks. derek

Corrosive
04-01-2009, 11:20 AM
thanks corrosive, check out my above post i altered it while you posted. thanks. derek

That looks better :)

Rob_Che
04-01-2009, 11:21 AM
That looks better Derek. You shouldn't need to add padding to the nav div. I'd start that again - have you been to Listamatic? They have some good examples.

I'm not on my own PC so I cant see your stylesheet - why is your BG not repeating for the width of the page?

silverglade
04-01-2009, 12:26 PM
thank you, those are good lists at that link. im afraid to mess with my current list but i had to add padding to center it. which im pretty sure is the wrong way. but the page looks better now, except in firefox, my links hover dont turn orange like they should. any help greatly appreciated. the background should fit the width now. here is the new page so far.

http://derekvanderven.com/jewel_gallery/home.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
height: 0;
background-image: url(home/background.jpg);
background-repeat:repeat-x;
}





#header {
margin: 0 auto 0 auto;
width: 801px;
height: 100px;
background-image: url(home/header.jpg);
background-repeat:no-repeat;
}

#wrapper {
margin: auto;
width: 801px;
height: 703px;
background-color: black;
}

#left_content{
float: left;
height:703px;
width: 400px;
background-color: black;
background-image: url(home/vertical_jewels.jpg);
background-repeat:no-repeat;
background-position: right top;
text-align: left;

border-right: 1px dotted gray;


}



/***********************css navigation code*****************/
ul#navigation
{
font-size:.9em;
font-family: "Courier New";
margin: auto;
padding-left: 60px;
list-style-type: none;

color: #FFF;
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 ********************/

/*****START LEFTCONTENT TEXT ****************/

#left_nav {
width: 177px;
height: 703px;
padding-left: 15px;
text-align: left;
padding-top: 15px;
}

.left_nav {
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
line-height:25px;
}

.small_nav:hover {
color:#EA4C03;
text-decoration:none;
}
.small_nav:link {
color:#666666;
text-decoration:none;
}
a:hover {
color:#EA4C03;
}
a:link {
color:#E47941;
}
a:visited {
decoration: none;
}
.small_nav {
color:#666666;
text-decoration: none;
line-height: 25px;
}

.style1 {
color:#666666;
}


and here is the 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" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>

<title>Jewel Gallery</title>
</head>

<body>




<div id="wrapper">
<div id="header">
</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> <!--end navigation-->


<div id="left_content">

<div id="left_nav">

<p>
<strong style="color: rgb(255, 255, 255);">Ultimate Bauble Odyssey</strong>
<br/>
<span class="style1">
<a class="small_nav" href="design-directory.html">Designer Directory</a>
<br/>
<a class="small_nav" href="in-the-salon.html">In the Salon</a>
<br/>
<a class="small_nav" href="up-for-auction.html">Up for Auction</a>
<br/>
<a class="small_nav" href="special-pieces-&-places.html">Special Pieces & Places</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> The Deal On Diamonds</strong>
<span class="style1">
<br/>
<a class="small_nav" href="beauty-and-pricing.html">Beauty & Pricing</a>
<br/>
<a class="small_nav" href="special-stones.html">Special Stones</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> Savvy Shopping</strong>
<span class="style1">
<br/>
<a class="small_nav" href="rules-of-engagement.html">Rules of Engagement</a>
<br/>
<a class="small_nav" href="buying-for-the-lady.html">Buying for the Lady</a>
<br/>
<a class="small_nav" href="buying-for-the-gentleman.html">Buying for the Gentleman</a>
<br/>
<a class="small_nav" href="shopping-etiquette.html">Shopping Etiquette</a>
</span>
</p>

<p>
<strong style="color: rgb(255, 255, 255);">Building Your Collection</strong>
<br/>
<span class="style1">
<a class="small_nav" href="the-smart-investor.html">The Smart Investor</a>
<br/>
<a class="small_nav" href="old-rock-new-tricks.html">Old Rocks New Tricks</a>
<br/>
<a class="small_nav" href="how-to-use-you-jewelq.html">How to Use your Jewel </a>
<br/>
<a class="small_nav" target="_blank" href="http://jewelq.wordpress.com">Jewel Gallery Blog</a>
<br/>
<br/>
<br/>
<img height="118" border="0" width="100" alt="Jewel Gallery Events" src= "home/events.jpg"/>
</span>
</p>


</div><!--end left_nav-->

</div><!--end leftcontent-->




</div> <!--end wrapper div-->
</body>
</html>

silverglade
04-01-2009, 01:27 PM
actually i just have 2 more problems with this page. the links on leftnav dont turn orange in firefox hovering. and when i add padding to the rightcontent div, it pops the rightnav div off the page. any help greatly appreciated. derek

here is the page so far now. almost done.

http://derekvanderven.com/jewel_gallery/home.html

here is the css

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
height: 0;
background-image: url(home/background.jpg);
background-repeat:repeat-x;
}





#header {
margin: 0 auto 0 auto;
width: 801px;
height: 100px;
background-image: url(home/header.jpg);
background-repeat:no-repeat;
}

#wrapper {
margin: auto;
width: 801px;
height: 703px;
background-color: black;
}

#left_content{
float: left;
height:703px;
width: 400px;
background-color: black;
background-image: url(home/vertical_jewels.jpg);
background-repeat:no-repeat;
background-position: right top;
text-align: left;

border-right: 1px dotted gray;


}

#right_content{
float: left;
height:703px;
width: 250px;
background-color: black;
color: white;
padding-top:15px;

}

#right_nav {
float: left;
height: 703px;
width: 150px;
background-color: black;
}

.nav_header {
color: #B76C28;
font-size: large;
}
#right_nav a
{
color: #B76C28;
text-decoration: none;
}



/***********************css navigation code*****************/
ul#navigation
{
font-size:.9em;
font-family: "Courier New";
margin: auto;
padding-left: 60px;
list-style-type: none;

color: #FFF;
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 ********************/

/*****START LEFTCONTENT TEXT ****************/

#left_nav {
width: 177px;
height: 703px;
padding-left: 15px;
text-align: left;
padding-top: 15px;
}

.left_nav {
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
line-height:25px;
}

.small_nav:hover {
color:#EA4C03;
text-decoration:none;
}
.small_nav:link {
color:#666666;
text-decoration:none;
}
a:hover {
color:#EA4C03;
}
a:link {
color:#E47941;
}
a:visited {
decoration: none;
}
.small_nav {
color:#666666;
text-decoration: none;
line-height: 25px;
}

.style1 {
color:#666666;
}






and here is the 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" />
<link href="jewel_gallery.css" rel="stylesheet" type="text/css"/>

<title>Jewel Gallery</title>


</head>

<body>




<div id="wrapper">
<div id="header">
</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> <!--end navigation-->


<div id="left_content">

<div id="left_nav">

<p>
<strong style="color: rgb(255, 255, 255);">Ultimate Bauble Odyssey</strong>
<br/>
<span class="style1">
<a class="small_nav" href="design-directory.html">Designer Directory</a>
<br/>
<a class="small_nav" href="in-the-salon.html">In the Salon</a>
<br/>
<a class="small_nav" href="up-for-auction.html">Up for Auction</a>
<br/>
<a class="small_nav" href="special-pieces-&-places.html">Special Pieces & Places</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> The Deal On Diamonds</strong>
<span class="style1">
<br/>
<a class="small_nav" href="beauty-and-pricing.html">Beauty & Pricing</a>
<br/>
<a class="small_nav" href="special-stones.html">Special Stones</a>
</span>
<br/>
</p>

<p>
<strong style="color: rgb(255, 255, 255);"> Savvy Shopping</strong>
<span class="style1">
<br/>
<a class="small_nav" href="rules-of-engagement.html">Rules of Engagement</a>
<br/>
<a class="small_nav" href="buying-for-the-lady.html">Buying for the Lady</a>
<br/>
<a class="small_nav" href="buying-for-the-gentleman.html">Buying for the Gentleman</a>
<br/>
<a class="small_nav" href="shopping-etiquette.html">Shopping Etiquette</a>
</span>
</p>

<p>
<strong style="color: rgb(255, 255, 255);">Building Your Collection</strong>
<br/>
<span class="style1">
<a class="small_nav" href="the-smart-investor.html">The Smart Investor</a>
<br/>
<a class="small_nav" href="old-rock-new-tricks.html">Old Rocks New Tricks</a>
<br/>
<a class="small_nav" href="how-to-use-you-jewel.html">How to Use your Jewel </a>
<br/>
<a class="small_nav" target="_blank" href="">Jewel Gallery Blog</a>
<br/>
<br/>
<br/>
<img height="118" border="0" width="100" alt="Jewel Gallery Events" src= "home/events.jpg"/>
</span>
</p>


</div><!--end left_nav-->

</div><!--end leftcontent-->

<div id="right_content">

<p><span class="nav_header">GIA Grading and Reports</span> </p>
<p>A new and vastly improved resource is now available on the web, for those who want to understand the information on a GIA (Gemological Institute of America) diamond grading report. Μore ></p>
<p><span class="nav_header"> Check this out: Jewel Gallery Review:</span>
<br />
</p>
<p> I've known about this design team for a while, since I side-stepped with little dog into the JJ Marco boutique on Madison Avenue last year. Now I can tell you.. a pair of earrings from JJ Marco should be highly considered for a gal that loves everyday luxury. Maybe that gal is yourself. Maybe you drop a hint to your guy. Μore ></p>
<p> <span class="nav_header">The Perfect Ring for the Woman who knows her Diamonds:</span> </p>
<p>This delicious 7.12 Carat Asscher Cut Diamond, in a handmade double prong Platinum mounting is GIA certified E Color, VS1 Clarity and is available through an exclusive network throughout all 50 states. The price is a Jewel Gallery Launch "Party Favor".
$352,440.00 Don't say we never showed you fabulous. Μore> </p>
</div>
<!--end rightcontent-->

<div id="right_nav">
<img height="34" width="150" alt="Friends &amp; Sponsors" src= "home/right_nav/friends-sponsors.jpg"/>

<a href="http://renaissanceplatinum.ad2.com/?section=showcase" target="_blank" >
<img src="home/right_nav/spectacular-platinum-work.jpg" alt="Spectacular Platinum Work" width="150" height="87" border="0" /></a><br /><br />

<a href="http://www.zaffirojewelry.com/" target="_blank" class="sponsors" ><img src= "home/right_nav/delicious-couture-color.jpg" alt="Delicious Couture Color" width="150" height= "94" border="0" /></a><br />
<br />
<a href="http://www.samsclub.com/shopping/search.do?searchtype=simple&amp;catg=1&amp;simplesearchfor =premi er+platinum&amp;simpleitemtype=1&amp;x=14&amp;y=11" target="_blank" class="sponsors"><img src="home/right_nav/timeless-classics.jpg" alt="Timeless Classics Larger Diamonds" width= "150" height="93" border="0" /></a><br />
<br />

<a href="http://www.dovesjewelrydesigns.com/collections/collections.cfm?collection=5" target="_blank" class="sponsors"><img src="home/right_nav/special-in-18-karat.jpg" alt= "Special in 18 Karat White Gold" width="150" height="90" border="0" /></a><br />



</div><!--end rightnav-->


</div> <!--end wrapper div-->
</body>
</html>

silverglade
04-01-2009, 08:48 PM
cool i got help from someone . here is the almost finished page, just need a footer and some links. my wrapper was too small for the rightcontent padding, and i had to add an a:hover orange color to my navigation div.

http://derekvanderven.com/jewel_gallery/home.html