9 Replies - 13954 Views - Last Post: 20 July 2011 - 03:25 PM

#1 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 08:27 AM

Well I am trying to make something that will look like something along the lines of this:

Posted Image

What planned on doing was making each row into a list and having the other lists under it, each list having 3 items in it.
This is my code, but I feel this is a bad way of doing it, I got it perfect in one browser ( the browser built into komodoedit) then I went on google chrome and its not centred and there are 2 items per line! So is there a better way of doing this or how can I do it correctly this way? Thanks! This is how it turned out: http://electronicnat...onirontemplate/

HTML:
                <div id="latestgames">
                    <h3>Latest Games</h3>
                    <ul>
                    <li><div id="game1">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    <li><div id="game2">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    <li><div id="game3">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    </ul>
                
                    <ul>
                    <li><div id="game4">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    <li><div id="game5">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    <li><div id="game6">
                        <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                    </ul>
                    <ul>
                    <li><div id="game7">
                    <strong>Game Name <br />
                    Game info</strong>
                    </div></li>
                    <li><div id="game8">
                        <strong>Game Name <br />
                     Game info</strong>
                     </div></li>
                    <li><div id="game9">
                    <strong>Game Name <br />
                        Game info</strong>
                    </div></li>
                 </ul>
                </div><!--end games-->



CSS:
#latestgames {
    float: left;
    background: #c4c4c4;
    width: 475px;
    margin-left: 30px;
}

#latestgames ul {
    list-style: none;
    margin-right: 35px;
    margin-left: 35px;
}

#latestgames ul li {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}


This post has been edited by PixelBit: 20 July 2011 - 08:40 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Positioning images in a 3x3 grid sort of layout

#2 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 09:06 AM

Get rid of all the floats, you don't need them and they mess up the layout severely.

Instead use 'display: inline-block' on the #latestgames ul li.

No changes to the HTML and this is what I ended up with for CSS

	#latestgames {
	    background: #c4c4c4;
		width: 475px;
		margin: 0px auto;
	}
	 
	#latestgames ul {
	    list-style: none;
	}
	 
	#latestgames ul li {
		display: inline-block;
	    text-align: center;
		padding: 20px;
	}



*Edit: Man I was incomprehensible the first time, hopefully this is better

**Edit 2: Quick to add, if you are going to increase any of the width/padding/margin within the box make sure you reflect that in the width you set on #latestgames

Also, if you want to get the most out of your HTML then separate the 'Game Name' and 'Game Info' into two different divs with a class to make them bold in CSS (this will also get rid of the need for the <br/>). HTML is for markup CSS is for layout/design.

This post has been edited by MrWobbles: 20 July 2011 - 09:13 AM

Was This Post Helpful? 1
  • +
  • -

#3 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 09:18 AM

View PostMrWobbles, on 20 July 2011 - 09:06 AM, said:

Get rid of all the floats, you don't need them and they mess up the layout severely.

Instead use 'display: inline-block' on the #latestgames ul li.

No changes to the HTML and this is what I ended up with for CSS

	#latestgames {
	    background: #c4c4c4;
		width: 475px;
		margin: 0px auto;
	}
	 
	#latestgames ul {
	    list-style: none;
	}
	 
	#latestgames ul li {
		display: inline-block;
	    text-align: center;
		padding: 20px;
	}



*Edit: Man I was incomprehensible the first time, hopefully this is better

**Edit 2: Quick to add, if you are going to increase any of the width/padding/margin within the box make sure you reflect that in the width you set on #latestgames

Also, if you want to get the most out of your HTML then separate the 'Game Name' and 'Game Info' into two different divs with a class to make them bold in CSS (this will also get rid of the need for the <br/>). HTML is for markup CSS is for layout/design.


Thanks i'll try this now :)

EDIT: never mind my last edit i sorted it :P

This post has been edited by PixelBit: 20 July 2011 - 09:39 AM

Was This Post Helpful? 0
  • +
  • -

#4 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5874
  • View blog
  • Posts: 12,754
  • Joined: 16-October 07

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 10:38 AM

So much markup! You could do something like:
<html>
<head>
<title>3x3</title>
<style type="text/css">
	#latestgames {
		background: #c4c4c4;
		width: 475px;
		margin: 1em auto;
	}

	#latestgames div { display: inline-block; width:30%; margin: 0.5em 0; padding:0; }
	#latestgames div p { text-align: center; margin:0; padding:0; }
	#latestgames div p:first-child { font-weight: bold; }
</style>
</head>
<body>
	<div id="latestgames">
		<p>Latest Games</p>
		<div><p>Game Name1</p><p>Game info1</p></div>
		<div><p>Game Name2</p><p>Game info2</p></div>
		<div><p>Game Name3</p><p>Game info3</p></div>
		<div><p>Game Name4</p><p>Game info4</p></div>
		<div><p>Game Name5</p><p>Game info5</p></div>
		<div><p>Game Name6</p><p>Game info6</p></div>
		<div><p>Game Name7</p><p>Game info7</p></div>
		<div><p>Game Name8</p><p>Game info8</p></div>
		<div><p>Game Name9</p><p>Game info9</p></div>
	<div>
</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#5 BowserYo  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 50
  • Joined: 23-April 11

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 11:24 AM

Here is what I came up with:

Posted Image

#gameContainer
{
	width:575px;
	background-color:black;
	height:725px;
}

#gameBox
{
	width:150px; height:200px;
	background-color:gray;
	float:left;
	margin:20px;
	text-align:center;
}


<div id="gameContainer">
	<div id="gameBox"><p>Game 1</p></div>
	<div id="gameBox"><p>Game 2</p></div>
	<div id="gameBox"><p>Game 3</p></div>

	<div id="gameBox"><p>Game 4</p></div>
	<div id="gameBox"><p>Game 5</p></div>
	<div id="gameBox"><p>Game 6</p></div>

	<div id="gameBox"><p>Game 7</p></div>
	<div id="gameBox"><p>Game 8</p></div>
	<div id="gameBox"><p>Game 9</p></div>
</div<

Was This Post Helpful? 0
  • +
  • -

#6 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 11:25 AM

By the same token we should probably try to be as semantic as possible right?

<html>
<head>
<title>3x3</title>
<style type="text/css">
    #latestgames {
        background: #c4c4c4;
        width: 475px;
        margin: 1em auto;
    }
 
    #latestgames ul{list-style: none;}
    #latestgames ul li { display: inline-block; width:30%; margin: 0.5em 0; padding:0; }
    #latestgames ul p { text-align: center; margin:0; padding:0; }
    #latestgames ul p:first-child { font-weight: bold; }
</style>
</head>
<body>
    <div id="latestgames">
        <h1>Latest Games</h1>
        <ul>
		<li><p>Game Name1</p><p>Game info1</p></li>
		<li><p>Game Name2</p><p>Game info2</p></li>
		<li><p>Game Name3</p><p>Game info3</p></li>
		<li><p>Game Name4</p><p>Game info4</p></li>
		<li><p>Game Name5</p><p>Game info5</p></li>
		<li><p>Game Name6</p><p>Game info6</p></li>
		<li><p>Game Name7</p><p>Game info7</p></li>
		<li><p>Game Name8</p><p>Game info8</p></li>
		<li><p>Game Name9</p><p>Game info9</p></li>
	</ul>
    <div>
</body>
</html>



It is a list of games after all.

This post has been edited by MrWobbles: 20 July 2011 - 11:25 AM

Was This Post Helpful? 0
  • +
  • -

#7 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5874
  • View blog
  • Posts: 12,754
  • Joined: 16-October 07

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 11:51 AM

Hmm.... Don't do this:
	<div id="gameBox"><p>Game 1</p></div>
	<div id="gameBox"><p>Game 2</p></div>



An id should be distinct, unique, not apply to more than one tag. If you want to style multiple items, use class. Note that since this is a div in a div, you needn't use even class, since you can set the style for the inner divs of a named div.
Was This Post Helpful? 1
  • +
  • -

#8 BowserYo  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 50
  • Joined: 23-April 11

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 11:55 AM

View Postbaavgai, on 20 July 2011 - 11:51 AM, said:

Hmm.... Don't do this:
	<div id="gameBox"><p>Game 1</p></div>
	<div id="gameBox"><p>Game 2</p></div>



An id should be distinct, unique, not apply to more than one tag. If you want to style multiple items, use class. Note that since this is a div in a div, you needn't use even class, since you can set the style for the inner divs of a named div.


Interesting, I didn't know that...
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 12:44 PM

I would suggest the <li> idea myself. More semantically correct and if your site goes nude (No CSS) it will retain readability and flow.

The goal of any site is that if the CSS is gone that it retains its value in information. Doing this will force you to write better and more relevant code, and in many cases less code.

The id class bit is interesting to get at first but Baav is right in that regard.

CSS3 does make this type of thing substantially easier to accomplish as well. Just make sure to set the list-style to none to avoid bullets.

The ultimate goal in css id and class is to use as few as possible to create the same result. This makes the site far more modular and controllable if you should ever decide to change the layout. It also makes code far easier to navigate and even makes your pages load faster.
Was This Post Helpful? 0
  • +
  • -

#10 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Positioning images in a 3x3 grid sort of layout

Posted 20 July 2011 - 03:25 PM

Thanks for all the input guys! I will look over it all properly tomorrow when im not half dead ! :) I really appreciate the help!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1