Need help replicating metro UI tiles! Please and Thank you :D

Discussion in 'Web Design and Development' started by jonpeter, Sep 21, 2013.

  1. macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #1
    So I got myself through code academy's web fundamentals. 100%, thank you very much haha.
    After dabbling with the idea of creating my own website and actually coming across a similar question on here a while back, I'm here with my own question.

    Basically, I have different divs of various sizes.
    128x128, 270x270... so forth and so on. But my one trouble comes through the fact I'm trying to get their positions next to one another as well as below. I just don't know where to go from here...

    div
    {
    height:128px;
    width:120px;
    color:white
    margin: 0 5px 0 0;
    }

    how would i get one div next to it (and then next to it)
    and then below as well.

    any answers would be helpful. Thank You!
     
  2. macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #2
    So what you need is a line of 5 or 10 squares that wrap to the next line automatically.

    The code should look something like this:

    Code:
    
    <!-- This is your container that they wrap in -->
    <div style="width: 480px; background-color: #000000;">
    
    
    <!-- Make 10 0f these -->
    <div style="margin: 12px; padding: 12px; width: 216px; display: inline-block;background-color: red; color: #FFFFFF;">
    Tile
    </div>
    
    </div>
    
    
    The trick is the display: inline-block. This allows the div to behave like an inline element that wraps to the next line, while still having div (block) like properties. You might also see people using style="float: left", which simply pushes each block next to the other. Try float: left instead of display:inline-block to see.
     
  3. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    In the production version it is not wise to use inline CSS styling. You always want to separate markup/content from style. Use classes or ID's as appropriate in your markup and add styles to a stylesheet which can be inline in the head or called as a linked style sheet. The reason this is suggested is it's part of forward compatible parsing, a best practice recommended by the W3C, and developers and designers appreciate being able to more easily debug and edit and make sense of the cascade properly. It also offers cleaner markup which makes it more readable, and a better organized/exportable code base.

    I'm not "correcting" you, I am suggesting a best practice approach to bear in mind for the many newbies out there following this.

    @OP:
    Float is the simplest and most common way to affect the document flow, where div's by default are block level and useful as containers. Applying float:left to the appropriate div containers will work universally across all browsers with minimal styling. This is usually is the first method taught since it's so fundamental. Using the display property with inline-block is perfectly acceptable, of course, you'll find there are often many ways in CSS to accomplish the same thing.
     
  4. thread starter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #4
    can you provide an exmaple of code putting one square next to another and then a third below the second square?
     
  5. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    Here ya go:

    Code:
    <html>
    <head>
    <title>Example!</title>
    
    <style>
    
    div {
    width: 100px;
    height: 100px;
    }
    
    div#wrapper {
    width: 100%;
    height: 200px;
    border: 1px solid blue;
    }
    
    div#box1 {
    float: left;
    background-color: yellow;
    }
    div#box2 {
    float: left;
    background-color: red;
    }
    div#box3 {
    clear: left;
    margin-left: 100px;
    background-color: green;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    </div>
    
    </body>
    </html>
    Notice use of floats and clear, standard CSS. I've included a screenshot attachment.

    This is exactly what you asked for, the third box being "below the second" (not the first on a new row) so in box 3 I added in margin-left the same size as box #1 so it aligns with box 2. Remove if you didn't intend that. I also used a wrapper div which is good habit so 1) you can easily identify this row or region from another in your layout and 2) no affect to the document flow for other containers you might add later (maybe another row, or sidebar) - a smart approach in a more complex layout. Get the idea?

    Experiment on your own, let us know if you need any more help! :D
     

    Attached Files:

  6. thread starter macrumors member

    Joined:
    Sep 19, 2013
    Location:
    MI
    #6
    Appreciate it! Thank you.

    one more question, how would i go about making a solid color div, an active link? just scroll over the div and, and if i click, it takes me to another site?

     
  7. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    There are many, many ways to accomplish this, here are two using div with ID "box1" for example:

    1) OnClick in a div:

    Code:
    <div id="box1" onClick="window.location.href='http://www.xyz.com';">1</div>
    
    2) As a function (useful for adding in conditions or other criteria before relocation):

    Add to head section:

    Code:
    <script type="text/javascript">
    <!--//
    
    document.getElementById("box1").onmousedown = function () {
      var ok=confirm('Are you sure you want to leave this site?') 
      if (ok) {
      window.location.href="http://www.xyz.com";
      }
    };
    
    //-->
    </script>
    Might also want to add :hover pseudo class in your CSS so something changes on the mouse hover before click, i.e.:

    div#box1:hover {
    // Whatever
    border-color: 2px solid red;
    }
     
  8. woodlandtrek, Sep 24, 2013
    Last edited: Sep 24, 2013

    macrumors member

    Joined:
    Jan 21, 2008
    #8
    To do it without javascript you'd need to add an a tag inside each div like this:
    Code:
    <div id="wrapper">
    <div id="box1"><a href="http://www.example1.com">1</a></div>
    <div id="box2"><a href="http://www.example2.com">2</a></div>
    <div id="box3"><a href="http://www.example3.com">3</a></div>
    </div>
    Then add a css style to make the anchor tag fill the div:

    Code:
    #wrapper div a {
    display: block;
    height:100%;
    }
    The clickable area will completely fill the div unless you have padding set on the div or margin set on the a tag.

    ----------

    Here's a jsfiddle if you want to play around with it: http://jsfiddle.net/RWmCK/
     

Share This Page