...

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



DeaDLocK
12-05-2006, 04: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
12-05-2006, 04: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
12-05-2006, 05: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_
12-05-2006, 05: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
12-05-2006, 05: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
12-05-2006, 05: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
12-05-2006, 05: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
12-05-2006, 05: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
12-05-2006, 05: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
12-05-2006, 06: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_
12-05-2006, 06: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
12-05-2006, 06: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
12-05-2006, 06:26 PM
Try this - used a min-width hack...
Nope - same problem. It left-aligns against a centred object.

DeaDLocK
12-05-2006, 06: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
12-05-2006, 07: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_
12-05-2006, 10:11 PM
I didn't read rule #4 sorry.

inline-block is valid css 2.1

Excavator
12-05-2006, 10: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_
12-06-2006, 05:19 AM
You can change the css profile used to validate.
http://jigsaw.w3.org/css-validator/validator-text

ahallicks
12-06-2006, 01:36 PM
Could you not just wrap each line of images in a separate div? Meh!

Excavator
12-06-2006, 05: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???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum