Arwen-Undomiel.com
http://arwen-undomiel.com/forum/

Sidebar navigation issues
http://arwen-undomiel.com/forum/viewtopic.php?f=27&t=15730
Page 1 of 1

Author:  Ellethwen [ June 28th, 2007, 11:59 am ]
Post subject:  Sidebar navigation issues

http://www.evenstar.crowned-meadow.net/4.8

My navigation keeps getting cut off if the content isn't longer, but if the content gets longer the navigation is pushed...down...

I need it so that the navigation stays at the top, and isn't dependant on the length of the content.

Here's my stylesheet:

Code:
body {
background-color: #E3DCCA;
background-image: url(back03.png);
background-attachment: none;
scrollbar-face-color: #81805F;
scrollbar-highlight-color: #81805F;
scrollbar-3dlight-color: #81805F;
scrollbar-darkshadow-color: #81805F;
scrollbar-shadow-color: #81805F;
scrollbar-arrow-color: #E3DCCA;
scrollbar-track-color: #E3DCCA;
font-family: Georgia;
font-style:normal;
font-size: 12px;
line-height: normal;
font-weight: normal;
font-variant: normal;
letter-spacing:normal;
color: #CFC6B3;
text-align:center;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}

A:link{color:#81805F; text-decoration:none; font-family: Georgia;}
A:visited{color:#81805F; text-decoration:none; font-family: Georgia;}
A:active{color:#81805F; text-decoration:none; font-family: Georgia;}
A:hover{color:#B9B5A0; text-decoration:none; font-family: Georgia;}

U {font-family: Georgia; color: #81805F; letter-spacing: 0pt; border-bottom: 1px; border-style: dashed, border-color: #81805F;}
B, STRONG {font-family:Georgia; font-weight: bold; color: #81805F; letter-spacing:none;}
i, EM {font-family:Georgia; color: #81805F; letter-spacing:none;}

input {
font-family: Georgia;
color: #CFC6B3;
background: 0;
font-size: 12px;
font-weight: normal;
text-decoration: none;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color:#81805F;
}

.head {
font-weight:bold; letter-spacing:2px;
border: dashed #81805F;
border-width: 0px 0px 1px 0px;
color:#81805F;padding-left:2px;
font-size: 12px; font-family: Georgia;
text-align:center;text-transform:uppercase;
}

.sidenav {
   color: #81805F;
   padding: 2px;
   background-color: #DDDCBA;
   border-bottom: 1px dashed #81805F;
   font-size: 11px;
   text-align: center;
   display: block;
   margin-bottom: 3px;
   margin-left: 1px;
}

.sidenav:hover {
   color: #B9B5A0;
   font-family: Georgia;
   background-color: #EBE5D9;
   border-bottom: 1px dashed #B9B5A0;
   text-decoration: none;
   display: block;
}

.box {
   color:#81805F;
   width:90%;
   background:#DDDCBA url(boxside01.png) left repeat-y;
   padding-left:50px;
   padding-right:5px;
   padding-top:5px;
   padding-bottom:5px;
   border-top:3px solid #81805F;
   border-right:3px solid #81805F;
   border-bottom:3px solid #81805F;
}

#container {
position:relative;
margin-left:auto;
margin-right:auto;
width: 650px;
min-height:100%;
text-align: left;
background-image: url(contback01.png);
}

#header {
width:100%;
height:450px;
margin: 0px 0px 5px 0px;
position:relative;
z-index:2;
overflow:hidden;
}

#content {
font-family: Georgia;
color: #BBB19D;
font-size: 12px;
position:relative;
width: 465px;
padding: 15px;
margin-bottom: 10em;
}

#sidebar {
font-family: Georgia;
color: #B0AF8B;
font-size: 12px;
float: right;
position:relative;
right: 27px;
width: 155px;
padding: 5px;
margin-bottom: 10em;
margin-top:-47em; 
}

#footer {
position:absolute;
bottom:0;
width:100%;
height: 24px;
}

#footer p {margin:0;padding:0}


.divider1 {
width:100%;
height:5px;
overflow:hidden;
position:relative;
}

#clearfooter {height:27px;width:100%;clear:both}

.blank , .blank2 {
position:absolute;
left:547px;
width:7px;
height:0px;
overflow:hidden;
}

.blank {top:-1px;}


So, what's the problem? How can I fix this?

Author:  Riniel Anariel [ June 28th, 2007, 2:22 pm ]
Post subject: 

Quote:
position:absolute; top:0;


This code should do it. Just put in how far from the top you want it.

Author:  Ellethwen [ June 28th, 2007, 2:46 pm ]
Post subject: 

It still moves the sidebar up and down depending on the content >.<

Author:  The Grey Pilgrim [ June 28th, 2007, 5:29 pm ]
Post subject: 

Try adding
Code:
float: left;
to the content div.

Author:  Ellethwen [ June 28th, 2007, 5:41 pm ]
Post subject: 

That didn't do it either.

Maybe I should just scrap this layout, it's given be a great big headache. But I like the design of it so much and I know it's possible to fix my problem. I just...have to find out how...

Page 1 of 1 All times are UTC - 5 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/