Stylesheets - Three equally separated images

Author

Three equally separated images

arbeizaf@ono.com

2005-11-22, 3:22 am

Hi:

I am using CSS instead of tables for the layout of a webpage but I
don't know how to do something.

I need to place three images with the same distance among them and the
border of the page. Something like this:

---------------------------------------------
| |
| --------- --------- --------- |
| x | Image 1 | x | Image 2 | x | Image 3 | x |
| --------- --------- --------- |
| |
---------------------------------------------

Where the length x should be the same.

Using tables, an example of what I am asking:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Test </title>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
td {
width: 200px;
border-style: solid;
text-align: center;
}
td.auto {
width: auto;
}
</style>
</head>
<body>
<table>
<tr>
<td class="auto"> </td>
<td> Image 1 </td>
<td class="auto"> </td>
<td> Image 2 </td>
<td class="auto"> </td>
<td> Image 3 </td>
<td class="auto"> </td>
</tr>
<tr>
<td class="auto"> </td>
<td> Image 4 </td>
<td class="auto"> </td>
<td colspan="4"> content </td>
</tr>
</table>
</body>
</html>

Is it possible to do it using <div> instead of tables for this layout?

Thanks in advance,
--
Fernando Arbeiza

Martin Eyles

2005-11-22, 7:16 pm

I would recomend a list. Something like:-

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Test </title>
<style type="text/css">
ul.imageList {

list-style: none;
margin: 10px
}
ul.imageList li {
list-style: none;
display: inline
margin: 10px
}
</style>
</head>
<body>
<ul class="imageList">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
</ul>
</body>
</html>

You can set the margins to whatever you like, and if you want, you can set
the width of the <ul>, or leave it blank to flow the whole set of images. To
limit the no. of pictures in a row and fit the page width may be a bit
trickier though. Maybe margin:auto, and some <br />s. dunno

Martin

--
Martin Eyles
martin.eyles@NOSPAM.bytronic.com

<arbeizaf@ono.com> wrote in message
news:1132645921.883379.132030@o13g2000cwo.googlegroups.com...
> Hi:
>
> I am using CSS instead of tables for the layout of a webpage but I
> don't know how to do something.
>
> I need to place three images with the same distance among them and the
> border of the page. Something like this:
>
> ---------------------------------------------
> | |
> | --------- --------- --------- |
> | x | Image 1 | x | Image 2 | x | Image 3 | x |
> | --------- --------- --------- |
> | |
> ---------------------------------------------
>
> Where the length x should be the same.
>
> Using tables, an example of what I am asking:
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
> <head>
> <title> Test </title>
> <style type="text/css">
> table {
> width: 100%;
> border-collapse: collapse;
> }
> td {
> width: 200px;
> border-style: solid;
> text-align: center;
> }
> td.auto {
> width: auto;
> }
> </style>
> </head>
> <body>
> <table>
> <tr>
> <td class="auto"> </td>
> <td> Image 1 </td>
> <td class="auto"> </td>
> <td> Image 2 </td>
> <td class="auto"> </td>
> <td> Image 3 </td>
> <td class="auto"> </td>
> </tr>
> <tr>
> <td class="auto"> </td>
> <td> Image 4 </td>
> <td class="auto"> </td>
> <td colspan="4"> content </td>
> </tr>
> </table>
> </body>
> </html>
>
> Is it possible to do it using <div> instead of tables for this layout?
>
> Thanks in advance,
> --
> Fernando Arbeiza
>

Spartanicus

2005-11-22, 7:16 pm

"arbeizaf@ono.com" <arbeizaf@ono.com> wrote:

>I am using CSS instead of tables for the layout of a webpage but I
>don't know how to do something.
>
>I need to place three images with the same distance among them and the
>border of the page. Something like this:
>
> ---------------------------------------------
> | |
> | --------- --------- --------- |
> | x | Image 1 | x | Image 2 | x | Image 3 | x |
> | --------- --------- --------- |
> | |
> ---------------------------------------------
>
>Where the length x should be the same.

http://homepage.ntlworld.ie/spartan...aced_images.htm

1) This should probably be done with a CSS table, but due to IE not
supporting those a hack is required.
2) My arithmetic skills are lousy, you'll have to devise the formula for
calculating the "left" offsets yourself (I did it by eye).
3) The images do not wrap if the viewport width isn't sufficient (a hor
scrollbar is produced).
4) It requires a min-width hack for IE, I threw in something ugly
because I got bored with it.

--
Spartanicus

arbeizaf@ono.com

2005-11-23, 6:27 am

Tanks a lot, it works like a charm!

I have no problem with the wrapping if the view port width is not
sufficient, so I have simplified it to devise a formula. Perhaps it is
useful to someone else:

If we have n images of width w px:

HTML:

<div class="wrap">
<img class="image_1" src="1.jpg" />
<img class="image_2" src="2.jpg" />
. . .
<img class="image_i" src="i.jpg" />
. . .
<img class="image_n" src="n.jpg" />
</div>

CSS:

div.wrap img {
position: absolute;
top: auto;
}

and for image i:

div.wrap img.image_i {
margin-left: m%;
left: lpx;
}

where
m = 100 * i / (n + 1)
l = (1 - (i / (n + 1))) * w

Thanks for your answers
--
Fernando Arbeiza