Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Bryan Macdonald
Bryan Macdonald
6,412 Points

Website Help

I was working on trying to make a microsoft tile personal website and need help spacing out the tiles and making it look more lively. Using Dreamweaver.

html:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="Grid_Main.css" rel="stylesheet" type="text/css">
    <link href="Bryan_Main.css" rel="stylesheet" type="text/css">
    Grid_Main.css
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Bryan Main</title>
    </head>

    <body>

    <div class="container">
    <div class="grid_6 border">
    <h1>Bryan Macdonald</h1>
    </div>
    <div class="grid_5 omega border">
    <ul class="nav">
        <li>Home</li>
            <a href="#"><!--img home button--></a>
        <li>About</li>
            <a href="#"><!--img about button--></a>
        <li>Portfolio</li>
            <a href="#"><!--img portfolio button--></a>
        <li>Contact</li>
            <a href="#"><!--img contact button--></a>
    </ul>    
    </div>
    <div class="grid_6 alpha border">
    <h1>Work History</h1>
    <ul>
        <dt>2011-2012</dt>
        <dd>Sunset Grill</dd>
        <dd>Barback</dd>
        <dt>2009-2011</dt>
        <dd>Captain Georges Seafood Buffett</dd>
        <dd>Busser</dd>
    </ul>
    </div>    
    <div class="grid_5 omega border">
    <h1>About Me</h1>
    <p>Hello, I live in Charlotte.  Strong work Ethic.  I'm into fitness.</p>
    </div>

    <div class="grid_5 omega border">
    <h1>Education</h1>
    <ul>
        <dt>-2010</dt>
        <dd>First Flight High School</dd>

        <dt>2010-2012</dt>
        <dd>College of the Albermarle</dd>

        <dt>2012-2013</dt>
        <dd>University of North Carolina - Charlotte</dd>
    </ul>     
</div>

    <div class="grid_6 alpha border">
    <h1>Contact</h1>
    <ul>
        <dt>Phone Number</dt>
        <dd>252.573.8401</dd>
        <dt>E-mail</dt>
        <dd>obx_bryan@hotmail.com</dd>
    </ul>
    </div>



    <div class="grid_5 omega border">
    <h1 class="Resume">Resumé</h1>
    <p class="Resume"> <a href="facebook.com">Resume</a></p>
    </div>




    </h1>
    </div>
    </body>
    </html>

CSS:

@charset "UTF-8";
/* CSS Document */
    body {
    background-color: lightblue;
    color: #FAF3BC;
    }

    .nav {

    }

    h1 {
    font-size: 1.750em;
    }

    .resume {
    color: black;
    background-color: purple;
    padding: .7em .7em;
    margin: .7em .7em;
    border-radius: .2em;

    }

    ul.nav {
    margin: 120px 0 0 0;
    list-style: none;
    float: right;
    }

    ul.nav li {
    float: left;
    margin-right: 40px;
    font-size: 20px;
    }

    .border {
    border: 2px solid #FAF3BC;
    margin: 0 0 0 0;
    background-color: #006;
    }


Grid used from treehouse video

    @charset "UTF-8";
    /* CSS Document */
    /*
     Width: 1000px
     # Columns : 12 
     Column width: 65px
     Gutter : 20px 

     */
     .grid_1 { width: 6.5%; }
     .grid_2 { width: 15.0%; }
     .grid_3 { width: 23.5%; }
      .grid_4 { width: 32.0%; }
     .grid_5 { width: 40.5%; }
     .grid_6 { width: 49.0%; }
     .grid_7 { width: 57.5%; }
     .grid_8 { width: 66.0%; }
     .grid_9 { width: 74.5%; }
     .grid_10 { width: 83.0%; }
     .grid_11 { width: 91.5%; }
     .grid_12 { width: 100%; }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
    }

    .alpha{margin-left:0px;}
    .omega{margin-right:0px;}

    .container{
    width: 1000px; 
    margin: auto;
    }
  .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

3 Answers

christopher wood
PLUS
christopher wood
Courses Plus Student 4,438 Points
christopher wood
christopher wood
Courses Plus Student 4,438 Points

STyles are using % so this mean more fluid than fixed try using px instead, if need to do % the number are all incorrect and need to be more exact.

What i mean by exact is all the numbers display in the calculator for each grid

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

As an aside to this check out both

packery and shapeshift

For some funky tile based stuff (both featured on the Treehouse Show this week)

G

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Define: "More lively". That is too vague a term.