...

View Full Version : Screen Size issues



Dan_Sheen
08-04-2011, 10: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, 11:00 AM
What's hot image slider is overlapping right sided dark grey boxes....

I opened in FF5

Dan_Sheen
08-04-2011, 11:31 AM
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, 11:39 AM
You have to write code that must work in all browsers with all screen size.

Major Payne
08-05-2011, 12: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, 03: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum