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

jonpeter · Sep 21, 2013

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!

thejadedmonkey · Sep 21, 2013

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.

SrWebDeveloper · Sep 21, 2013

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.

jonpeter · Sep 22, 2013

SrWebDeveloper said:
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.

can you provide an exmaple of code putting one square next to another and then a third below the second square?

SrWebDeveloper · Sep 23, 2013

jonpeter said:
can you provide an exmaple of code putting one square next to another and then a third below the second square?

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!

jonpeter · Sep 24, 2013

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?

SrWebDeveloper said:
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!

SrWebDeveloper · Sep 24, 2013

jonpeter said:
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?

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;
}

woodlandtrek · Sep 24, 2013

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/

Search

Search

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

jonpeter

macrumors member

thejadedmonkey

macrumors G3

SrWebDeveloper

macrumors 68000

jonpeter

macrumors member

SrWebDeveloper

macrumors 68000

Attachments

jonpeter

macrumors member

SrWebDeveloper

macrumors 68000

woodlandtrek

macrumors member

Our Staff