2 replies [Last post]
sudodaemon
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2009-05-13
Posts: 8
Points: 0

I'm very new to CSS... I'm trying to design a website for my wife and I'm running into a problem... this is the site...

http://www.polkadotbabybowtique.com

Click shop and you'll see my problem... The left navigation list will not span 100% in height... If I put 200% in it will go to double the size it's at now, a specific pixel amount works fine, but 100% just sits like it is... I need to to span to the bottom of the pink box it is in, not the ENTIRE page... It's contained within the div for the pink box so I'm at a loss... I'm sure it's something simple I'm overlooking, I'm just pulling my hair out trying to figure it out...

Here is the CSS and the HTML code for the shop page.

CSS First...

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

html
{
width:100%;
height: 100%;
}

body
{
font-family:Geneva, Arial, sans-serif;
background-image:url(../images/backgrounds/dotBG.jpg);
width:100%;
height: 100%;
background-repeat:repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#mainbody
{
height:100%;
width: 100%;
}
#stripetop
{
width:100%;
height:250px;
margin:0px 0px -20px 0px;;
background-image:url(../images/backgrounds/topBG.jpg);
background-repeat:repeat;
background-position: center;
}

#browntop
{
width:100%;
min-width: 830px;
height:233px;
background-image: url(../images/backgrounds/logoBG.jpg);
background-repeat:repeat;
background-position: center;
margin-top: -237px;
border-left:4px solid;
border-right: 4px solid;
border-top: 4px solid;;
border-color: #FDBCDA;

}

#centerwindow
{
margin:0px auto 0px auto;
width:60%;
min-width: 830px;
height:90%;
background-color: #FEE5F0;
background-repeat:repeat;
background-position:center;
border-right: 8px solid;
border-color: #FEE5F0;
}
/* ----------------------------------------- Navigation Buttons ----------------------------------------- */
#preload
{
display: none;
}
#aboutbutton
{
position: relative;
top: 80px; left: 440px;
float: right;
z-index: 1;
}
#homebutton
{
position: relative;
top: 95px; left: -270px;
float: right;
z-index: 10;
}
#shopbutton
{
position: relative;
top: 15px; left: 40px;
float: right;
z-index: 20;
}
#cartbutton
{
position: relative;
top: 145px; left: -280px;
float: right;
z-index: 30;

}
#contactbutton
{
position: relative;
top: 15px; left: -20px;
float: right;
z-index: 40;
}
#personalbutton
{
position: relative;
top: 95px; left: 100px;
float: right;
z-index: 50;
}
/* ----------------------------------------- End of Navigation Buttons ---------------------------------- */

/* ----------------------------------------- Left Navigation Buttons ---------------------------------- */

#leftnavigation
{
display:block;
padding:20px 0px 0px 0px;
margin:0 0 0 0;
max-width: 150px;
min-width: 150px;
height: 100%;
background-color: #F9ABD1;
}

#leftnavigation li
{
text-align: center;
list-style-type: none;
background-color: #F9ABD1;
padding: 0 15px 0 15px;
}
#leftnavigation a:link
{
color:BLACK;
text-decoration: none;
}
#leftnavigation a:hover
{
color:white;
text-decoration: none;
}

HTML Code Now----------------------------------------------

Polka Dot Baby Bowtique - Personalized Baby Embroidery

@import url(styles/main.css);

/* ----------------------------------------- MouseOver Script -------------------------------------------------- */
function mouseOver(num)
{
if (num==1)
{
document.getElementById("cart").src="images/buttons/hover/Cart-Button-over.jpg"
}
else if (num==2)
{
document.getElementById("contact").src="images/buttons/hover/Contact-Button-over.jpg"
}
else if (num==3)
{
document.getElementById("home").src="images/buttons/hover/Home-Button-over.jpg"
}
else if (num==4)
{
document.getElementById("personalized").src="images/buttons/hover/Personalized-Options-Button-over.jpg"
}
else if (num==5)
{
document.getElementById("shop").src="images/buttons/hover/Shop-Button-over.jpg"
}
else if (num==6)
{
document.getElementById("about").src="images/buttons/hover/About-Button-over.jpg"
}
}
function mouseOut()
{
document.getElementById("home").src="images/buttons/normal/Home-Button.jpg"
document.getElementById("cart").src="images/buttons/normal/Cart-Button.jpg"
document.getElementById("contact").src="images/buttons/normal/Contact-Button.jpg"
document.getElementById("personalized").src="images/buttons/normal/Personalized-Options-Button.jpg"
document.getElementById("shop").src="images/buttons/normal/Shop-Button.jpg"
document.getElementById("about").src="images/buttons/normal/About-Button.jpg"
}
/* ----------------------------------------- End of MouseOver Script ------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------- */

cartover
contactover
homeover
personalizedover
shopover
aboutover

pdbblogo

Any help would be awesome!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

research faux columns

research faux columns

sudodaemon
Offline
newbie
Last seen: 13 years 10 weeks ago
Joined: 2009-05-13
Posts: 8
Points: 0

thanks

I knew it was simple... all fixed now