PDA

View Full Version : Screen Size issues



Dan_Sheen
08-04-2011, 11:41 AM
I just finished my website, however when I try to preview it on other screen sizes it looks bugged, like certain items are not in the right position, I used 100% in width for the main div items, and to me on my big screen it looks perfectly fine. Heres the website:

http://cubehosts.eu

And the source:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cube Hosts - Thinking Outside The Box</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
</head>

<body>
<div id="header">
<div id="logo">
<img src="images/ch.png" />
</div>
<div id="social">
<a href="http://facebook.com/cubehosts"><img src="images/fb.png" width="50" height="50" border="0" alt="Connect with Cube Hosts on Facebook" /></a>
<a href="http://twitter.com/cubehostsuk"><img src="images/tweet.png" width="50" height="50" border="0" alt="Follow Cube Hosts on Twitter" /></a>
<a href="http://www.linkedin.com/in/cubehosts"><img src="images/linkedin.png" width="50" height="50" border="0" alt="Add us on LinkedIn" /></a>
<a href="http://youtube.com/cubehostslimited"><img src="images/youtube.png" width="50" height="50" border="0" alt="Subscribe to our YouTube Channel" /></a>
</div>
</div>
<div id="navigation">
<a href="index.html"><font color="white">Home</font></a>
<a href="hosting.html"><font color="white">Hosting</font></a>
<a href="design.html"><font color="white">Web Design</font></a>
<a href="games.html"><font color="white">Game Servers</font></a>
<a href="about.html"><font color="white">About Us</font></a>


</div>
<div id="content">
<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="demo/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="demo/images/up.jpg" alt="" /></a>
<img src="demo/images/walle.jpg" alt="" />
<img src="demo/images/nemo.jpg" alt="" />
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<div id="sidebar1">
<font size="5">Small Package</font><br />
<font size="2">10GB Disk Space<br />
100GB Bandwidth<br />
Unlimited Addons</font><br />
<div class="price"><h2><font color="orange">&pound;</font>1.00</h2></div>
<a href="hosting.html"><img src="images/but-order.png" border="0" /></a>
</div>

<div id="sidebar2">
<font size="5">Medium Package</font><br />
<font size="2">20GB Disk Space<br />
200GB Bandwidth<br />
Unlimited Addons</font><br />
<div class="price2"><h2><font color="orange">&pound;</font>2.00</h2></div>
<a href="hosting.html"><img src="images/but-order.png" border="0" /></a>
</div>

<div id="sidebar3">
<font size="5">Large Package</font><br />
<font size="2">30GB Disk Space<br />
300GB Bandwidth<br />
Unlimited Addons</font><br />
<div class="price2"><h2><font color="orange">&pound;</font>3.00</h2></div>
<a href="hosting.html"><img src="images/but-order.png" border="0" /></a>
</div>

<div id="checkout"></div>
<div id="whs"><table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.webhostingstuff.com/review/CubeHosts.html" title="Cube Hosts Review" target="_blank"><img src="http://www.webhostingstuff.com/images/hosting-review/CubeHosts.gif" alt="Cube Hosts Review" border="0" style="display:block;"></a></td></tr><tr><td><a href="http://www.webhostingstuff.com" title="web hosting" target="_blank"><img src="http://www.webhostingstuff.com/images/review/web-hosting.gif" alt="web hosting" border="0" style="display:block;"></a></td></tr></table></div>

<div id="whs2"><table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.webhostingstuff.com/uptime/CubeHosts.html" title="Cube Hosts Uptime" target="_blank"><img src="http://www.webhostingstuff.com/images/server-uptime/CubeHosts.gif" alt="Cube Hosts Uptime" border="0" style="display:block;"></a></td></tr><tr><td><a href="http://www.webhostingstuff.com" title="cheap web hosting" target="_blank"><img src="http://www.webhostingstuff.com/images/uptime/cheap-web-hosting.gif" alt="cheap web hosting" border="0" style="display:block;"></a></td></tr></table></div>

<div id="whs3"><table border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.webhostingstuff.com/verified/CubeHosts.html" title="Cube Hosts Guarantee" target="_blank"><img src="http://www.webhostingstuff.com/images/hosting-ethics/CubeHosts.gif" alt="Cube Hosts Guarantee" border="0" style="display:block;"></a></td></tr><tr><td><a href="http://www.webhostingstuff.com" title="affordable web hosting" target="_blank"><img src="http://www.webhostingstuff.com/images/ethics/affordable-web-hosting.gif" alt="affordable web hosting" border="0" style="display:block;"></a></td></tr></table></div>

<div id="aff">
</div>
<div id="linux">
<font size="5">Linux Web Hosting</font><br />
<font size="2">We Provide Linux Web Hosting<br />
Buy the most secure hosting for your website!</font>
<p><a href="hosting.html"><div class="plans">View Plans</div></a></p>
<div class="penguin"></div>
</div>

<div id="design">
<font size="5">Web Design Services</font><br />
<font size="2">Get a professional looking website with Cube Hosts
<p>Cube Hosts can create a stunning website to suit your needs, we have<br />
basic packages however you can request a quote if the packages do<br />
not meet your expectations.</p></font>
<p><a href="design.html"><div class="plans">More Info.</div></a></p>
<div class="webd"></div>
</div>

<div id="games">
<font size="5">Game Servers</font><br />
<font size="2">We also provide top-notch game servers, check out<br />
what games we have on offer.</font>
<p><a href="games.html"><div class="plans">More Info.</div></a></p>
<div class="gameserv"></div>
</div>

</div>
<div id="footer">
<center> Cube Hosts Limited, All Rights Reserved.<br />
VeleCore Technologies 2011<br />
Company Registration No. 7519204. Registered in England and Wales.</center>
</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body {
width:100%;
height:100px;
background-color:#323131;
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
}

#header {
width:100%;
height:100px;

}

#logo {
width:330px;
margin: 0 auto;
float:left;
padding-left:20px;
padding-top:10px;
}

#social {
width:250px;
float:right;
}

#navigation {
background-image:url(images/line.png);
background-repeat:repeat-x;
height:1px;
color:#FFF;
font-weight:bold;
text-align: center;
font-family:Calibri;
}

#content {
width:100%;
height:930px;
background-color:#FFF;
background-repeat:repeat;
position:absolute;
top: 138px;
padding-left:10px;
}

#sidebar1 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 180px;
height: 110px;
position:absolute;
left: 820px;
top: 9px;
font-family:Calibri;
color:white;
padding:5px;
}

#sidebar2 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 180px;
height: 110px;
position:absolute;
left: 820px;
top: 146px;
font-family:Calibri;
color:white;
padding:5px;
}

#sidebar3 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 180px;
height: 110px;
position:absolute;
left: 820px;
top: 283px;
font-family:Calibri;
color:white;
padding:5px;
}

#checkout {
width:250px;
height:205px;
background-image:url(images/2co.png);
background-repeat:no-repeat;
position:absolute;
left: 5px;
top: 3px;
}

#linux {
width:565px;
height:150px;
padding-left:10px;
color:#013446;
background-image:url(images/linux-hosting.png);
background-repeat:no-repeat;
position:absolute;
left: 230px;
top: 363px;
}

#testimonial {
width:250px;
height:300px;
padding:10px;
padding-top:48px;
background-image:url(images/test.png);
background-repeat:no-repeat;
position:absolute;
left: 5px;
top: 216px;
}

#design {
width:570px;
height:160px;
padding-left:10px;
color:#013446;
background-image:url(images/design-box.png);
background-repeat:no-repeat;
position:absolute;
left:230px;
top:528px;
}

#games {
width:570px;
height:160px;
padding-left:10px;
color:#013446;
background-image:url(images/design-box.png);
background-repeat:no-repeat;
position:absolute;
left:230px;
top:705px;
}

#aff {
width:180px;
height:193px;
background-image:url(images/aff.gif);
background-repeat:no-repeat;
position:absolute;
left: 820px;
top: 420px;
}

#footer {
width:100%;
height:50px;
position:absolute;
left: 30px;
top: 1069px;
color:#FFF;
}

#guarantee {
width:250px;
height:200px;
padding-left:5px;
background-image:url(images/guarantee.png);
background-repeat:no-repeat;
position:absolute;
top: 527px;
left: 11px;
}

#design1 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 420px;
height: 200px;
position:absolute;
left: 25px;
top: 298px;
font-family:Calibri;
color:white;
padding:5px;
}

#design2 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 420px;
height: 200px;
position:absolute;
left: 545px;
top: 298px;
font-family:Calibri;
color:white;
padding:5px;
}

#design3 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 420px;
height: 200px;
position:absolute;
left: 25px;
top: 521px;
font-family:Calibri;
color:white;
padding:5px;
}

#design4 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width: 420px;
height: 200px;
position:absolute;
left: 545px;
top: 522px;
font-family:Calibri;
color:white;
padding:5px;
}

#infodesign {
position:absolute;
left: 75px;
top: 740px;
}

#whs {
position:absolute;
left: 35px;
top: 170px;
}

#whs2 {
position:absolute;
left: 35px;
top: 277px;
}

#whs3 {
position:absolute;
left: 35px;
top: 384px;
}

#staff {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width:250px;
height:200px;
position:absolute;
color:#FFFFFF;
top: 231px;
left: 250px;
}

#staff2 {
moz-border-radius: 5px;
border-radius: 5px;
background-color: #323131;
width:250px;
height:200px;
position:absolute;
color:#FFFFFF;
left: 520px;
top: 231px;
}

/* Classes */

.penguin {
width:261px;
height:193px;
background-image:url(images/linuxpeg.png);
background-repeat:no-repeat;
position:absolute;
left: 370px;
top: -17px;
}

.plans {
width:126px;
height:36px;
background-image:url(images/buy-bg.png);
background-repeat:no-repeat;
padding:10px;
padding-left:20px;
}

.webd {
width:78px;
height:79px;
background-image:url(images/web_design.png);
background-repeat:no-repeat;
position:absolute;
left:450px;
top: 40px;
}

.gameserv {
width:199px;
height:123px;
background-image:url(images/game-server.png);
background-repeat:no-repeat;
position:absolute;
left:344px;
top: 34px;
}

table.products, table.pricing, table.addons, table.enom {
border:1px solid #ccc;
width:100%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

table.products tr:first-child td:first-child, table.pricing tr:first-child td:first-child, table.addons tr:first-child td:first-child, table.enom tr:first-child td:first-child {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
table.products tr:first-child td:last-child, table.pricing tr:first-child td:last-child, table.addons tr:first-child td:last-child, table.enom tr:first-child td:last-child {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
table.products tr:last-child td:first-child, table.pricing tr:last-child td:first-child, table.addons tr:last-child td:first-child, table.enom tr:last-child td:first-child {
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
}
table.products tr:last-child td:last-child, table.pricing tr:last-child td:last-child, table.addons tr:last-child td:last-child, table.enom tr:last-child td:last-child {
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
}

table.pricing {
margin:30px 0;
text-align:center;
}

table.pricing th, table.addons th, table.products th, table.enom th {
background:url('images/bg_th.gif') repeat-x 0 2px;
border-bottom:1px solid #ddd;
color:#246f83;
font-size:110%;
padding:10px;
}
table.addons th, table.products th { text-align:left; }
table.enom th { text-align:center; }

table.pricing td, table.addons td, table.enom td { padding:7px 10px; border-top:1px dotted #ccc; }
table.products td { padding:12px; border-top:1px dotted #ccc; }

table.pricing p { margin:0.3em; }

.ordernow { background:url(images/icon_ordernow.gif); }
.moreinfo { background:url(images/icon_moreinfo.gif); }
.ordernow, .moreinfo { display:block; width:100px; height:22px; }
.ordernow:hover, .moreinfo:hover { background-position:100px 0; }

.price {
position:absolute;
left: 119px;
top: 24px;
}

.price2 {
position:absolute;
left: 119px;
top: 24px;
}

.order2 {
width:101px;
height:21px;
position:absolute;
left: 1004px;
top: 550px;
}

webd1 {
width:78px;
height:79px;
background-image:url(images/web_design.png);
background-repeat:no-repeat;
position:absolute;
left:213px;
top: 8px;

.webd2 {
width:156px;
height:79px;
background-image:url(images/web_design2.png);
background-repeat:no-repeat;
position:absolute;
left:182px;
top: 9px;
}

.webd3 {
width:234px;
height:79px;
background-image:url(images/web_design3.png);
background-repeat:no-repeat;
position:absolute;
left:135px;
top: 7px;
}

.webd4 {
width:79px;
height:79px;
background-image:url(images/custom.png);
background-repeat:no-repeat;
position:absolute;
left:245px;
top: 10px;
}

vikram1vicky
08-04-2011, 12:00 PM
What's hot image slider is overlapping right sided dark grey boxes....

I opened in FF5

Dan_Sheen
08-04-2011, 12:31 PM
What's hot image slider is overlapping right sided dark grey boxes....

I opened in FF5

Yea that is what is looks like, however it isn't on my screen, I just think its a screen size problem.

vikram1vicky
08-04-2011, 12:39 PM
You have to write code that must work in all browsers with all screen size.

Major Payne
08-05-2011, 01:46 PM
Choosing Dimensions for Your Web Page Layout:

In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Some HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcubehosts.eu%2F) may help if corrected.

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

teedoff
08-05-2011, 04:08 PM
I also have to question your abundant use of absolute positioning and sometimes in combination with floats. Most elements can simply be floated and margins used to tweak their exact position.