PDA

View Full Version : CSS issue?


afield69
04-13-2009, 02:42 PM
Hello there,


I've come across a bit of an issue when putting together a custom template, I "believe" it's a straight forward fix. Basically I've just purchased a 22" monitor, I opened up my template and maximized the view. I noticed the two main columns that will contain content seem to be attached to the left and right side of the browser, not centered at all.
I never noticed this before when using my old 17" monitor, everything seemed centered and looked perfect. As far as I'm aware I centered everything when originally creating the template - did I miss something?



I've took a quick screenshot to show you exactly what is happening.


http://img23.imageshack.us/img23/1425/cssissue.jpg

Also, my code is below. I'm very new to this, thank you for your time.


@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #FFFFFF;
width: 100%;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: absolute;
margin-top: 0;
margin-bottom: 0;
}
#wrapper #logo {
height: 155px;
width: 520px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #Navigation {
height: 60px;
width: 100%;
background-image: url(../images/Nav.jpg);
background-repeat: repeat-x;
top: -50px;
margin-top: 32px;
padding: 0px;
float: left;
overflow: visible;
}
#wrapper #Navigation #Nav {
background-image: url(../images/navbar1_03.jpg);
height: 36px;
width: 1213px;
top: 1px;
padding: 0px;
float: none;

right;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
clip: rect(auto,auto,auto,auto);
overflow: visible;
}
#wrapper #maincontent {
background-image: url(../images/quick_03.jpg);
height: 1122px;
width: 908px;
float: right;
background-repeat: no-repeat;
top: 301px;
right: 25px;
overflow: visible;
clear: none;
position: absolute;
visibility: visible;
left: auto;
bottom: auto;
min-width: 1000px;
max-width: 1500px;
min-height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
}
#wrapper #maincontent #securitybutton {
background-image: none;
float: right;
height: 32px;
width: 174px;
position: absolute;
top: 10px;
left: 720px;
}

#wrapper #contentbox {
background-image: url(../images/Sliced-Advoe-Mockup_26.jpg);
float: left;
height: 155px;
width: 254px;
position: relative;
overflow: visible;
right: 219px;
top: 350px;
}
#wrapper #contentbox #button1 {
background-image: url(../images/button1_03.jpg);
float: left;
height: 21px;
width: 23px;
position: absolute;
left: 15px;
top: 20px;
}

#wrapper #contentbox2 {
background-image: url(../images/contentbox2_03.jpg);
float: left;
height: 368px;
width: 255px;
position: relative;
right: 474px;
top: 520px;
}
#wrapper #contentbox2 #button2 {
float: left;
height: 21px;
width: 23px;
position: absolute;
left: 15px;
top: 20px;
background-image: url(../images/button2.jpg);
}

#wrapper #contentbox3 {
background-image: url(../images/contentbox3_03.jpg);
float: left;
height: 256px;
width: 258px;
position: relative;
right: 730px;
top: 911px;
}

#wrapper #login {
background-image: url(../images/Sliced-Advoe-Mockup_09.jpg);
height: 290px;
width: 254px;
float: left;
margin-top: 0px;
position: relative;
left: 35px;
clip: rect(auto,auto,auto,auto);
top: 43px;

}
#wrapper #login #button3 {
background-image: url(../images/button3_03.jpg);
float: left;
height: 20px;
width: 24px;
position: absolute;
left: 15px;
top: 20px;
}
#wrapper #login #helpbutton {
background-image: url(../images/helpbutton_03.jpg);
float: left;
height: 22px;
width: 24px;
position: absolute;
left: 15px;
top: 238px;
}

#wrapper #copyright {
position: absolute;
background-image: url(../images/copyright_03.jpg);
height: 56px;
width: 1184px;
right: 32px;
top: 1440px;
float: left;
margin-right: 200px;

}
#wrapper #footer {
background-image: url(../images/Sliced-Advoe-Mockup_49.jpg);
background-repeat: repeat-x;
height: 57px;
width: 100%;
position: absolute;
top: 1505px;
clear: both;
float: left;
}
#wrapper #maincontent #adsubmitbutton {
background-image: none;
float: left;
height: 263px;
width: 194px;
position: absolute;
left: 35px;
top: 50px;
}
#wrapper #maincontent #searchbutton {
background-image: none;
float: left;
height: 263px;
width: 194px;
position: absolute;
left: 250px;
top: 50px;
}
#wrapper #maincontent #requestbutton {
float: right;
height: 263px;
width: 194px;
position: absolute;
background-image: none;
left: 463px;
top: 50px;
}
#wrapper #maincontent #classifiedsbutton {
float: right;
background-image: none;
height: 263px;
width: 194px;
position: absolute;
left: 677px;
top: 50px;
}
#wrapper #maincontent #contentbox4 {
background-image: url(../images/contentboxos_06.jpg);
float: left;
height: 389px;
width: 407px;
position: absolute;
top: 330px;
left: 35px;
}
#wrapper #maincontent #contentbox5 {
background-image: url(../images/contentboxos_03.jpg);
float: right;
height: 638px;
width: 416px;
position: absolute;
left: 455px;
top: 330px;
}
#wrapper #maincontent #contentbox4 #button4 {
background-image: url(../images/button4.jpg);
float: left;
height: 20px;
width: 24px;
position: absolute;
left: 15px;
top: 20px;
}
</style>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="../images2/images/logo_03.jpg" width="520" height="155" /></div>
<div id="Navigation">
<div id="Nav"></div>
<div></div>
</div>
<div id="login">
<div id="helpbutton"></div>
<div id="button3"></div>
</div>
<div id="contentbox">
<div id="button1"></div>
</div>
<div id="contentbox2">
<div id="button2"></div>
</div>
<div id="contentbox3"></div>
<div id="maincontent">
<div id="securitybutton"><img src="../images2/images/security&amp;safety_03.png" width="174" height="32" /></div>
<div id="adsubmitbutton"><img src="../images2/images/Advoe-mockup_03.png" width="194" height="263" /></div>
<div id="searchbutton"><img src="../images2/images/Advoe-mockup_05.jpg" width="194" height="263" /></div>
<div id="requestbutton"><img src="../images2/images/Advoe-mockup_07.jpg" width="194" height="263" /></div>
<div id="classifiedsbutton"><img src="../images2/images/Advoe-mockup_09.jpg" width="194" height="263" /></div>
<div id="contentbox4">
<div id="button4"></div>
</div>
<div id="contentbox5"></div>
</div>
<div id="copyright"></div>
<div id="footer"></div>
</div>
</body>
</html>

domedia
04-13-2009, 04:49 PM
Set an absolute width on your wrapper. It's set to 100%, which means it's going to stretch for the full available width.

afield69
04-13-2009, 06:44 PM
Thankyou for your reply!

What exactly do you mean by "set an absolute width"?

domedia
04-13-2009, 07:37 PM
Set a width in pixels for example.

Rob_Che
04-13-2009, 10:03 PM
Thankyou for your reply!

What exactly do you mean by "set an absolute width"?

Set it to an a pixel width - 780 for example (to accomodate all monitors) and set margin-right: auto and margin-left: auto... this will center your content and maintain the width (there's a tutorial on the site ;))

You can also go about setting a min-width and max-width too... I'll let you google those.

Rob

Edit: missed your post there DoMedia...