Another Easy CSS Problem.

[slipd]

Hey guys,

Can someone tell me the css attribute to sort one of my pages out

Basically, I want the page contents to downsize and not overlap?

As per my pics.

And when its re-sized...

Cheers,

SW.

 

[slipd]

Thanks for the reply mate -

Here's my .css, where would I employ the max-width attribute?

body {
background-color: #999999;
padding: 0px;
margin: 0px;
}

#top {
position: fixed; top: 0;
width: 100%;
height: 90px;
background-color: #000000;
padding: 0px;
border-bottom-color: #000000;

}

#bottom {
position: fixed; bottom: 0;
width: 100%;
height: 30px;
background-color: #FF0000;
padding: 0px;
border-color: #FF0000;
border-top-style: groove;

}

#side_menu {
position: fixed; left: 25px;
width: 200px;
height: 300px;
background-color: #000099;
margin-top: 110px;
}

#side_menu_1 {
position: fixed; left: 25px;
width: 200px;
height: 300px;
background-color: #000099;
margin-top: 435px;

}

#main_content {
margin-left: auto;
margin-right: auto;
width: 60%;
height: 1000px;
border: solid 4px;
background-color: #FFFFFF;


}

Cheers,

SW.

 

[slipd]

It's the margin and width in #main_content that's the problem.

Use this:

#main_content {
margin-left: 200px;
margin-right: 200px;
height: 1000px;
border: solid 4px;
background-color: #FFFFFF;
}

Thanks mate - I tried copying that straight over and I still get the same problem

SW.

 

[slipd]

im pretty sure its to do with the position:fixed thing, plus having the main content at 60%,

can u post the htmlas well so i can test my theorys out for u?

As per:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home :: </title>
<link href="mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"></div>
<div id="side_menu"></div>
<div id="side_menu_1"></div>
<div id="main_content" align="center"></div>
<div id="bottom"></div>
</body>
</html>

Thanks.

SW.

 

[slipd]

Does the browser down-size itself though, do you get the scroll-bars, (bottom and right) that's sort of what I'm after

Without the overlap of page content...

I'll give your suggestion another go

SW.

 

[slipd]

Can anyone help with the same problem - but this time on the right

Please view it in Firefox, it's completely messed up in IE and Opera... Could anyone help me with that too

http://www.wightgame.co.uk/example/

And: http://wightgame.co.uk/example/mycss.css

Cheers,

SW.

 

[slipd]

It's even more annoying knowing that I sorted the problem out with the left side

I just can't work out what I need to apply to the divs on the right?

SW.

 

[slipd]

Thanks mate, that certainly does work, but won't the 'auto' width cause me problems when I start adding content

SW.

 

[slipd]

change the width of your #main_content to auto.

also lose the duplication by using commas.....

#bottom a:link, #bottom a:visited, #bottom a:active  {
    color: #FFFFFF;
    text-decoration: none;
    border: none;	
}

instead of

#bottom a:link {
    color: #FFFFFF;
	text-decoration: none;
	border: none;	
}

#bottom a:visited {
    color: #FFFFFF;
	text-decoration: none;
	border: none;
}
 
#bottom a:active {
	color: #FFFFFF;
	text-decoration: none;
	border: none;
}

Thanks for the tip mate

SW.

 

[slipd]

Grr! I’m still getting the same problem, just further across the page?

Css can be so frustrating sometimes

Isn’t there any kind of content scalability code for this kind of situation

SW.

 

[slipd]

Fair point

But how do sites like, Virgin media for example, manage to do it

No matter how much you downsize the page, it is still scrollable and therefore usable

SW.