Margin - Auto (Centering issue)

danrevah · October 20, 2011, 12:26am

At this moment the page is looking like that:

and i want it to look like that:

i am trying to align the “round” div a little bit to the left so it will look at the same place
doesn’t matter if you change the size of the browser (since margin is set to auto i didnt understand how to do that…)

how can i do that?
CSS File:


body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; margin: auto; }
.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 441px; height: 285px; margin: auto; }
.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; }

Html File:

<div class="top"></div>
	<div class="round"></div>
	<div class="bottom"></div>

danrevah · October 20, 2011, 12:34am

hmm i used a “wrapper” div to do it… but is it the right way?

this what i do (red is the changes)


[COLOR="#FF0000"].wrapper { margin: auto; width: 1024px; }[/COLOR]
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; margin: auto; }
.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 441px; height: 285px;  [COLOR="#FF0000"]margin: auto 50px; [/COLOR]}
.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; }

Html:


[COLOR="#FF0000"]<div class="wrapper">[/COLOR]
	<div class="top"></div>
	<div class="round"></div>
	<div class="bottom"></div>
[COLOR="#FF0000"]</div>[/COLOR]

danrevah · October 20, 2011, 2:02am

I’ve got 2 problems in my code

look at the following picture:

as you can see the “round” div has some space between the menu how can i avoid that from happaning?

the “margin: auto” on the “wrapper” div is working fine on chrome but not on IE
how can i fix that?

CSS Code:


* {
  margin: 0;
  padding: 0;
}
body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.wrapper {  width: 1024px; margin: auto; }
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; }
.logo { background-image: url("../images/logo.png"); background-repeat:no-repeat; width: 228px; height: 58px; margin: 25px 50px; float: left; }
.info_top_right { width:145px; height:60px; float: right; margin: 25px 25px; }
.info_top_right_links { color: #e20448; font-size: 14px; margin: auto; }
.info_top_right_call { color: #fff; font-size: 14px; font-weight:bold; }

.menu { background-image: url("../images/menu.png"); background-repeat:no-repeat; width: 172px; height: 311px; margin: 0 50px; overflow: auto; float: left; }
.menu_button_first { font-size: 15px; color: #fff;  text-align:center; margin-top: 137px; }
.menu_buttons { font-size: 15px; color: #fff; text-align:center; margin-top: 9px; }


.right_image { background-image: url("../images/right_image.png"); background-repeat: no-repeat; width: 638px; height: 366px; float: right; margin: 25px 25px 0 0; }

.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 452px; height: 227px;  margin: auto 55px; clear: both; float: left;}
.wrapper_photo { float: right; margin: 20px 40px 0 0; }
.first_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; }
.rest_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; margin: 0 15px 0 0; }

.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; clear: both;}

Html Code:

<html>
<head>
	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="top">
		<div class="logo"></div> 
		<div class="info_top_right">
			<div class="info_top_right_links"> about us | contact us </div>
			<div class="info_top_right_call"> Call free: 087 000 234 </div>
		</div>
	</div>

	<div class="menu">
		<div class="menu_button_first">home</div>
		<div class="menu_buttons">about</div>
		<div class="menu_buttons">protofolio</div>
		<div class="menu_buttons">customers</div>
		<div class="menu_buttons">contact us</div>
	</div>
	<div class="right_image"></div>
	
	<div class="round"></div>
	<div class="wrapper_photo">
		<div class="first_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
	</div>
	
	<div class="bottom"></div>
</div>
</body>
</html>

danrevah · October 20, 2011, 4:22am

I managed to fix the 2 question by adding
to the html
strict tag to the top


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

and on the CSS wrapper div ive added
text-align: center;
and changed margin: auto; to margin: 0 auto;

still looking for an answer to the first question !

PaulOB · October 20, 2011, 10:36am

You’d have to wrap your menu and right image in a div and then apply repeating (repeat-y) background image(149px x 10px) to the div that matches the black behind the menu and will continue as the page gets stretched and always meet your round element. You’ll just need to set the horizontal start of the image to match the correct position

PaulOB · October 20, 2011, 10:40am

Threads merged as they seemed to be the same issue more or less

danrevah · October 20, 2011, 2:43pm

Thank you now its working great…
the new code:

CSS:


* {
  margin: 0;
  padding: 0;
}
body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.wrapper {  width: 1024px; margin: auto; }
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; }
.logo { background-image: url("../images/logo.png"); background-repeat:no-repeat; width: 228px; height: 58px; margin: 25px 50px; float: left; }
.info_top_right { width:145px; height:60px; float: right; margin: 25px 25px; }
.info_top_right_links { color: #e20448; font-size: 14px; margin: auto; }
.info_top_right_call { color: #fff; font-size: 14px; font-weight:bold; }

[COLOR="#FF0000"][B].wrap { width: 100%; min-height: 80px; height: 80px; }[/B][/COLOR]
.menu { background-image: url("../images/menu.png"); background-repeat:no-repeat; width: 172px; height: 311px; margin: 0 50px; overflow: auto; float: left; }
.menu_button_first { font-size: 15px; color: #fff;  text-align:center; margin-top: 137px; }
.menu_buttons { font-size: 15px; color: #fff; text-align:center; margin-top: 9px; }

[COLOR="#FF0000"][B].menuline { background-image: url("../images/menuline.png"); background-repeat: repeat; width: 150px; height: 100%; margin: 0 61px; float: left;  }[/B][/COLOR]

.right_image { background-image: url("../images/right_image.png"); background-repeat: no-repeat; width: 638px; height: 366px; float: right; margin: 25px 25px 0 0; }

.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 452px; height: 227px;  margin: auto 55px; clear: both; float: left;}
.wrapper_photo { float: right; margin: 20px 40px 0 0; }
.first_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; }
.rest_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; margin: 0 15px 0 0; }

.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; clear: both;}

html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="top">
		<div class="logo"></div> 
		<div class="info_top_right">
			<div class="info_top_right_links"> about us | contact us </div>
			<div class="info_top_right_call"> Call free: 087 000 234 </div>
		</div>
	</div>
	
	[COLOR="#FF0000"][B]<div class="wrap">[/B][/COLOR]
		<div class="menu">
			<div class="menu_button_first">home</div>
			<div class="menu_buttons">about</div>
			<div class="menu_buttons">protofolio</div>
			<div class="menu_buttons">customers</div>
			<div class="menu_buttons">contact us</div>
		</div>
		<div class="right_image"></div>
		
		[COLOR="#FF0000"][B]<div class="menuline"></div>
	</div>[/B][/COLOR]
	
	<div class="round"></div>
	
	<div class="wrapper_photo">
		<div class="first_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
	</div>
	
	<div class="bottom"></div>
</div>
</body>
</html>