How do I allow a layer to slide up or down as needed

[jazzz]

or can't I? First, thanks in advance. Here is what I am attempting to do, maybe I can't with layers, I don't know.

I have 5 layers on my page the top one is the Navigation bar, which will never change location or size. Under that I have three columns, which can chage in height but not in width, so I have the height blank on those so they can expand as needed. Then the final layer (the one I need to move when one of the three columns grows down to it) is the footer. How do I set this layer to move down or up if it gets forced down. Right now if the middle column runs longer than the footer it covers it over.

Since I am new to layers am I going about my design all wrong, if so what do I need to do to make my footer float so to speak. I am designing in Dreamweaver 8 if that matters.

Life's a journey enjoy the ride...

jazzz

 

[Vragabond]

If your three columns are floated, then you just need to add [tt]clear: both;[/tt] to your footer and you're set. However, if you're using absolute positioning for any (or all) of the three columns, then you can't do it without javascript. So my advice is simple, if you're not yet, use floats.

 

[jazzz]

Thank you, can you give me an example so I have something to compare to.

Life's a journey enjoy the ride...

jazzz

 

[jazzz]

Try as I may I cannot get the bottom element to float up as needed. What am I missing? I can post my settings for the elements above it if anyone would like to review them.

I can see where this could be a problem in the future if the user has different settings than me such as large fonts, I assume the page would be a mess when displayed. Therefore before I go any further I need to address how to make these elements expand and contract while holding their positions. I don't want to use tables, which I have in the past so it is time I bite the bullet and learn CSS. I purchased two books on CSS, I am waiting on their arrival until they arrive any help pointing me in the right direction would be appreciated.


Life's a journey enjoy the ride...

jazzz

 

[Vragabond]

So, show us your code then.

 

[HelloMike]

http://www.w3schools.com/css/default.asp

Cheers, Mike.

 

[jazzz]

Thanks Mike I've been there one of my favorite sites next to this one.

Life's a journey enjoy the ride...

jazzz

 

[jazzz]

Vragabond here is my CSS from my page regarding the elements on the page.

#navheader {
position:absolute;
left:0px;
top:auto;
width:225px;
height:140px;
z-index:6;
visibility:visible;
float: left;
}
#navigation {
position:absolute;
left:225px;
width:475px;
height:140px;
z-index:5;
visibility:visible;
float: left;
top: 0px;
}
#leftnav {
position:absolute;
top:150px;
width:145px;
height:auto;
z-index:4;
visibility:visible;
border: thin solid #CCCCCC;
float: left;
clear: none;
left: 0px;
}
#main_content {
position:absolute;
top:150px;
width:360px;
z-index:3;
border: thin solid #CCCCCC;
visibility: visible;
float: left;
clear: none;
left: 157px;
height: auto;
}
#special_content {
position:absolute;
top:150px;
width:173px;
z-index:2;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
visibility: visible;
clear: none;
float: left;
left: 526px;
height: auto;
}
#footer_links {
position:absolute;
left:0px;
top:818px;
width:700px;
height:auto;
z-index:1;
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
visibility: visible;
float: none;
clear: both;
}


Life's a journey enjoy the ride...

jazzz

 

[Vragabond]

Since I cannot see the html on the page, here's a general advice. Like I said, if you use absolute positioning, what you want won't be achievable without javascript. So lose the absolute positioning. Then lose the top and left positions. You'll be left with just the floats. Adjust the widths and margins of the boxes so they appear like you want them and most of the things will get resolved. Just remember, no position: absolute and all floats.

 

[jazzz]

OK, let me give it a try I can post the entire page if you like or I can post it to a site and you can download it. I thought you just wanted to view the CSS on the elements.

Life's a journey enjoy the ride...

jazzz

 

[Vragabond]

The link to the site would be the best option. I do encourage you to implement the changes I suggested first though.

 

[jazzz]

I made the changes you suggested and all the elements are now in a straight line down the left side of the page. They do adust vertically, my top two elements need to be at the top of the page left and right with the remainding three underneath those and finally the footer under thee three columns.

Changing the code somewhat has placed the Navigation on top, lefnav underneath it (I need it to the right) and everything now is fine below it. Therefore if I can get leftnav to move up and to the right of navigation I will be ok.

#navigation {
width:475px;
height:140px;
z-index:5;
float: right;
}
#leftnav {
width:145px;
height:auto;
z-index:4;
border: thin solid #CCCCCC;
float: left;
}
#main_content {
width:360px;
z-index:3;
border: thin solid #CCCCCC;
visibility: visible;
float: left;
}
#special_content {
width:173px;
z-index:2;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
visibility: visible;
float: left;
}
#footer_links {
width:700px;
z-index:1;
line-height: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
visibility: visible;
float: left;
}


Life's a journey enjoy the ride...

jazzz

 

[Vragabond]

I really can't make much more suggestions without seeing the html structure. Can you please post a link to your site or failing that the complete css and html.

 

[jazzz]

Vragabond, thank you for your offer, I know how hard it is to troubleshoot code without seeing the whole thing. I would be happy to package up what I have in a zip file for you to look at. Do you want the graphics included or not. Also, I am trying another design in my attempt to remedy the problem. I created a main element and am nesting my other elements inside of it, I don't know if that is logical thinking or not but I thought it was worth a shot.

Anyway I can send/upload both just let me know if you want me to add the graphics.

Thank You...

Life's a journey enjoy the ride...

jazzz

 

[jazzz]

Here is the link to a zip file with our data in it. When you have time to take a look at it I would appreciate it. Please understand I am not asking you to do the work all I need to do is understand how this is supposed to work, once I figure that out I am sure it will be a snap. Thanks in advance.

I included the images, which go in a subfolder named \images and the css style sheet that I placed in a subfolder called \css

http://www.jsssoftware.com/monthly_upd/element_page.zip

Life's a journey enjoy the ride...

jazzz

 

[jazzz]

Vragabond, I got it figured out. If you view my zip that is the layout I was aiming for, I came very close in final design. I will need to tweak everything much more but I think I have it figured out, once the books arrive I can teach myself more, I should be fine. Again thank you for all the input.

Life's a journey enjoy the ride...

jazzz