...

View Full Version : Centered, wrapping grid - help



jimctierney
08-05-2011, 03:41 PM
Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:
http://jimtierneyart.com/grid1.jpg

...and when I add new content:
http://jimtierneyart.com/grid2.jpg

I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">

body {
margin : auto;
}

.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}

.item {

line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}

img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}



</style>




</head>

<body>
<div class="wrapper">

header

<BR>
<BR>




<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>


</div>
</body>
</html>

I need 2 things to happen:

1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.

Deep Thought
08-05-2011, 05:30 PM
Ooh, vertical centering? That's been a tough one for a while. The best guide I've found so far is http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (use the first code, not the second), but yeah, there's no "simple" solution.

Hope that helps.

jimctierney
08-05-2011, 05:35 PM
Thanks for the help. I guess I might just end up centering each thumbnail on a case-by-case basis.

However, I still don't know whey the auto margins on the main container div are not working to center the grid... any ideas on that?

resdog
08-05-2011, 05:46 PM
get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.

Deep Thought
08-05-2011, 05:49 PM
get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.I think he's trying to center the colored boxes, not the overall div.

alykins
08-05-2011, 05:50 PM
get rid of the margin:auto assigned to your body element. Doing that will allow your .wrapper to be centered.

in addition (and with regards to your vertical "centered" problem)
If I am reading this correctly you are vertical-align:middle; -ing images correct? I am pretty sure that is one of the only things vertical-align actually works fluidly on... (could be wrong, I almost never center vertically- worth a try)

resdog
08-05-2011, 05:51 PM
maybe, but the site I saw had that all figured out, and he addressed the vertical boxes issue before asking the question about the "main container div", so thought I would supply a response to that.

jimctierney
08-05-2011, 06:19 PM
in addition (and with regards to your vertical "centered" problem)
If I am reading this correctly you are vertical-align:middle; -ing images correct? I am pretty sure that is one of the only things vertical-align actually works fluidly on... (could be wrong, I almost never center vertically- worth a try)

I was able to easily re-center the wrapper, but adding "vertical-align:middle;" to the images didn't help.

Here's an update on my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">


.wrapper {
width:900px;
border:1px solid #bbbbbb;
margin:50px auto;
}

.item {
display:table-cell;
text-align:center;
float:left;
line-height:100px;
width:223px;
height:223px;
border:1px solid #dddddd;
background:#EBEBEB;
}

img.a {
vertical-align:middle;
max-width:120px;
border:0;
max-height:175px;
}



</style>




</head>

<body>
<div class="wrapper">

header

<BR>
<BR>


<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>

<div class="item">
<img class="a" src="image.gif">
</div>


</div>
</body>
</html>

alykins
08-05-2011, 06:22 PM
vertical-align needs to be on the parent element



<div style="vertical-align:middle;">
<img src="blah" />
</div>


again, i do not do a whole h*ll of a lot of vertical "centering" and what I have done has been bored "toying" so idk if it will work or not; but to the best of my knowledge the vertical-align is designed for use with images

Deep Thought
08-05-2011, 06:29 PM
Vertical-align doesn't usually work on images. It's usually used to vertically align text relative to inline images, which isn't the case here. Have you tried http://www.jakpsatweb.cz/css/css-vertical-center-solution.html?

jimctierney
08-05-2011, 06:55 PM
vertical-align needs to be on the parent element



<div style="vertical-align:middle;">
<img src="blah" />
</div>


again, i do not do a whole h*ll of a lot of vertical "centering" and what I have done has been bored "toying" so idk if it will work or not; but to the best of my knowledge the vertical-align is designed for use with images


I've taken vertical-align out of the img tag, and added it to the "item" div, but still nothing.

On another note, I was successful in vertically centering the images, but the grid no longer wraps after 4 columns:

http://jimtierneyart.com/test/test2.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">


.wrapper {
width:900px;
border:1px solid #bbbbbb;
margin:50px auto;
}

.item {
display: table-cell;
text-align: center;
vertical-align: middle;
width:223px;
height:223px;
border:1px solid #dddddd;
background:#EBEBEB;
}





.item * {
vertical-align: middle;
}

/*\*//*/
.item {
display: block;
}


.item span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.item span {
display: inline-block;
height: 100%;
}
</style><![endif]-->








</style>




</head>

<body>
<div class="wrapper">

header

<BR>
<BR>


<div class="item"><span></span>
<img src="image2.gif">
</div>

<div class="item"><span></span>
<img src="image2.gif">
</div>

<div class="item"><span></span>
<img src="image2.gif">
</div>

<div class="item"><span></span>
<img src="image2.gif">
</div>

<div class="item"><span></span>
<img src="image2.gif">
</div>

<div class="item"><span></span>
<img src="image2.gif">
</div>

</div>
</body>
</html>




It seems the "float:left" needs to be deleted in order for them to center...but I want both! Any way to do this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum