Hello,
I'm posting this thread about this template:
http://i37.tinypic.com/4rwznl.jpg
The problem is that in different screen resolutions theres
problems which cause the layout to not line-up correctly.
Is there some code or something I can do from making
it look correctly?
http://habbdance.net/habbeach/ is the full coded version.
PHP 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">
<meta http-equiv="cache-control" content="no-cache">
<head>
<title>HabBeach.NET! ~ Slogan Here</title>
<style type="text/css">
<!--
body {
text-align: center;
background-image: url(images/bg.png);
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #000;
}
A {
font-weight : bold;
text-decoration : none;
}
A:link {
color : #000;
}
A:visited {
color : #000;
}
A:hover {
text-decoration : underline;
}
#container {
width: 909px;
margin: auto;
}
#container2 {
width: 909px;
margin: auto;
}
#banner {
background-image: url(images/banner.PNG);
margin: auto;
width: 910px;
height: 147px;
}
#banner_box {
background-image: url(images/banner_box.PNG);
position: absolute;
left: 640px;
top: 20px;
padding-top: 8px;
padding-left: 8px;
width: 270px;
height: 93px;
text-align: left;
}
#bar {
background-image: url(images/bar.PNG);
margin: auto;
width: 905px;
height: 23px;
text-align: left;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #FFF;
padding-top: 8px;
padding-left: 5px;
}
#right {
position: absolute;
top: 186px;
left: 750px;
}
#left {
position: absolute;
top: 186px;
left: 57px;
}
#mid {
position: absolute;
top: 186px;
left: 272px;
}
#mid_bg {
background-image: url(images/mid_bg.PNG);
width: 478px;
}
#left_bg {
background-image: url(images/left_bg.PNG);
width: 215px;
}
#right_bg {
background-image: url(images/right_bg.PNG);
width: 217px;
}
#mid_bot {
background-image: url(images/mid_bot.PNG);
width: 477px;
height: 16px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #FFF;
padding-top: 4px;
}
#left_bot {
background-image: url(images/left_bot.PNG);
width: 215px;
height: 3px;
}
#right_bot {
background-image: url(images/right_bot.PNG);
width: 217px;
height: 2px;
}
#news_top {
background-image: url(images/news_top.PNG);
height: 127px;
width: 200px;
}
.news_bar {
background-image: url(images/news_bar.PNG);
height: 25px;
width: 165px;
text-align: left;
padding-top: 13px;
padding-left: 35px;
}
#news_bot {
background-image: url(images/news_bot.PNG);
height: 19px;
width: 195px;
text-align: right;
padding-top: 5px;
padding-right: 5px;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #999;
}
.box_top {
background-image: url(images/box_top.PNG);
height: 16px;
width: 194px;
text-align: left;
padding-top: 4px;
padding-left: 5px;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #66CCFF;
}
.box_mid {
background-image: url(images/box_mid.PNG);
width: 195px;
text-align: left;
padding-left: 5px;
padding-top: 3px;
}
.box_bot {
background-image: url(images/box_bot.PNG);
width: 199px;
height: 15px;
}
#content_top {
background-image: url(images/content_top.PNG);
height: 9px;
width: 466px;
}
#content_mid {
background-image: url(images/content_mid.PNG);
width: 460px;
text-align: left;
padding-left: 3px;
padding-right: 3px;
}
#content_bot {
background-image: url(images/content_bot.PNG);
width: 466px;
height: 8px;
}
-->
</style>
<!--Coded by Andrew of www.HabbDance.net-->
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="banner_box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam nisi, rutrum non, sagittis eu, venenatis nec, turpis. Aliquam rutrum gravida quam. In hac habitasse platea dictumst. Nam suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mollis odio.</div>
<div id="bar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit....</div>
<div id="container2">
<div id="left">
<div id="left_bg"><br /><center>
<div class="box_top">Title</div>
<div class="box_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean adipiscing dui a nibh. Praesent rhoncus felis id tortor placerat cursus.</div>
<div class="box_bot"></div><br />
<div class="box_top">Title</div>
<div class="box_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean adipiscing dui a nibh. Praesent rhoncus felis id tortor placerat cursus.</div>
<div class="box_bot"></div><br />
<div class="box_top">Title</div>
<div class="box_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean adipiscing dui a nibh. Praesent rhoncus felis id tortor placerat cursus.</div>
<div class="box_bot"></div><br />
<div class="box_top">Title</div>
<div class="box_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean adipiscing dui a nibh. Praesent rhoncus felis id tortor placerat cursus.</div>
<div class="box_bot"></div><br /></div>
<div id="left_bot"></div></center></div>
<div id="mid">
<div id="mid_bg"><center><br />
<div id="content_top"></div>
<div id="content_mid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam nisi, rutrum non, sagittis eu, venenatis nec, turpis. Aliquam rutrum gravida quam. In hac habitasse platea dictumst. Nam suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam mollis odio. Nunc consequat, metus non vestibulum iaculis, turpis dolor condimentum sem, quis consequat ligula lacus quis massa. Curabitur bibendum. Donec vitae leo vel neque pharetra mattis. Aenean sagittis iaculis metus. Aliquam erat volutpat. Proin aliquet nisi eget elit. Proin in ante. Aenean vel purus quis lacus tincidunt tincidunt. In hac habitasse platea dictumst. Maecenas congue. Quisque suscipit, tellus et tincidunt mattis, ipsum magna fringilla leo, in euismod justo eros malesuada purus. <br />Aenean semper augue at lectus. Integer sed lectus vitae augue fermentum mattis. Pellentesque leo ligula, viverra fermentum, tempus in, ultrices at, nisl. Quisque porta, ipsum ut convallis luctus, augue augue scelerisque orci, vel suscipit velit nisi quis purus. Ut bibendum, nulla eget condimentum faucibus, metus odio faucibus eros, sed molestie ligula purus nec nisl. Vestibulum dui nulla, mattis non, auctor vel, iaculis id, nisi. Maecenas auctor sapien quis orci. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque fermentum sapien et nunc. Aliquam venenatis, dui eget sodales posuere, lacus quam ultricies ligula, a bibendum pede mauris a urna. <br />Suspendisse libero leo, fringilla nec, imperdiet eu, venenatis sit amet, purus. Morbi rutrum mollis justo. Duis tristique mi non sapien. Donec ac nunc in lorem ultrices egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet velit at leo pharetra blandit. Aenean vulputate. Ut sed eros nec felis feugiat egestas. Nam congue, urna sit amet porttitor gravida, nibh urna sodales erat, vitae tempus risus sem mollis metus. Ut sit amet tortor. Quisque a diam vel tortor egestas hendrerit. Vestibulum quam. Integer consequat. Duis euismod enim eget purus. <br />Nam interdum, purus et eleifend ornare, ligula lectus cursus orci, ac consectetuer ante nisl ultrices leo. Quisque arcu. Etiam nec sapien. Duis adipiscing blandit justo. Quisque suscipit fringilla orci. Vestibulum faucibus. Praesent ullamcorper, arcu at commodo aliquam, sem leo consectetuer purus, ac dictum libero urna et turpis. Vivamus risus urna, adipiscing et, eleifend ac, pharetra commodo, lorem. Morbi pulvinar auctor sem. Suspendisse luctus pede id quam. Ut metus. Integer congue nisl eget diam. Suspendisse ligula orci, accumsan id, gravida sit amet, venenatis ac, massa. Duis vitae lorem.</div>
<div id="content_bot"></div><br />
<div id="mid_bot">Copyright © HabBeach.NET</div></center></div></div>
<div id="right">
<div id="right_bg">
<center><br /><div id="news_top"></div>
<div class="news_bar"><a href="#">Lorem Ipsum...</a></div><div class="news_bar"><a href="#">Lorem Ipsum...</a></div><div class="news_bar"><a href="#">Lorem Ipsum...</a></div>
<div id="news_bot">MERH NEWS</div></center>
<br /><div id="right_bot"></div></div><p>
<a target="_blank" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhabbdance.net%2Fhabbeach%2Findex.html">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a></div></div></div><br />
</p>
</body>
</html>
Thanks for your time,
--Prentiss
