Another Easy CSS Problem.

slipd

slipd

slipd

Soldato
Joined
26 Feb 2004
Posts
4,800
Location
Hampshire, England.
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.

67309211up8.png


And when its re-sized...

90079422up8.png


Cheers,

SW.
 
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.
 
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.
 
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;
}
 
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;
}
Click to expand...
Thanks mate - I tried copying that straight over and I still get the same problem :(

SW.
 
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?
Click to expand...
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.
 
sam.wheale said:
Thanks mate - I tried copying that straight over and I still get the same problem :(

SW.
Click to expand...
Works for me:

cssdw.jpg


cssdws.jpg


Of course #side_menu is still over hanging but that can be altered by changing the margins in #main_content to 250px.
 
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.
 
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.
 
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.
 
Thanks mate, that certainly does work, but won't the 'auto' width cause me problems when I start adding content :(

SW.
 
sam.wheale said:
Thanks mate, that certainly does work, but won't the 'auto' width cause me problems when I start adding content :(

SW.
Click to expand...
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)
 
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;
}
 
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;
}
Click to expand...
Thanks for the tip mate ;)

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

newprobjg1.png


Css can be so frustrating sometimes :mad:

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

SW.
 
Fair point :p

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

virginnz9.png


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

SW.
 
You must log in or register to reply here.
Back
Top Bottom