PDA

View Full Version : This SHOULD be simple - centering image containers in a horizontal row



DeaDLocK
Dec 5th, 2006, 05:52 PM
Edited to read better:

I have this code:


<body>
<div style="width: 150px; height:150px; border:1 solid red; float: left">111</div>
<div style="width: 150px; height:150px; border:1 solid red; float: left">222</div>
<div style="width: 150px; height:150px; border:1 solid red; float: left">333</div>
</body>


What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.

It must also fulfill this criteria:

1) Be on the same line

2) Be fixed-size

3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop

4) Work for any number of boxes (rules out editing of margins to hack it visually)

You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it.

Excavator
Dec 5th, 2006, 05:58 PM
Hello DeaDLocK,
See if this doesn't work...
markup:


<div class="float"><a href="http://link.htm"><img src="picture.jpg" border="0"></a><br />could be a title here
</div>

CSS:

.float {
float: left;
margin-top: 15px;
margin-bottom: 2px;
margin-left: 2%;
font-family: "Comic Sans MS";
font-size: 1em;
color: #FFFFFF;
}

DeaDLocK
Dec 5th, 2006, 06:04 PM
Nope, still sticks to the left. Left margin changes when window is resized, but the div is still on the left and is not centered.

Thanks.

_Aerospace_Eng_
Dec 5th, 2006, 06:11 PM
How do you expect us to help if you haven't posted any code or a link? We aren't psychic you know. Help us help you.

DeaDLocK
Dec 5th, 2006, 06:20 PM
Sorry - I thought my explanation and picture would suffice. Here's some basic code to demonstrate what I'm trying to do.


<body>
<div style="width: 150px; height:150px; border:1 solid red; float: left">111</div>
<div style="width: 150px; height:150px; border:1 solid red; float: left">222</div>
<div style="width: 150px; height:150px; border:1 solid red; float: left">333</div>
</body>


What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.

It must also fulfill this criteria:

1) Be on the same line

2) Be fixed-size

3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop

You don't have to use DIVs - anything will do. But I've not been able to find a way of doing it.

Excavator
Dec 5th, 2006, 06:25 PM
DeaDLocK it sticks to the left because that's the way it's styled right now.

I just gave you the example so you would have a class that you could style to your liking.
Try changing margin or padding on .float and see how that works for you.

DeaDLocK
Dec 5th, 2006, 06:30 PM
Ah, sorry Excavator. :o

Using margins wouldn't work though as the number of images changes dynamically based on how many items there are in a client-edited XML file.

So whether there are two divs in there or five, I need them so center horizontally. So only something that actually centers it would work, and visual hacks won't.

Sorry I should have made that clear.

Excavator
Dec 5th, 2006, 06:38 PM
Ok, I re-read your description. The "Be on the same line" may be what threw me...

Try this:

<style type="text/css">
html, body {
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
height: 152px;
width: 456px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
text-align: center;
margin: 0px;
padding: 0px;
}
.pic {
float: left;
height: 150px;
width: 150px;
border: 1px solid #CC0000;
}
</style>
</head>

<body>
<div id="wrapper">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
</body>
</html>


You could add a red border to the wrapper so all the borders would appear the same...

DeaDLocK
Dec 5th, 2006, 06:53 PM
Thanks so much for the effort Excavator, but in this example the "pic" divs are all against the left wall of the "wrapper" div.

If you can get them to be centred within the wrapper div then you've cracked it. The benchmark for this is when a div needs to wrap to the next line - does it appear left-aligned with all the others, or is it in the centre? f you can get it to shift to the centre, you are a genius.

Thanks again.

Excavator
Dec 5th, 2006, 07:12 PM
Hahaha, I'm surely no genius - I think I'm proving that now!

Try this - used a min-width hack...


<style type="text/css">
html, body {
text-align: center;
margin: 0px;
padding: 0px;
}
.wrapper {
width:50%;
min-width:400px;
margin:0 auto;
}
/* hack for IE6 */
* html .minwidth {
border-left:400px solid #fff;
position:relative;
float:left;
z-index:1;}
* html .container {
margin-left:-400px;
position:relative;
float:left;
z-index:2;
text-align:left;}
.pic {
height: 150px;
width: 150px;
border: 1px solid #CC0000;
display: inline-block;
float: left;
margin-left: 5px;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="minwidth">
<div class="container">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
Dec 5th, 2006, 07:12 PM
Try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.piccontain {
width:450px;
margin:0 auto;
padding:0;
list-style:none;
}
.piccontain li {
width:150px;
height:150px;
line-height:150px;
text-align:center;
background:#F00;
float:left;
}
</style>
</head>
<body>
<ul class="piccontain">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>

Excavator
Dec 5th, 2006, 07:24 PM
Hi _Aerospace_Eng_,
You did the same thing I did... that works fine till you put more images in.


4) Work for any number of boxes (rules out editing of margins to hack it visually)

This is kind of fun!

DeaDLocK
Dec 5th, 2006, 07:26 PM
Try this - used a min-width hack...
Nope - same problem. It left-aligns against a centred object.

DeaDLocK
Dec 5th, 2006, 07:30 PM
I'm beginning to think that this is impossible even though what I want to acheive visually should be really simple.

Thanks aerospace, but with your code and this body:


<ul class="piccontain">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>

I end up with this:



--------------------------------
| |
| ---------------------- |
| | | | | |
| | 111 | 222 | 333 | |
| | | | | |
| ---------------------- |
| | | | |
| | 444 | 555 | |
| | | | |
| --------------- |
| |
--------------------------------

When what I need is:



--------------------------------
| |
| ---------------------- |
| | | | | |
| | 111 | 222 | 333 | |
| | | | | |
| ---------------------- |
| | | | |
| | 444 | 555 | |
| | | | |
| --------------- |
| |
--------------------------------

Basically it has the same problem as Excavator's wrapping solution above - the boxes are not getting centred; they are just being anchored to the left of an object that is centred.

Excavator
Dec 5th, 2006, 08:19 PM
Ok, I think I've got it.
Check out http://www.nopeople.com/CSS/thumbnail%20presentation/

It validates except for the inline-block switch that W3C doesn't like yet...

_Aerospace_Eng_
Dec 5th, 2006, 11:11 PM
I didn't read rule #4 sorry.

inline-block is valid css 2.1

Excavator
Dec 5th, 2006, 11:43 PM
inline-block is valid css 2.1

I know - which bugs me even more when it doesn't validate! I like validating everything I do and I've used inline-block several times in just the last few days...
So who keeps W3C updated?

_Aerospace_Eng_
Dec 6th, 2006, 06:19 AM
You can change the css profile used to validate.
http://jigsaw.w3.org/css-validator/validator-text

ahallicks
Dec 6th, 2006, 02:36 PM
Could you not just wrap each line of images in a separate div? Meh!

Excavator
Dec 6th, 2006, 06:48 PM
Could you not just wrap each line of images in a separate div? Meh!

We tried that in the first 4 attempts.
Can you make the separate divs work???