[ Layout ] Help

[RoMeO]

Hello,

Am coding my own CMS, and having problems with the layout...

with a normal screen, it looks perfect:

http://img299.imageshack.us/img299/5926 ... d85ym7.png

but, if a wide screen is used, it looks defaced, all the images are not in place.

http://img299.imageshack.us/my.php?imag ... ed2kk7.png

so what is going wrong?

what files do you need to check the problem?

Thanks

[RonnyK]

What you can do is changing the min-max width for your site to make sure it doesn't get to narrow. This is done in the template  (header) AND in the CSS (pagewrapper).

Ronny

[RoMeO]

body {
background-image: url(images/background.gif);
background-repeat: repeat;
margin: 0 auto;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
}
#header {
width: 900px;
height: 150px;
margin: 0 auto;
position: relative;
top: 10px;
left: 9px;
}
#shoutbox {
width: 150px;
height: 50px;
background-image: url(images/navigation.png);
position: absolute;
right: 50px;
top: 425px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
#shoutboxcode {
width: 128px;
height: 552px;
background-color: #313131;
position: absolute;
right: 50px;
top: 455px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding: 10px;
}
#shoutboxB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
right: 50px;
top: 999px;
}
#blanknav {
width: 900px;
height: 30px;
background-image: url(images/buttons/blank.png);
position: absolute;
right: 66px;
left: 64px;
top: 160px;
font-size: 10px;
color: #cec6a4;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
}
#stats {
width: 150px;
height: 30px;
background-image: url(images/navigation.png);
position: absolute;
left: 62px;
top: 425px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
#statsCode {
width: 128px;
height: 230px;
background-color: #313131;
position: absolute;
left: 62px;
top: 455px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
}
#statsB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
left: 62px;
top: 700px;
}
#affiliate {
width: 150px;
height: 30px;
background-image: url(images/navigation.png);
position: absolute;
left: 62px;
top: 735px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
#affiliatecode {
width: 128px;
height: 220px;
background-color: #313131;
position: absolute;
left: 62px;
top: 760px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
}
#affB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
left: 62px;
top: 999px;
}

#admin_nav {
width: 150px;
height: 30px;
background-image: url(images/navigation.png);
position: absolute;
left: 62px;
top: 170px;
}
#nav_code {
width: 128px;
height: 140px;
background-color: #313131;
position: absolute;
left: 62px;
top: 200px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
}
#NavB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
left: 62px;
top: 362px;
}
#navigation {
width: 150px;
height: 30px;
background-image: url(images/navigation.png);
position: absolute;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
left: 62px;
top: 200px;
}
#navigationCode {
width: 128px;
height: 140px;
background-color: #313131;
position: absolute;
left: 62px;
top: 229px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
}
#navigationB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
left: 62px;
top: 390px;
}
#login {
width: 150px;
height: 50px;
background-image: url(images/navigation.png);
position: absolute;
right: 50px;
top: 200px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
#loginCode {
width: 128px;
height: 140px;
background-color: #313131;
position: absolute;
right: 50px;
top: 229px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding: 10px;
}
#loginB {
width: 150px;
height: 30px;
background-image: url(images/bottom.png);
position: absolute;
right: 50px;
top: 390px;
}
div.welcome {
background-image: url(images/news.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}

div.welcomecode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 50px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.news {
background-image: url(images/news.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 70px;
left: 7px;
}
div.newsfooter {
background-image: url(images/newsfooter.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 68px;
left: 7px;
}
div.newsCode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 70px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.register {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}
div.submit {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}
div.submitcode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.support {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;

}
div.supportcode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.userbars {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
div.userbarscode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.tell {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}
div.tellcode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}

div.todo {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}
.textbox {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#D7DCE9;
background-color:#666666;
border:1px #191928 solid;
}
.tbl{
font-size:11px;
padding:3px 4px 3px 4px;
}
.tbl1 {
font-size:11px;
color:#EED999;
background-color:#313131;
padding:4px;
}
.tbl2 {
font-size:7px;
color:#C3C1B3;
background-color:#313131;
padding:4px;
}
td {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
}
div.registercode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
div.articles {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cec6a4;
}
div.articlescode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
}
div.loginerr {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
}

div.logincode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
}

div.admin {
background-image: url(images/blank.png);
width: 745px;
height: 30px;
margin: 0 auto;
position: relative;
top: 20px;
left: 96px;
}

div.admin_main{
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 720px;
height: 500px;
margin: 0 auto;
position: relative;
top: 25px;
color: #cec6a4;
padding: 10px;
left: 95px;
}

#footer{
background-image: url(images/blank.png);
width: 600px;
height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cec6a4;
margin: 0 auto;
position: relative;
top: 100px;
left: 7px;
}

div.chall {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cec6a4;
}

div.challcode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}

div.page {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cec6a4;
}

div.pagecode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}

.shoutboxname {font-weight:bold; color:#ffddaa;}
.shoutbox {color:#CFCFCF;}
.button {font-family:Verdana, Tahoma, Arial, Sans-Serif; font-size:10px; color:#cec6a4;background-color:#3D3A3D;
border:1px #191928 solid;margin-top:4px;}
img {border: 0px;}
.small {font-size:6px; font-weight:normal;}
.small2 {font-size:9px; font-weight:normal; color:#ADA899;}
a {color:#CEC6A4; text-decoration:none;font-size:10px;}
a:hover {color:#9BAE75; text-decoration:none;}
a.side {color:#CEC6A4; text-decoration:none;font-size:10px;}
a:hover.side {color:#9BAE75; text-decoration:none;}
a.white {color:#BCC0C9; text-decoration:none;font-size:10px;font-weight:bold;}
a:hover.white {color:#9BAE75; text-decoration:none;}
hr {height: 0px; border: solid #CCCCCC 0px; border-top-width: 1px;}
.quote {color:#A0B0CF;background-color:#3C3F47; padding:2px; margin:0px 20px 0px 20px; border:1px #191928 solid;}
lx {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: italic;
font-weight: normal;
text-indent: 10pt;
word-spacing: normal;
position: relative;
color: #cec6a4;
}
div.denied {
background-image: url(images/news.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
}

div.deniedcode {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 50px;
color: #cec6a4;
padding: 10px;
left: 7px;
}
#online {
width: 150px;
height: 30px;
background-image: url(images/navigation.png);
position: absolute;
left: 62px;
top: 735px;
color: #cec6a4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
}
#onlinecode {
width: 128px;
height: 220px;
background-color: #313131;
position: absolute;
left: 62px;
top: 760px;
color: #cec6a4;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
}
#viewleft {
color:#cec6a4;
background-color:#222222;
border:1px #191928 solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
#viewright {
color:#cec6a4;
background-color:#333333;
border:1px #191928 solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
div.forum {
background-image: url(images/blank.png);
width: 570px;
height: 30px;
margin: 0 auto;
position: relative;
top: 50px;
left: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cec6a4;
}

div.forumpage {
background-color: #313131;
border: thin solid #686868;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 548px;
height: inherit;
margin: 0 auto;
position: relative;
top: 49px;
color: #cec6a4;
padding: 10px;
left: 7px;
}

here is the CSS.. i was thinking of maybe making a container? to contain all the other divs?

im new to all this, i have no idea what am doing actually i need major help please

[RonnyK]

If you check the default templates that come with the installation of CMSMS, you'll see the logic concerning the width of the page you create, also you'll see the wrapper I mentioned earlier. I'm out today, so I can't check deeply what you need.

The default templates are also a good point to start/check! I often use them as a basis for a site.

Ronny

[Dr.CSS]

A real link would help as we could see the html and the css to help pinpoint a better solution...