7 replies to this topic

[Bouzy210]

I will say this is the first time I have made a layout's sidebar links this way, but it is not working. As you can see, my original intent was to have the sidebar expand so the footer just gets pushed down when more content is added. (Like my content that works great expandible and all) Also the sidebar looks different in Ie than FF. I have a clear: both; property in the footer so it should work but its not. Please help.

http://www.goldfishg.../Blue/index.php

[austen]

Cool layout. Though I don't see a footer, the content box background isn't stretching to the bottom of your links on the right. is that what you're trying to get to work? Could you post some specific code on what you're trying to fix maybe?

-austen

[Bouzy210]

Yes ok basically each link on the side on hover has a background color. So I had to make a another div or class for the image of the sidebar. Basically I have a background image, and then in a seperate div I have the links, then in a seperate div I have the link text.

So my 2 main problems are the background image doens't expand with the links. And the footer doens't move down when the link list gets longer. (The gray area is the footer box)

Hear is some code...


The sidebar xhtml

<div class="sidelinks">
 
 <ul id="linkside">
 
 <a href="index.php" id="linkside"><span id="text">Example Link </span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="index.php" id="linkside"><span id="text">Example Link </span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="index.php" id="linkside"><span id="text">Example Link </span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 <a href="#" id="linkside"><span id="text">Example Link</span></a>
 
 </ul>
 
 </div>

the sidebar css...

#linkside {
   
   margin-top: 0px;
   margin-bottom: 0px;
   padding-top: 3px;
   padding-bottom: 3px;
   
   text-decoration: none;
   font-size: 14px;
   color: #2c2c2c;
   width: 191px;
   height: 16px;
   display: block;
 
 }
 
 #linkside a:hover {
 
   border-style: solid;
   border-left: 5px solid #313131;
   background-color: #cfe7f3;
   color: #2c2c2c;
   width: 191px;
   height: 16px; 
 
 }
   
 .sidelinks {
 
   padding-left: 8px;
   border-style: solid;
   border-left: 1px solid #ebebeb;
   width: 199px;
   min-height: 100px;
   margin-top: 6.5px;
   margin-bottom: 6.5px;
   margin-left: 570px; 
  
 }
 
 #text {
 
   padding-left: 8px;
 
 }

The footer css (with some other stuff)...

#content {
 
   background-color: #ffffff;
   width: 538px;
   min-height: 300px;
   
   margin-top:	6.5px;
   margin-bottom: 0px;
   margin-right:  0px;
   margin-left:   6.5px;
   padding-left: 4px;
 
   float: left;
  
 }
 
 #footer {
 
   background-image: url(Images/footer.jpg);
   background-repeat: no-repeat;
   width: 769px;
   height: 75px;
   text-align: center;
   margin-left: 6.5px;
   padding-bottom: 6.5px;
   margin-top: 8px;
   clear: both;
   
 }

Thanks for the reply and I hope I can get this figured out.

[austen]

What if you were to put a "container div" around the whole content/sub-menu part of the layout, then the footer should go down as you wanted. I attached a picture outlining sort of what I mean. You might have to change up the css a little still, but try that and let me know if you need any help.

Note: though the outline doesn't completely contain the menu, the container should include the whole menu within it in order for the footer to work properly.

-austen

Attached Files

•  p2lex1.jpg   140.73K   37 downloads

Edited by austen, 01 October 2007 - 01:22 PM.

[Bouzy210]

Acually it had to do with some invalid Css. Now the sidebar expands fine. I fixed all the problems I was having exept one. It still looks messed up when you visit it in ie 7.

[austen]

Nice, good job! It always feels good to figure out your own answers. I'd try to help with the IE issue but at the moment all I've got is OS X and no IE 7

-austen

[Ghost]

You can reduce the size of your images to 1px in width, and then use css to repeat them horizontally, instead of having large images. It's not going to help with your problem at all, but it will make the page smaller in file size.

Example, change this image so it's only 1 pixel in width and add repeat-x to your css. Same with the navigation image.

[Bouzy210]

I never realized you could do that. Thanks. (Still have the IE problems I think I will try some hacks and see how that goes)