Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Sep 21, 2013, 09:35 PM   #1
jonpeter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
Need help replicating metro UI tiles! Please and Thank you :D

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!
jonpeter is offline   0 Reply With Quote
Old Sep 21, 2013, 09:42 PM   #2
thejadedmonkey
macrumors 604
 
thejadedmonkey's Avatar
 
Join Date: May 2005
Location: Pa
Send a message via AIM to thejadedmonkey
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.
__________________
MacBook 17" MacBook Pro iPod Nano Apple TV
PS4 Custom Windows 8.1 Desktop WP8.1
"Good judgment comes from experience,
experience comes from bad judgment."
- Mulla Nasrudin
thejadedmonkey is offline   0 Reply With Quote
Old Sep 22, 2013, 12:00 AM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 22, 2013, 11:03 AM   #4
jonpeter
Thread Starter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
Quote:
Originally Posted by SrWebDeveloper View Post
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?
jonpeter is offline   0 Reply With Quote
Old Sep 23, 2013, 04:03 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by jonpeter View Post
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!
Attached Thumbnails
Click image for larger version

Name:	Screen Shot 2013-09-23 at 5.01.48 AM.jpg
Views:	19
Size:	13.1 KB
ID:	435506  
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 24, 2013, 10:51 AM   #6
jonpeter
Thread Starter
macrumors newbie
 
Join Date: Sep 2013
Location: MI
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?

Quote:
Originally Posted by SrWebDeveloper View Post
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 is offline   0 Reply With Quote
Old Sep 24, 2013, 12:15 PM   #7
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by jonpeter View Post
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;
}
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Sep 24, 2013, 03:53 PM   #8
woodlandtrek
macrumors member
 
Join Date: Jan 2008
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/

Last edited by woodlandtrek; Sep 24, 2013 at 03:50 PM. Reason: forgot to add height to a tag
woodlandtrek is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Replicating the way OS X handles multiple displays in Windows cosmicjoke Windows, Linux & Others on the Mac 1 Apr 12, 2014 04:18 PM
Replicating some of Firefox's functionality in Safari Brandon263 Mac Basics and Help 7 May 16, 2013 09:35 AM
iOS Tiles & Widgets dtbratt iOS 6 21 Nov 1, 2012 06:20 PM
Windows 8, is there a way to lock the tiles? spinedoc77 Windows, Linux & Others on the Mac 0 Jun 24, 2012 03:33 PM

Forum Jump

All times are GMT -5. The time now is 12:31 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC