...

View Full Version : centering a layout in 1200px resolution??



ksanjanadevi
02-20-2009, 07:39 AM
I have problem in centering my layout in higher resolutions.

I gave
body{color:#333; background:#fff; font-family:Verdana,Arial,Helvetica,sans-serif;
margin:0px auto auto 0px; font-size:11px; line-height:normal; width:99%; border:0px solid blue; width:1000px}
but it dint get centered. I replaced
margin:auto; in place of margin: 0px auto auto 0px; It got centered but the top menu image got repeated. It seems like the menu has taken padding-left and its repeating more than needed..

below image shows problem when given
margin:auto
7163

below image shows when not given
margin:0px auto auto 0px;
7164

Below is the code for menu


#block-nice_menus-1 {
padding-left:0px;margin-left:0px;
}
.block-nice_menus {
line-height: normal;
padding:0px;
background:url(topBG.jpg) ; /* top right; */
height:85px;
width:auto;
margin:0px;
/*max-width:97.9%;
max-width:98.2%; */
}



below is the code where top-tight closing image is placed..


#topnav_C { display:inline; float:left; position:absolute; top:0px; left:983px; width:17px; height:90px;content; background:url(images/topRIGHT.png) no-repeat;}

oesxyl
02-20-2009, 08:19 AM
I have problem in centering my layout in higher resolutions.

I gave
body{color:#333; background:#fff; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:11px; line-height:normal; width:99%; border:0px solid blue; width:1000px}
but it dint get centered. I replaced
margin:auto; in place of margin: 0px auto auto 0px; It got centered but the top menu image got repeated. It seems like the menu has taken padding-left and its repeating more than needed..

below image shows problem when given
7163

below image shows when not given
7164

Below is the code for menu


#block-nice_menus-1 {
padding-left:0px;margin-left:0px;
}
.block-nice_menus {
line-height: normal;
padding:0px;
background:url(topBG.jpg) ; /* top right; */
height:85px;
width:auto;
margin:0px;
/*max-width:97.9%;
max-width:98.2%; */
}



below is the code where top-tight closing image is placed..


#topnav_C { display:inline; float:left; position:absolute; top:0px; left:983px; width:17px; height:90px;content; background:url(images/topRIGHT.png) no-repeat;}


you must have a width smaller then window width and not auto, position: relative and margin 0 auto.

best regards

abduraooft
02-20-2009, 09:27 AM
margin:0px auto auto 0px; is equivalent to

margin-top:0;
margin-right:auto;
margin-bottom:auto;
margin-left:0 But you need to give auto values for your left and right margins, like

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto (The short hand operates in clockwise direction)
Or in short

margin:0 auto 0 auto; Or even short like

margin:0 auto;

And as said above, you need to specify a smaller width to your element than it's container, to see the center in action.

Excavator
02-20-2009, 09:28 AM
Hello ksanjanadevi,
When you use the shorthand for margin or padding it goes in a clockwise order like this: margin: top,right,bottom,left;

Your margin:0px auto auto 0px; reads like this:

margin-top:0;
margin-right:auto;
margin-bottom:auto;
margin-left:0;


The very basics of centering is

DocType
width
margin:auto;


Like this example where you see the div #wrap is centered:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #FC6;
}
#wrap {
width: 800px;
height: 600px;
margin: 30px auto;
background: #999;
}
</style>
</head>
<body>
<div id="wrap">
<!--end wrap--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum