PDA

View Full Version : Weird CSS Positioning


FrankieB
November 2nd, 2006, 12:59 PM
Hello everyone,

I have a prospective client that has a strange request. I wanted to get some feedback from other professionals before I told the client that this is probably not possible.

The client basically wants to switch up the presentation of their header and footer. They want the footer placed at the top of the code, but at the bottom of the design, and the header at the bottom of the source code but on the top of the page. The only solution I've come up with is to position the footer at the bottom most part of the page, but they want the header to change position in relation to how big the content section is, which would be below it.

I have scratched my head over it and tested for about an hour and can't come up with a solution at all. Is this even possible? It is for SEO purposes I assume...

Thanks,

Frankie
fasterthanlight™
November 2nd, 2006, 01:31 PM
Well, all I have to say is, they do call it Cascading for a reason,
It might be possible, however I am useless and can't give you any insight
nobody
November 2nd, 2006, 01:37 PM
I imagine you could do it with layers, but it wouldn't be pretty.
evildrummer
November 2nd, 2006, 02:05 PM
well ONE (probs not best) way of doing it would have the footer in a div with an id of footer than in CSS have:

#footer {
position: absolute;
bottom: 0px;
}
that would place it over bottom then you would have to get everything else to suffle upwards.
simplistik
November 2nd, 2006, 02:05 PM
It's possible just impractical... why do they want it like that? Why not just have all the code at the top and then echo it out where you need it :D
simplistik
November 2nd, 2006, 02:06 PM
well ONE (probs not best) way of doing it would have the footer in a div with an id of footer than in CSS have:

#footer {
position: absolute;
bottom: 0px;
}
that would place it over bottom then you would have to get everything else to suffle upwards.
Absolute won't shuffle anything cause it's absolute and doesn't affect the things around it relatively... hence... absolute :D
aldomatic
November 2nd, 2006, 02:25 PM
you could do it with relative positioning and negative margins...
fasterthanlight™
November 2nd, 2006, 02:32 PM
different browsers dont render margins the same way

especially negative ones
FrankieB
November 3rd, 2006, 02:21 PM
Well we pretty much examined this for a few hours at work today and we can't come up with a feasible reason as to why they would want to do this. They mentioned SEO but I can't see how this would help them in their situation. When I questioned them regarding why this was so important, they never responeded. Oh well.

I appreciate the help though guys.
ditt0
November 3rd, 2006, 02:52 PM
So they want the info in the footer to be picked up by search engines and probably come up in search results. There are so many ways to do that, you don't have to torture the html for it.
So anyway I know how clients can act.Your html would be:

<body>
<div id="wrapper">
<div id="footer">Footer info goes here</div>
<div id="content">Content text goes here</div>
<div id="header">Header content goes here</div>
</div>
</body>

and the css:


#wrapper {
position: relative;
padding: 40px 0px 30px 0px;
}
#footer {
position:absolute;
bottom:0;
left:0;
border-top:1px solid #ccc;
height:30px;
}
#content {
height:400px;
}
#header {
position:absolute;
top:0;
left:0;
border-bottom:1px solid #cc0000;
height:40px;
}
I hope that's what you wanted.