Page gets all smushed on lower resolution?

[CrazeD]

www.pr0n.bioxion.com/index.php

 

Sooo...

 

My site works fine on 1280x1024 but on 1024x768 or lower it smushes the page. The left and right blocks get smushed behind the center block.

 

Here is my CSS:

 

body {
background: #4d4d4d;
}

.banner {
position: absolute;
top:20px;
left:50px;
right:50px;
}


.left {
position: absolute;
left:113px;	
top:190px;
text-align: center;

}

.right {
position: absolute;
right:113px;	
top:190px;

}

.center {
position: absolute;
left:260px;
right:260px;
top:190px;

}

.footer {
position: absolute;
bottom: 20px;

}

a {text-decoration: none}
a:link     { color:#d0a700 }
a:visited  { color:#d0a700 }
a:active   { color:#d0a700 }
a:hover    { color:#767676 }

 

Is there a way I can retain the way the site is laid out, but make it so it doesn't get smushed on smaller resolutions?

 

Thanks.

[ToonMariner]

yes - design for 800x600 from the off...

 

You site gets 'smushed' in ie at any resolution. give your page a %width and the panels on the left and right a fixed width just let the central panel fill the void and make sure none of its content (like images) exceed the minimum width.

[CrazeD]

Soo....how do I do that?  ???

[legohead6]

use percents instead of pixels

[aebstract]

None of which seem to be correct answers. Where you are going wrong is setting some of your elements to be positioned absolutely from the right. This is causing them to move when the window is smaller, since they will always be a certain distance from that side. It seems you want your page to be centered, so what you need to now do is:

 

Start over on your main blocks. You don't have to redo everything inside of them. What you want is a main div that holds all of them. Center that div using the following:

 

html {
height: 100%;
}

body {
        text-align: center;
}

#container {
text-align: left;
margin-left: auto;
margin-right: auto;
}

 

Not sure if html height is necesarry but I always use it, so why not? Now you're going to have to change how your main divs are positioned. Make them relative, all inside the container div and you will probably want to float each one to the left, float: left;

 

See if you can get this working and best of luck.

[CrazeD]

So then... something like this?

 

<div class="container">

<div class="left">
blah blah
</div>

<div class="center">
blah blah
</div>

<div class="right">
blah blah
</div>

</div>

 

Like that?

[CrazeD]

Um...

 

www.pr0n.bioxion.com/index.php

 

Don't think that worked either?

 

html {
height: 100%;
}

body {
        text-align: center;
	background: #4d4d4d;
}



.banner {
position: relative;
top:20px;
left:50px;
right:50px;
float: left
}

.container {
text-align: left;
margin-left: auto;
margin-right: auto;
}


.left {
position: relative;
left:113px;	
top:190px;
text-align: center;
float: left

}

.right {
position: relative;
right:113px;	
top:190px;
float: left

}

.center {
position: relative;
left:260px;
right:260px;
top:190px;
float: left

}

.footer {
position: relative;
bottom: 20px;

}

a {text-decoration: none}
a:link     { color:#d0a700 }
a:visited  { color:#d0a700 }
a:active   { color:#d0a700 }
a:hover    { color:#767676 }

 

The rest is like this:

<div class="container">

<div class="header">
header stuff
</div>

<div class="left">
left stuff
</div>

<div class="right">
right stuff
</div>

<div class="center">
center stuff
</div>

</div>

 

What's wrong?

[aebstract]

 

 

html {
height: 100%;
}

body {
        text-align: center;
	background: #4d4d4d;
}



.banner {
position: relative;
top:20px;
left:50px;
right:50px;
float: left
}

.container {
text-align: left;
margin-left: auto;
margin-right: auto;
}


.left {
position: relative;
text-align: center;
float: left

}

.center {
position: relative;
float: left
}


.right {
position: relative;
float: left
}



.footer {
position: relative;
bottom: 20px;

}

a {text-decoration: none}
a:link     { color:#d0a700 }
a:visited  { color:#d0a700 }
a:active   { color:#d0a700 }
a:hover    { color:#767676 }

 

 

 

<div class="container">

<div class="header">
header stuff
</div>

<div class="left">
left stuff
</div>

<div class="center">
center stuff
</div>

<div class="right">
right stuff
</div>

</div>

 

 

 

Set the width you want your left, center and right divs. ( width: 000px; ) Also set the width of your header to the full width of the container ( everything ) and set your container's width to whatever you want it all to end up being. See how that works out.

[CrazeD]

MM, that almost works.

 

Now when I make the page smaller, it makes the blocks drop down.

 

Also, it's not centered.

 

I appreciate the help dude.

[legohead6]

i am having the same trouble... its frustrating..., my left and rights are going behind the center, i think its probably because of my flash banner... if i get it to work ill let you know..

[CrazeD]

Anyone? I'd really like to get this fixed.

[CrazeD]

Anyone?

 

......

[dbrimlow]

Until you use a proper DOCTYPE your page will always be unstable.

 

Add this before the <HTML> tag of your page before you even START trying to debug your CSS:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

 

You are using tables instead of letting the CSS layout your page.

 

There is no point in having a layout divs (container, left, right, etc) if you do not designate widths. Period.

 

Use either % or px.

 

Ex:

 

#container {

width: 100%

}

 

#left {

width:20%

}

 

 

#right {

width:79%

}

 

You need to get a good book on CSS and learn the basics before you start using them.

 

You have a good eye for design, proper css and you will shine.