[PixelBit]

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



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

[MrWobbles]

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

[PixelBit]

MrWobbles, 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

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

[baavgai]

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>

[BowserYo]

Here is what I came up with:

#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<

[MrWobbles]

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

[baavgai]

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.

[BowserYo]

baavgai, 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...

[Lemur]

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.

[PixelBit]

Thanks for all the input guys! I will look over it all properly tomorrow when im not half dead ! I really appreciate the help!