#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0

    Stuuuuck need help please with css positioning


    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. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    mixing percentages like you are here is almost always going to drive you insane and force you to have to write hacky css.

    Code:
    <html>
    <head>
    <title>website.html</title>
    <style>
    #squareone{
        background: #ccc;
        float: left;
        width: 20%;
        margin-top:50px;
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squaretwo{
        background: #ccc;
        width: 20%;
        float: left;
        margin-top:50px;
        padding:1%;
        margin:1%;
    
    }
    #squarethree{
        background: #ccc;
        margin-top:50px;
        width: 35%;
        float: left;
        padding:1%;
        margin:1%;
    }
    #squarefoor{
        background: #ccc;
        float: left;
    
        width: 20%;
        margin-top: 50;
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squarefive{
        background: #ccc;
        width: 20%;
        float: left;
        margin-top: 50px;
        padding:1%;
        margin:1%;
    }
    #squaresix{
        background: #ccc;
        margin-top: 50px;
        width: 35%;
        float: left;
        padding:1%;
        margin:1%;
    }
    #squareseven{
        background: #ccc;
        float: left;
    
        width: 20%;
        margin-top: 50;
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squareeight{
        background: #ccc;
        width: 20%;
        float: left;
        margin-top: 50px;
        padding:1%;
        margin:1%;
    }
    #squarenine{
        background: #ccc;
        margin-top: 50px;
        width: 35%;
        float: left;
        padding:1%;
        margin:1%;
    }
        </style>
    </head>
    <body>
    
        <div id="squareone"><h1>1<h1></div>
        <div id="squaretwo"><h1>2<h1></div>
        <div id="squarethree"><h1>3<h1></div>
        <div id="squarefoor"><h1>4<h1></div>
        <div id="squarefive"><h1>5<h1></div>
        <div id="squaresix"><h1>6<h1></div>
        <div id="squareseven"><h1>7<h1></div>
        <div id="squareeight"><h1>8<h1></div>
        <div id="squarenine"><h1>9<h1></div>
    
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    2
    Rep Power
    0
    Thank you !
    That does help !
    Now i dont want to over ask but the next and final thing
    Is that i have to keep the 9 squares centerd..
    Square number 5 has to be in the center of the screen,
    In max and minimal size

    Anny advise ?
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    Code:
    <html>
    <head>
    <title>website.html</title>
    <style>
    body {
        width:100%;
        margin: 0;
        padding:0;
        text-align:center
        }
    .wrapper {
        width:80%;
        margin: 50px auto 0 auto;
        padding: 0;
      }
    
      .cf:before,
      .cf:after {
          content: " ";
          display: table;
      }
    
      .cf:after {
          clear: both;
      }
    
    #squareone{
        background: #ccc;
        float: left;
        width: 29%;
    
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squaretwo{
        background: #ccc;
        width: 29%;
        float: left;
    
        padding:1%;
        margin:1%;
    
    }
    #squarethree{
        background: #ccc;
    
        width: 29%;
        float: left;
        padding:1%;
        margin:1%;
    }
    #squarefoor{
        background: #ccc;
        float: left;
    
        width: 29%;
    
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squarefive{
        background: #ccc;
        width: 29%;
        float: left;
    
        padding:1%;
        margin:1%;
    }
    #squaresix{
        background: #ccc;
    
        width: 29%;
        float: left;
        padding:1%;
        margin:1%;
    }
    #squareseven{
        background: #ccc;
        float: left;
    
        width: 29%;
    
        clear: both;
        padding:1%;
        margin:1%;
    }
    #squareeight{
        background: #ccc;
        width: 29%;
        float: left;
    
        padding:1%;
        margin:1%;
    }
    #squarenine{
        background: #ccc;
    
        width: 29%;
        float: left;
        padding:1%;
        margin:1%;
    }
        </style>
    </head>
    <body>
    <div class="wrapper cf">
        <div id="squareone"><h1>1<h1></div>
        <div id="squaretwo"><h1>2<h1></div>
        <div id="squarethree"><h1>3<h1></div>
        <div id="squarefoor"><h1>4<h1></div>
        <div id="squarefive"><h1>5<h1></div>
        <div id="squaresix"><h1>6<h1></div>
        <div id="squareseven"><h1>7<h1></div>
        <div id="squareeight"><h1>8<h1></div>
        <div id="squarenine"><h1>9<h1></div>
    </div>
    </body>
    </html>
    Your widths, padding and margins need to add up to 100%. That is why things where not "centered".

IMN logo majestic logo threadwatch logo seochat tools logo