CSS Margin Problem.

slipd

slipd

slipd

Soldato
Joined
26 Feb 2004
Posts
4,800
Location
Hampshire, England.
Hey guys,

I’ve got this stupid little problem on…

Basically, I’ve made a template and got it all working in the main browsers, but now I’ve started testing it in lower resolution – 800*600 in particular and that’s where I’ve noticed the problem :(

untitledul5.png


I want the main content to be central when possible (In 1280*1024 etc) and automatically scaled down, to the left (Like it is on the right), when viewed in the lower resolutions.

Can someone check out my .css and see where I’m going wrong – it’s got to be a simple margin value hasn’t it? I really want someone else giving it the once over :)

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

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

Cheers,

SW.
 
i can tell you exactly whats wrnog. You have put margin-left so no matter what size the browser page is you will always have that margin.

Nothing is being scaled down as you can still scroll right and left so its still full size.

To center the page make a wrapper if you haven't got one that contains everything.

have margin: 0 auto;

This will "auto"maticlally put the same margin left and right so it centers it no matter what screen size.

hope this helped
 
addy_010 said:
i can tell you exactly whats wrnog. You have put margin-left so no matter what size the browser page is you will always have that margin.

Nothing is being scaled down as you can still scroll right and left so its still full size.

To center the page make a wrapper if you haven't got one that contains everything.

have margin: 0 auto;

This will "auto"maticlally put the same margin left and right so it centers it no matter what screen size.

hope this helped
Click to expand...
Thanks mate, my wrapper is the 'container' div.

So by setting that to: margin: 0 auto; - should fix the problem then?

What if I've got a top margin set, which i think I have actually :rolleyes:

Wouldn't that cause me a problem :(

I'll give it a go now!

Cheers,

SW.
 
No, that didn't work :(

I set margin-left/right to auto and that brought the container hard-left. I think I've done that before...

How should I get it back to the center then :p

SW.
 
just q quick edit to fix it, let me know any other problems. I tried adding quick comments so you see what i changed and why etc

Code: 
<!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" />
<link rel="shortcut icon" href="images/flag.ico" >
</head>
<body>

<div id="top" class="top" align="center"><img src="images/banner_1.jpg" alt="site_banner"/></div> <! -- put this at the top of the html so it at the top of the page, though its not in the container div so its 100%, can be put in containter -- >
<div id="bottom" class="bottom" align="center">
</div>

<div id="container">

<div id="side_menu" align="center">menu here</div>
<div id="side_menu_1" align="center">menu_1 here</div>

<div id="browser" align="center" class="browser">This site is best used with either:<br /><br />
<a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=0&amp;t=209" onfocus="this.blur()"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1.png"/></a>
<a href="http://my.opera.com/USERNAME/affiliate/" onfocus="this.blur()"><img border="0" src="http://promote.opera.com/buttons/official/88x31/gif/88x31opera9redgif.gif" width="88" height="31" alt="Innovation delivered" /></a><br />
Using a 800x600 resolution<br />or higher.
</div>

<div id="w3c_validator" class="w3c_validator" align="center">These pages are:<br /><br />
<a href="http://validator.w3.org/check?uri=referer" onfocus="this.blur()">
		<img style="border:0;width:82px;height:25px" 
		src="http://www.w3.org/Icons/valid-xhtml10"
		alt="Valid XHTML 1.0 Strict" /></a>

<a href="http://jigsaw.w3.org/css-validator/" onfocus="this.blur()">
	   <img style="border:0;width:82px;height:25px"
	   src="http://jigsaw.w3.org/css-validator/images/vcss" 
	   alt="Valid CSS!" /></a>

</div>

<div id="rss" align="center" class="rss">Rss</div>


<div id="main_content"></div>

</div>



</body>
</html>

only put the part of the css i changed in
Code: 
#container {
height: 100%;
width: 800px; /* changed this to a size so that the page is centere, without a size the page wont have anything to center if that make sense */
margin: 0 auto; /* removed margintop/left/right and replaced with this to auto set margin to same left and right, and then 0 at top and bottom */
border-style: dotted;
border-color: #999999;
}

#top {
width: 100%;
height: 90px;
background: #000000;
border: 1px solid #000000; /* changed this to all border decleration in one line */
}
 
Thanks for your help mate ;)

I think I’m nearly there! It resizes up a treat in lower resolutions.

I just need to make a few tiny adjustments…

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

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

It views great in Opera and Firefox, but there is still a major problem with IE7…

The links dive seems to be offset for some reaso :(

Any ideas, it’s got to be something simple hasn’t it?

Cheers,

SW.
 
i started fixing it but quickly realised that the problem is more then just a few seconds change.

Bascialluy your problem is that you positioning everything with margins, where as if something is after something in the html it should then just display after it (if that makes sense). FF and IE have differnt margins, i dont know how much more each is but IE seems to be about doulbe the amount then FF, so if in FF you have margin-left: 10px; IE will be 20px

Im going to attemp to right this in an easy to understand whay but i doubt it will be easy as im not a teacher.

Bascially you have a leftbar, middlebar and rightbar

The leftbar then contains thing like the the menu and links boxes. The middlebar contains things like the content box, and the rightbar contains the RSS and broswer etc boxes.

So first thing you would do is create a wrapper div for each bar that defines the size and positon of anything that is inside it, so for the leftbar you would have something like float:left; width: 100px height: 100%;

For instance look at this image. Imagine that the black is invisble, but that is what everything that you want on the left/middle/right will go in.

for the leftbar you would then put any div inside of that div that you want on the left and is smaller then the size of the leftbar. So you put the menu box and links box in the leftbar div but rather then putting a huge margin-top/left on each, remove it and have the width of each the same as the leftbar, in this case say 100px

Now as the width if the menu is 100px nothing will then fit to the right of it that is inside of the leftbar wrapper so therefore has to wrap round and go underneath it. this is where you would add margins as if want a small gap in between the menu and links boxs, put margin-top: 10px on the links div to make a gap.

then do the same for middle and rightbar

Hope this was easy enough to understand
 
Wow - thanks for that mate ;)

I'll give that a go!

One question tho, I'd still have the container div wouldn't I? That would be what the left/middle/right bars would be placed into, in that order?

As in:

<div id="container">
<div id="left">-----</div>
<div id="middle">-----</div>
<div id="right">-----</div>
</div>

Am I on the right lines before I start :p

Cheers,

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