SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Grid Problem

    Hello everyone,

    I noticed there are many experts on this forum so I joined to hopefully learn some tricks and get some help
    I am a beginner studying CSS.
    I have a grid layout that I need to replicate exactly which is attached to this post.

    Layout_Assignment_flat.gif

    I cannot seem to figure out how to make it in CSS. Every square needs to be a separate div because they need to be colored later.

    - Problem 1 - I have no idea on why when I create a div square and all the light grey border that it doubles on top and bottom. The Border is suppose to be 10 px and the squares are 200 x 180 px. But between the top and middle, middle and bottom squares the border doubles to 20 px.

    - Problem 2 - I cant seem to float the squares right so that it has the correct spacing between the lines of vertical squares. I have probably spent a good few hours and there seems to be no hope for me.

    Any help on this would be greatly appreciated and I am excited to learn some things from you guys!

    Thanks, Nathan

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Nathan. Welcome to the forums.

    This shouldn't be too hard to do. Could you post the code you have so far?

    For the border problem, you'd have to remove a top or bottom border where they meet.

    For the second problem, it would be handy to know the larger context of all this. Will what you've shown in your screen shot be contained in a fixed width container, or will they just float all over the page etc? Is it safe for the boxes to have a fixed height? (If there is to be text in them, that's not really safe at all, though images would be OK.) Without fixed heights, it will be hard to control that layout perfectly.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph!,

    The grid has fixed dimensions of 800 px by 600 px. I am on my laptop so do now currently have the code (at work) but once I get home I will post it. The first problem seems like a simple fix but how do you go about taking one side of the border off of a square?

    Thanks for your help!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not very efficient, but here's one way you could do it (just quicly knocked up):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Boxes</title>
    
    <style media="all">
    .wrap {width: 780px; height:600px; border: 10px solid white; overflow: hidden; margin: 30px auto;}
    .box1 {width: 680px; float: left;}
    .box2 {width: 90px; float: right;}
    .box1 div, .box2 div {background: #666; border-color: #ccc; border-style: solid;}
    .box1 div {margin-right: 10px; float: left; height: 180px; width: 200px;}
    .box1 div.end {margin: 0;}
    .box1 .sq1, .box1 .sq3 {border-width: 10px;}
    .box1 .sq2 {border-width: 0 10px;}
    .box2 div {height: 275px;}
    .box2 .sq1.top {border-width: 10px;}
    .box2 .sq1.bot {border-width: 0 10px 10px 10px;}
    </style>
    	
    </head>
    <body>
    
    <div class="wrap">
    	<div class="box1">
    		<div class="sq1">
    		</div>
    		<div class="sq1">
    		</div>
    		<div class="sq1 end">
    		</div>
    		<div class="sq2">
    		</div>
    		<div class="sq2">
    		</div>
    		<div class="sq2 end">
    		</div>
    		<div class="sq3">
    		</div>
    		<div class="sq3">
    		</div>
    		<div class="sq3 end">
    		</div>
    	</div>
    	<div class="box2">
    		<div class="sq1 top">
    		</div>
    		<div class="sq1 bot">
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Not as efficient as Ralph's... but, I sometimes enjoy a different structure in markup; so, here's another method for your consideration.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?887891-CSS-Grid-Problem&p=5194224#post5194224
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <title>Aligning Boxes 3</title>
        <style type="text/css">
    
    body {
        background-color:#ace;
    }
    .wrap {
        width:780px;
        height:580px;
        overflow:hidden;
        margin:30px auto;
        background-color:#fff;
        padding:10px;
    }
    .box1,
    .box2 {
        width:230px;
        float:left;
    }
    .box2 {
        width:90px;
    }
    .rect {
        background-color:#666;
        border-color:#ccc;
        border-style:solid;
        border-width:0px 10px 10px;
        float:left;
    }
    .rect:first-child {
        border-width:10px;
    }
    .box1 .rect {
        width:200px;
        height:180px;
    }
    .box2 .rect {
        width:70px;
        height:275px;
    }
        </style>
    
    </head>
    <body>
    
    <div class="wrap">
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box2">
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Even simpler. Same markup as previous post. Simpler css.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?887891-CSS-Grid-Problem&p=5194224#post5194224
    -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <title>Aligning Boxes 6</title>
        <style type="text/css">
    
    body {
        background-color:#ace;
    }
    .wrap {
        width:780px;
        height:580px;
        overflow:hidden;
        margin:30px auto;
        background-color:#fff;
        padding:10px;
    }
    .box1,
    .box2 {
        background-color:#ccc;
        padding:10px;
        float:left;
    }
    .box1 {
        margin-right:10px;
    }
    .rect {
        background-color:#666;
    }
    .box1 .rect {
        width:200px;
        height:180px;
    }
    .box2 .rect {
        width:70px;
        height:275px;
    }
    .rect + .rect {
        margin-top:10px;
    }
    
        </style>
    
    </head>
    <body>
    
    <div class="wrap">
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box1">
    		<div class="rect"></div>
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    	<div class="box2">
    		<div class="rect"></div>
    		<div class="rect"></div>
    	</div>
    </div>
    
    </body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, ronpat.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thank you, Sir. "Ah 'preciates the feedback." <big grin>

  9. #9
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! It is exactly what I was looking for. I can see all my errors too.. which there was many. Only one other question and then I can stop bugging you guys haha. How would I go about giving each of the boxes a different background color?

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Depends on which of the above layouts you are talking about.

    With the last "Even Simpler" layout, the easiest way is to just assign a classname to each of the colors and add that classname to the desired box. Just be sure to delete the blanket color applied here:
    Code:
    .box1,
    .box2 {
        background-color:#ccc;  
        padding:10px;
        float:left;
    }
    and add it to the respective boxes in the following manner:
    Code:
    .green {background-color:#00ff00;}
    .yellow {background-color:#ffff00;}
    .magenta  {background-color:#ff00ff;}
    .cyan {background-color:#00ffff;}
    
    <div class="box1 green">
    <div class="box1 yellow">
    <div class="box1 magenta">
    <div class="box2 cyan">
    boxes, squares, rectangles, borders...

    If you are actually talking about the individual rects (squares), the same principle apples, except to different elements. You might choose a better convention than using colornames as classnames, too. Numbering or lettering the boxes might be more semantically appropriate.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by NathanDParker View Post
    How would I go about giving each of the boxes a different background color?
    One way would be to give each a unique class. Another option would be to use sibling selectors:

    Code:
    <!DOCTYPE html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="content-language" content="en-us">
        <title>Aligning Boxes 6</title>
        <style type="text/css">
    
    body {
        background-color:#ace;
    }
    .wrap {
        width:780px;
        height:580px;
        overflow:hidden;
        margin:30px auto;
        background-color:#fff;
        padding:10px;
    }
    .box1,
    .box2 {
        background-color:#ccc;
        padding:10px;
        float:left;
    }
    .box1 {
        margin-right:10px;
    }
    .box1 div {
        width:200px;
        height:180px;
    }
    .box2 div {
        width:70px;
        height:275px;
    }
    .box1 div + div, .box2 div + div {
        margin-top:10px;
    }
    
    .box1 div {background: red;}
    .box1 div + div {background: blue;}
    .box1 div + div + div {background: yellow;}
    
    .box1 + .box1 div {background: green;}
    .box1 + .box1 div + div {background: violet;}
    .box1 + .box1 div + div + div {background: pink;}
    
    .box1 + .box1 + .box1 div {background: gray;}
    .box1 + .box1 + .box1 div + div {background: purple;}
    .box1 + .box1 + .box1 div + div + div {background: orange;}
    
    .box2 div {background: black;}
    .box2 div + div {background: brown;}
    
        </style>
    
    </head>
    <body>
    
    <div class="wrap">
    	<div class="box1">
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    	<div class="box1">
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    	<div class="box1">
    		<div></div>
    		<div></div>
    		<div></div>
    	</div>
    	<div class="box2">
    		<div></div>
    		<div></div>
    	</div>
    </div>
    
    </body>
    </html>
    @ronpat ; That's using your example from post #6, but with the classes removed. You don't actaually need the classes, because you can target each box with .box1 div instead of .box1 .rect etc.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Very slick, Ralph! Gotta remember that! I had been thinking in terms of pseudo-classes but adjacent sibs are easier here. No end tag classes needed. Cool!

  13. #13
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A big thanks to the both of you! Problems are fixed and even learned some things appreciate it!


Bookmarks

Posting Permissions

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