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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css positioning problem

    Hello everybody, first of all excuse me for my english, its not my native launge..
    Im doing a school report and i've gotten stuck on this.. im wondering if somebody
    can please help me out..
    The basic idea is to get 9 squares to alignh perfectly on maximum screen and dont
    move out of context if you minimalise the screen..
    I've gotten so far but cant seem to figure out how to make it work.. when i minimalise
    now everything gets out of order..
    Please help me out

    Code:
    <HTML>
    <HEAD>
    <title>website.html</title>	
        <STYLE>
    #squareone{
        background-image: url("immage/squareone.png");
        background-repeat: no-repeat;
        float: left;
        margin-left: 260px;
        width: 20%;
        margin-top:50px;
        clear: both;
    }
    #squaretwo{
        background-image: url("immage/squaretwo.png");
        background-repeat: no-repeat;
        width: 20%;
        float: left;
        margin-top:50px;
    }
    #squarethree{
        background-image: url("immage/squarethree.png");
        background-repeat: no-repeat;
        margin-top:50px;
        width: 35%;
        float: left;
    }
    #squarefoor{
        background-image: url("immage/squarefoor.png");
        background-repeat: no-repeat;
        float: left;
        margin-left: 260px;
        width: 20%;
        margin-top: 50;
        clear: both;
    }
    #squarefive{
        background-image: url("immage/squarefive.png");
        background-repeat: no-repeat;
        width: 20%;
        float: left;
        margin-top: 50px;
    }
    #squaresix{
        background-image: url("immage/squaresix.png");
        background-repeat: no-repeat;
        margin-top: 50px;
        width: 35%;
        float: left;
    }
    #squareseven{
        background-image: url("immage/squareseven.png");
        background-repeat: no-repeat;
        float: left;
        margin-left: 260px;
        width: 20%;
        margin-top: 50;
        clear: both;
    }
    #squareeight{
        background-image: url("immage/squareeight.png");
        background-repeat: no-repeat;
        width: 20%;
        float: left;
        margin-top: 50px;
    }
    #squarenine{
        background-image: url("immage/squarenine.png");
        background-repeat: no-repeat;
        margin-top: 50px;
        width: 35%;
        float: left;
    }
        </STYLE>
    </HEAD>
    <BODY bgcolor="#000000">
       
        <div id="squareone"><img src="immage/squareone.png"></div>
        <div id="squaretwo"><img src="immage/squaretwo.png"></div>
        <div id="squarethree"><img src="immage/squarethree.png"></div>
        <div id="squarefoor"><img src="immage/squarefoor.png"></div>
        <div id="squarefive"><img src="immage/squarefive.png"></div>
        <div id="squaresix"><img src="immage/squaresix.png"></div>
        <div id="squareseven"><img src="immage/squareseven.png"></div>
        <div id="squareeight"><img src="immage/squareeight.png"></div>
        <div id="squarenine"><img src="immage/squarenine.png"></div>                            
    
    </BODY>
    </HTML>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    You will never get it to align perfectly if you use pixels sizes. You need to use % for everything in order to get the alignment you are after.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    70
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Try this

    Work from the basis of a complete flexi grid system with proper percentage widths and then if you want to centre it - use margin: 0 auto on a container div that has a specified width.

    I've removed your margins and images from the grid so you can have it as background colours instead. Use this as a base to create what you want.

    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>Untitled Document</title>
        <STYLE>
    #squareone{
        background: #009900;
        float: left;
        margin-left: 0;
        width: 30%;
        
    	height: 20px;
        clear: both;
    }
    #squaretwo{
        background: #33CC99;
        width: 30%;
        float: left;
    	height: 20px;
    
    }
    #squarethree{
        background: #FF00FF;   
        width: 40%;
    	height: 20px;
        float: left;
    }
    #squarefoor{
        background: #CCC;
        float: left;
        width: 30%;
    	height: 20px;
     
        clear: both;
    }
    #squarefive{
        background: #fff;
        width: 30%;
        float: left;
    	height: 20px;
    
    }
    #squaresix{
        background: #666;
    
        width: 40%;
    	height: 20px;
        float: left;
    }
    #squareseven{
        background: #CCCC66;
        float: left;
    	height: 20px;
        width: 30%;
     
        clear: both;
    }
    #squareeight{
        background: #FF0000;
        width: 30%;
    	height: 20px;
        float: left;
      
    }
    #squarenine{
        background: #FFFF66;
         width: 40%;
        float: left;
    	height: 20px;
    }
        </STYLE>
    </head>
    
    <BODY bgcolor="#000000">
       
        <div id="squareone"></div>
        <div id="squaretwo"></div>
        <div id="squarethree"></div>
        <div id="squarefoor"></div>
        <div id="squarefive"></div>
        <div id="squaresix"></div>
        <div id="squareseven"></div>
        <div id="squareeight"></div>
        <div id="squarenine"></div>                            
    
    </BODY>
    </html>


  •  

    Posting Permissions

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