Rules      FAQ       Register        Login
It is currently April 19th, 2024, 6:58 pm

All times are UTC - 5 hours [ DST ]




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Sidebar navigation issues
PostPosted: June 28th, 2007, 11:59 am 
Istari
Istari
User avatar

Joined: 03 June 2005
Posts: 2141
Location: Davenport, Iowa

Offline
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?

_________________
<center>
Image
i've got a jar of raeg

</center>


Top
 Profile       WWW            
 
 Post subject:
PostPosted: June 28th, 2007, 2:22 pm 
Istari
Istari
User avatar

Joined: 02 September 2005
Posts: 2093

Offline
Quote:
position:absolute; top:0;


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

_________________
Image<br><br><a href="http://immortalkiss.sarrand.net/"><img src="http://immortalkiss.sarrand.net/ik_lb6.jpg" border="0"></a>


Top
 Profile       WWW            
 
 Post subject:
PostPosted: June 28th, 2007, 2:46 pm 
Istari
Istari
User avatar

Joined: 03 June 2005
Posts: 2141
Location: Davenport, Iowa

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

_________________
<center>
Image
i've got a jar of raeg

</center>


Top
 Profile       WWW            
 
 Post subject:
PostPosted: June 28th, 2007, 5:29 pm 
Rider of Rohan
Rider of Rohan
User avatar

Joined: 10 December 2005
Posts: 134

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

_________________
<img src="http://thulcandra.com/randombanner/banner.php" title="Banner by Arwen">
I can help with HTML/CSS/JavaScript/PHP/ASP. I can't do graphics or layouts.
Post in Site Help, I'll see it. Or PM me.


Top
 Profile                  
 
 Post subject:
PostPosted: June 28th, 2007, 5:41 pm 
Istari
Istari
User avatar

Joined: 03 June 2005
Posts: 2141
Location: Davenport, Iowa

Offline
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...

_________________
<center>
Image
i've got a jar of raeg

</center>


Top
 Profile       WWW            
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC - 5 hours [ DST ]




Who is online

Users browsing this forum: No registered users and 13 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron




Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Boyz theme by Zarron Media 2003