www.webdeveloper.com
Results 1 to 4 of 4

Thread: Simple CSS/HTML Question

  1. #1
    Join Date
    Jul 2014
    Posts
    15

    Simple CSS/HTML Question

    Hi everyone,

    Pretty basic question but I can't figure out how to achieve these for an assignment if someone wouldn't mind a quick pointer. I need to create three overlapping rectangles like shown:

    http://s23.postimg.org/z5vjjyuvr/boxes.jpg

    Thanks!

  2. #2
    Join Date
    Dec 2012
    Posts
    100
    To achieve that you just need to create 3 div elements, then use the background, width, height, position and top/left css styles to give the elements a background colour, give them a height/width so they're visible and then position them correctly.

    Here's a link to some documentation on the position style to get you started.

    Positioning Elements with CSS

  3. #3
    Join Date
    Mar 2012
    Posts
    1,527
    You should look up "position" and "absolute" in a CSS manual. Absolute positioning allows you to position divs with "left" and "top" so they overlap.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there Minnesota31,

    and a warm welcome to these forums.

    As this is just an assignment, you might also want to entertain your tutor with a rather silly solution...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>silly solution</title>
    
    <style>
    #container {
        width:204px;
        padding:50px;
        border:1px solid #999;
        margin:auto;
        background-color:#9cf;
        box-shadow:5px 5px 5px #999;
        overflow:hidden;
     }
    #top-row {
        width:100px;
        height:50px;
        border:1px solid #fff;
        border-bottom:0;
        background-color:#f00;
     }
    #second-row-left {
        float:left;
        width:50px;
        height:50px;
        border-left:1px solid #fff;
        background-color:#f00;
     }
    #second-row-right {
        float:left;
        width:100px;
        height:50px;
        border:1px solid #fff;
        border-bottom:0;
        margin-top:-1px;
        background-color:#008000;
     }
    #third-row-left {
        clear:both;
        float:left;
        width:50px;
        height:50px;
        border-bottom:1px solid #fff;
        border-left:1px solid #fff;
        background-color:#f00;
     }
    #third-row-center {
        float:left;
        width:50px;
        height:50px;
        border-left:1px solid #fff;
        background-color:#008000;
     }
    #third-row-right {
        float:left;
        width:100px;
        height:50px;
        border:1px solid #fff;
        border-bottom:0;
        margin-top:-1px;
        background-color:#00f;
     }
    #fourth-row-left {
        clear:both;
        float:left;
        width:50px;
        height:50px;
        border-bottom:1px solid #fff;
        border-left:1px solid #fff;
        margin:-1px 0 0 51px;
        background-color:#008000;
     }
    #fourth-row-right {
        float:left;
        width:100px;
        height:100px;
        border:1px solid #fff;
        border-top:0;
        margin-top:-1px;
        background-color:#00f;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
     <div id="top-row"></div>
    
     <div id="second-row-left"></div>
     <div id="second-row-right"></div>
    
     <div id="third-row-left"></div>
     <div id="third-row-center"></div>
     <div id="third-row-right"></div>
    
     <div id="fourth-row-left"></div>
     <div id="fourth-row-right"></div>
    
    </div>
    
    </body>
    </html>

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles