Another Easy CSS Problem.

slipd · 17 Mar 2007 at 20:27

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 · 17 Mar 2007 at 21:00

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 · 18 Mar 2007 at 00:09

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

Use this:

Code:

#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 · 18 Mar 2007 at 00:10

addy_010 said:
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 · 18 Mar 2007 at 19:28

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 · 26 Mar 2007 at 00:07

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 · 26 Mar 2007 at 00:32

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

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

SW.

slipd · 26 Mar 2007 at 00:38

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

SW.

slipd · 26 Mar 2007 at 00:52

marc2003 said:

change the width of your #main_content to auto.

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

Code:

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

instead of

Code:

#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 · 26 Mar 2007 at 00:54

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

Css can be so frustrating sometimes :mad:

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

SW.

slipd · 26 Mar 2007 at 01:22

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.