Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Screen Size issues

    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:

    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">
    <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:
    Code:
    @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;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    What's hot image slider is overlapping right sided dark grey boxes....

    I opened in FF5

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You have to write code that must work in all browsers with all screen size.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    832
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    http://www.elated.com/articles/choos...b-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 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
    ☠ ☠RON☠ ☠

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •