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.

 

[Freakish_05]

I'm pretty new to CSS myself, but the max-width property should sort your problem.
However I.E. has trouble with this property if memory serves. I might be wrong. If I am I'm sure one of the CSS guru's will correct me.

 

[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.

 

[Freakish_05]

You need to put one in Side_Menu and one in Side_Menu_1

 

[unwashed potato!]

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?

 

[Vulcan]

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;
}

 

[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.

 

[Vulcan]

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

SW.

Works for me:

Of course #side_menu is still over hanging but that can be altered by changing the margins in #main_content to 250px.

 

[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.

 

[xiphrex]

Not sure whats going on with that page but to fix that problem I think the problem is that you have width: 800px; in the #main_content of the css.

Try taking that out or putting width: auto;. You might have to change the margin-right parameter to get it to look good.

 

[slipd]

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

SW.

 

[xiphrex]

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

SW.

No it shouldnt as youve set the margins on the left and right, it will wrap content that is wrapable (not really long url's or a really really long word)

 

[marc2003]

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;
}

 

[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.

 

[marc2003]

i don't see the problem. no one expects a page to render correctly when the browser has been resized that narrow.

 

[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.