[RESOLVED] Automagically resizing site

[blue-eye-labs]

I have a site at http://www.blueeyelabs.com where, at the moment, the structure is fixed. In other words, the central section stays the same size and the header and footer stay in the same place.

On redesigning, I've been trying to make it so that the while the header stays in the same place, and so does the central section, the central section's height changes depending on the content in it; it automagically adapts to fit the amount of content and as it does so, the footer remains at the bottom of the central section.

I've already tried using height:auto;
top:auto;
position:relative; but to no avail, it makes the everything falls out of place.

The current CSS structure is as follows:


<globalWrapper>
<header>
<menu>the menu</menu>
</header>
<mainContent>
<content>some content</content>
</mainContent>
<footer>the footer</footer>
</globalWrapper>



These tags all represent DIVS with those IDs, the css for them is as follows:


body {
background:url(../img/wsBG.jpg) fixed repeat;
color:#6878A9;
min-width:800px;
margin:0px;
padding:0px;
text-align:center;
}

#globalWrapper {
position:relative;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:25px;
}

#header {
background:url(../img/header.png) no-repeat;
color:#6878A9;
width:700px;
height:100px;
left:50%;
margin-left:-350px;
top:30px;
position:absolute;
}

#menu {
background:url(../img/menuBG.png) no-repeat;
color:#6878A9;
width:660px;
height:50px;
left:350px;
margin-left:-350px;
top:100px;
padding-left:40px;
display:block;
position:absolute;
}

#mainContent {
background:url(../img/mainContentBG.png) repeat-y;
color:#6878A9;
width:700px;
height:500px;
left:50%;
margin-left:-350px;
top:180px;
position:absolute;
background-image: url(../img/mainContentBG.png);
}
#content {
color:#6878A9;
width:600px;
height:500px;
left:50px;
top:0px;
text-align:left;
position:absolute;
overflow:auto;
}

#footer {
background:url(../img/footer.png) no-repeat;
color:#6878A9;
width:650px;
height:50px;
left:50%;
margin-left:-350px;
text-align:left;
top:680px;
position:absolute;
padding-left:50px;
}


Any help with this would be much appreciated, and I hope it makes some sense.

[dtm32236]

#mainContent {
background:url(../img/mainContentBG.png) repeat-y;
color:#6878A9;
width:700px;
height:500px;
left:50%;
margin-left:-350px;
top:180px;
position:absolute;
background-image: url(../img/mainContentBG.png);
}
#content {
color:#6878A9;
width:600px;
height:500px;
left:50px;
top:0px;
text-align:left;
position:absolute;
overflow:auto;
}

remove these height attributes.... you don't need height:auto;

don't use height at all.

[blue-eye-labs]

brilliant, ok.
But then how do I make the footer stay right below the main content section?

[blue-eye-labs]

one issue, I removed the height attribute and now the content area has disappeared, annoyingly.
I used Safari's web inspector to find it, and it now has a computed height of -15px, and all the elements in it are occasionally in the right place, but are invisible.

[aj_nsc]

I apologize in advance that this post has absolutely nothing to do with your question (although pertinent to the thread). Thanks to you, blue-eye-labs, for giving me the idea for my submission to the banished words list (http://www.lssu.edu/banished/submit_word.php) this year - automagically.

[Centauri]

If you absolutely position something, you take it out of the document flow - Its position won't be affected by other elements, and other elements' positions cannot be affected by it. To get the footer to follow content, remove all the absolute positioning, and position using margins.

[blue-eye-labs]

Wow, you're wit is overwhelming. I'll keep it in mind to add your post to the "irrelevancies of the year" list for 2008.
Tell me, how do you spell colour? Neighbour? Doughnut?

[blue-eye-labs]

If you absolutely position something, you take it out of the document flow - Its position won't be affected by other elements, and other elements' positions cannot be affected by it. To get the footer to follow content, remove all the absolute positioning, and position using margins.

Thanks, but the problem is that the content area now has a height of -15px, which means that the footer will position itself above the menu, won't it?

[Centauri]

Thanks, but the problem is that the content area now has a height of -15px, which means that the footer will position itself above the menu, won't it?

How can the content area have a height of -15px ??? - it should expand with content, unless the content is floated in which case you need to clear the floats.

Do you have a link to the redesign ?

[blue-eye-labs]

unfortunately I'm testing locally with XAMPP. Safari's web inspector says that the content's computed height is -15px, annoyingly. This could be because all the content is positioned absolutely.

EDIT

I changed all the content to have relative positioning, and the inspector shows that they are all in the right place, but for some reason the maincontent box (now called contentBG) has a computed height of 0px, while the content box has a computed height of -15px, for some reason.

In FF, something else happens. It seems like the content area has a really really small height and so some stuff is visible.

EDIT

I deleted the line which dealt with the overflow, and now the content is visible, but still is not within the content box, which is becoming painful.

[Centauri]

This could be because all the content is positioned absolutely.

Could be? - most definitely IS. A container cannot surround contents when that content has been "lifted" out of it and "hovered" over it with absolute positioning. This is why absolute positioning should ONLY be used to place items over top of other things, and not as a general positioning scheme.

If you could upload what you have so far to a tempory location, it would make it easier for us to offer further suggestions.

[blue-eye-labs]

ok, I'll upload to a testing server at:
http://test-server.blueeyelabs.com/home.php

it's uploaded.

[Centauri]

Back

I had a look at this, and rather than sift through the extraneous styles and non-semantic markup, coded it from scratch. Due to the number of changes, I uploaded the example here (http://www.centauriaudio.com.au/test/blue-eye-labs/home.html).

The html markup does differ a bit from yours, but you should be able to get the general drift with the positioning - no absolute positioning at all was used, only margins, paddings and floats. Obviously, this is staight html markup, but it shouldn't be too difficult to integrate into your php environment should you wish to utilise aspects of the html. I hadn't set up an IE styleheet, but the only thing required is the background graphics changes - no other styles are required in an IE6 stylesheet.

[blue-eye-labs]

wow, thank you very much.
I will take a look at that in a bit, I'm kinda tied down for a few hours. Will it adjust its size automagically?

Can I use margins then instead of "left:x" and "top:x" &c.?

[Centauri]

Yes, it will expand vertically as content grows, or text is resized.

Think of building a house - the thickness of the foundation determines the position of the floor, the thickness of the floor determines the position of the walls, etc, etc. Building a website is similar, only the "ground" is the top left corner - you wouldn't hang the roof of a house at a specific height and then try to position a wall under it...

[blue-eye-labs]

cheers, I'll adapt your code to my website tomorrow (GMT)... doing chemistry at the moment...
Thank you very much for your help.

[blue-eye-labs]

It just won't work for me, I've tried to adapt your code to my site, but it just fails... I've re-uploaded to the testing server, so if you wouldn't mind checking it, that'd be much appreciated.
Thanks for your help so far.

[Centauri]

Step-by-step tutorial coming up - this will go over several posts...

Here I will use your markup as is - this is a styling and positioning exercise, not a lesson in semantics. However, there are a few errors which need to be corrected first. alt attributes cannot be applied to lnks, only images as they are for displaying alternate text when the image is not available. Therefore, change the alt altributes to title attributes on the links in #home_imgContainer : <div id="home_imgContainer">
<a href='/pages/viewImages.php?id=63' title='Beyond the Looking Glass'>
<img class='home_imgPlace' alt='Beyond the Looking Glass' src='/portfolio/images/thumbs/63.jpg' border='0' /></a>

<a href='/pages/viewImages.php?id=79' title='Blue Eye Labs - OpticalOrgasm Logo'>
<img class='home_imgPlace' alt='Blue Eye Labs - OpticalOrgasm Logo' src='/portfolio/images/thumbs/79.jpg' border='0' /></a>

<a href='/pages/viewImages.php?id=51' title='Lost Gateway'>
<img class='home_imgPlace' alt='Lost Gateway' src='/portfolio/images/thumbs/51.jpg' border='0' /></a>

<a href='/pages/viewImages.php?id=45' title='Desert Rose'>
<img class='home_imgPlace' alt='Desert Rose' src='/portfolio/images/thumbs/45.jpg' border='0' /></a>
</div>
Next, a <dl> can only directly contain either <dt>s or <dd>s, and not a paragraph. Therefore, move the "Latest News" paragraph (which really should be a heading, as that it what it is...) to just above the <dl> : <p class='para1'>Latest News:</p>
<dl id='newssummary'>

<dt>
<a href='/pages/news.php?id=116'><b>Happy New Year 2008</b></a> </dt>
Now it should valdate.

Next, STRIP EVERYTHING OUT OF ALL CSS FILES !!, includng the IE ones. Page looks pretty bland now, doesn't it? :)

Next, restore the basic body, link and text styles in universal.css :@charset "UTF-8";
/* CSS Document */
/*Blue Eye Labs | Universal CSS*/

* {
margin:0;
padding:0;
}

body {
background:url(/library/images/wsBG.jpg) fixed repeat;
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-top:25px;
}

p {
margin:1em 0;
}


/* Text &c Classes */
.header1 {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.header2 {
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
line-height:normal;
}
.para1 {
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
}
.para2 {
color:#6878A9;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:lighter;
}
ul {
list-style-type:circle;
list-style-position:inherit;
color:#6878A9;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
text-decoration:none;
text-indent:2px;
font-weight:lighter;
font-size:12px;
line-height:90%;
}
li {
list-style-type:circle;
list-style-position:inherit;
color:#6878A9;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
text-decoration:none;
font-weight:lighter;
font-size:12px;
line-height:150%;
}

a:link {
color:#AFBFC0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:lighter;
}
a:visited {
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight:normal;
}

Now we can start on the structure styling.

As the widest thing on the page is 700px wide, I am not sure why you insist on making the wrapping #unverse div 800px wide. If it is set to 700px wide, then internal divs will automatically fill this width when no width is assigned to them. So now we add the #universe css :#universe {
width:700px;
margin: 0 auto;
}
Working now from top to bottom (like building a house from the ground up, except in this case the ground is the top left corner), next is the header div. I note that the menu is now included in this div, and there is no other content. As the header graphic is 100px high, a 100px top padding will space the menu down below the background graphic. No width or height are required here : #header {
background:url(../../library/images/header.png) no-repeat;
padding-top: 100px;
}
If you look at the page now, you have a centred top header and everything else is contained below - a good starting point.

Next comes the menu. The basic styling you had can be simplified somewhat. The <a> background position (including hover) and background repeat can be applied globally to all the links in the menu, meaning the classes and ids only need the background-image information. The z-index is also not needed now. As the <a>s and <li>s are floated, also give the <ul> the height to prevent its collapse and hiding of the background image : #menu {
background:url(/library/images/menuBG.png) no-repeat;
color:#FFFFFF;
padding-left:40px;
display:block;
height: 50px;
}
#menu li {
float:left;
list-style:none;
}
#menu a {
float: left;
width: 120px;
height: 50px;
background-position: -150px -150px;
background-repeat: no-repeat;
}
#menu a:hover {
background-position:0 0;
}
#menu li.menu1 {background-image: url(/library/images/menu/menu_button_home_up.png);}
#menu li.menu2 {background-image: url(/library/images/menu/menu_button_portfolio_up.png);}
#menu li.menu3 {background-image: url(/library/images/menu/menu_button_services_up.png);}
#menu li.menu4 {background-image: url(/library/images/menu/menu_button_info_up.png);}
#menu li.menu5 {background-image: url(/library/images/menu/menu_button_contact_up.png);}
#menu a#menu1 {background-image: url(/library/images/menu/menu_button_home_down.png);}
#menu a#menu2 {background-image: url(/library/images/menu/menu_button_portfolio_down.png);}
#menu a#menu3 {background-image: url(/library/images/menu/menu_button_services_down.png);}
#menu a#menu4 {background-image: url(/library/images/menu/menu_button_info_down.png);}
#menu a#menu5 {background-image: url(/library/images/menu/menu_button_contact_down.png);}
Lo and behold, there now appears a top heading above a menu when you look at it.

Continued next post.

[Centauri]

Next comes the #content div. Remembering that no width needs to be set as it will expand naturally, all it needs is the background and padding : #content {
background:transparent url(/library/images/mainContentBG.png) repeat-y;
color:#6878A9;
padding:15px 40px 10px;
}
Now you will see the content contained within the sides when you look at the page at this stage.

Next, the #home_textholder div. As this is required to be on the left, just float it there - no absolute positioning required. Again, as #home_imgContainer is required on the right, just float it there wthout any absolute positioning : /*Home Page Specific*/
#home_textholder {
width:350px;
float: left;
}

#home_imgContainer {
width:230px;
float: right;
height: 240px;
}

.home_imgPlace {
width:100px;
height:100px;
margin:5px;
border:#999999 solid 1px;
float: left;
}
If you look at the page now, you will see the welcome text and pictures are in the right place, but the news text is wrapped up in there with them. This is due to floats being taken out ofthe document flow, and following text will try to wrap around them. The floats need to be cleared, and we can do that by adding another class to the next element, the "latest News" paragraph : <p class='para1 divider'>Latest News:</p>
This new "divider" class can have its clear property set so that the element will always go below any floats before it. For good measure (and the reason I gave this class that name), a top border and padding can give a section dividing line : .divider {
clear: both;
border-top: 1px solid #666666;
padding-top: 10px;
margin-top: 0;
}
The #newssummary <dl> can then be positioned using auto side margins for centering - again, no absolute positioning is required. When sizing for the background, the padding needs to be taken into account as well. I also played around with the <dt> and <dd> floating them and setting a line height, based on what it looked like you were trying to do with table cell styling : #newssummary {
color:#FFFFFF;
width:530px;
height:180px;
text-align:left;
overflow:hidden;
background:url(/library/images/newsBG.png) no-repeat left top;
margin: 0 auto;
padding: 10px;
}

#newssummary dt {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
padding-left:20px;
float: left;
clear: left;
line-height: 1.7em;
width: 400px;
}

#newssummary dd {
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:100px;
float: left;
line-height: 1.7em;
}
The footer styles virtually remain as you had them, except the footer paragraph needs to be floated left so that the right-floated image links will align on the same line : #footer {
background:transparent url(/library/images/footer.png) no-repeat;
height:50px;
padding:0 50px;
}
#footer p {
float: left;
}
#footer img {
float:right;
margin: 2px 2px 2px 2px;
}

If you look at this now, it is complete, and works cross browser, including IE7 and IE6 (except for the png image thing in IE6). This means that the ONLY thing required in the IE css files is the settings for background-image, NOTHING ELSE.

Happy coding :)

[blue-eye-labs]

Thank you so much! You have no idea how immensely helpful you have been (maybe you do, actually, on second thoughts). That was the best bit of help I've ever been given I think.
Again, many thanks.
:D

[blue-eye-labs]

If you click on an image, it takes you to a image viewing page, and that page doesn't seem to work properly. It seems like something has been taken out of the flow, but it validates, so it isn't badly done tags or something... I've looked at it but I can't see what it is.

[blue-eye-labs]

never mind, I fixed it by adding an empty <div> with the "divider" class. That put everything back into perspective.
Anyway, thanks again for all your help.