tables vs CSS

I am trying to replace extraneous tables with CSS but I am running into
centering problems.

I want pictures centered left to right (top aligned) in two columns,
with the accompanying title and info lined up with the left edge of the
pictures. Since the pictures are different sizes, I can't just line
them up on the same left edge. It's all in a table with a fixed width of
500px.

You can see the test page at http://www.happymagpie.com/cssvstables.htm
Note the top table is how I want it to layout.
The second is my CSS attempt, and it's just a mess. Either both the
pictures and text align in the center, or they both align to the far
left of the table.
The table and div borders are temporarily turned on but will not be in
the final draft.

I don't expect to be able to do this completely table-free. I just want
to get rid of the nested tables.


Phil

--really bad code----

<style type="text/css">
/* formatting for nested tables */

..diagcell {
padding:2px;
/*width:auto; */
border: solid #990000;
}

..ebg, .ebg2 {
color:#0000CC;
background:white;
font-size:1.5em;
font-weight:bold;
border: 3px dotted #0000CC;
}

/* second Div-table*/

..diagcell2 {
text-align:center;
padding:2px;
width:100%;
border: solid #009900;
}

..diagcell2 td { text-align:center; }

..diagcell3 {
text-align:center;
padding:2px;
width:100%;
border: solid #999900;
}
..ebg2 {text-align:left;}

</style>

--scrap of html--

<table class="diagcell2" border="1" width="500">
<tr>
<td>
<div class="diagcell3">
<div class="ebg2">
AT-ST Walker
</div>
<img src="pics/atst_3bw.gif" name='ATST' alt="My favorite part of
RotJ" height=100 width=100 border=0>
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>

</div>
</td>
<td>

<div class="diagcell3"> <div class="ebg2">
Slave I
</div>
<img src=pics/slavei_2bw.gif name='SLAVEI' alt="Slave I - Fett's ship"
border=0 height=100 width=175 >
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
</div>
</td>
</tr>
<tr>
<td>
<div class="diagcell3">
<div class="ebg2">
Destroyer droid
</div>
<img src=pics/drdka_2bw.gif name='DROIDEKA' alt="Folded and photo'd
by Lar deSouza" height=100 width=110 border=0 >
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
</div>


</td>
<td>

<div class="diagcell3">
<div class="ebg2">
Star Destroyer
</div>
<img src=pics/sdestry_3bw.gif name='ISD' alt="ISD Chimaera"
height=100 width=150 border=0 >
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a> &nbsp;
<a HREF="#">2</a> &nbsp;
<a HREF="#">3</a>
<br>
</div>

</td>
</tr>
</table>

Philip schrieb:

I am trying to replace extraneous tables with CSS but I am running into
centering problems.

You can see the test page at http://www.happymagpie.com/cssvstables.htm
Note the top table is how I want it to layout.

I remember those, it's nice to see your origami again!

What we have here is the usual "image-with-caption" problem, but with an
added twist since you have text above and below the image. Check out
e.g. <http://realworldstyle.com/thumb_float.html> or
<http://css-discuss.incutio.com/?page=FloatLayouts> for some nice
solutions you might be able to adjust.

May the Fold be with you.

Matthias

Matthias Gutfeldt wrote:

Philip schrieb:

I am trying to replace extraneous tables with CSS but I am running into
centering problems.

You can see the test page at http://www.happymagpie.com/cssvstables.htm
Note the top table is how I want it to layout.


I remember those, it's nice to see your origami again!

What we have here is the usual "image-with-caption" problem, but with an
added twist since you have text above and below the image. Check out
e.g. <http://realworldstyle.com/thumb_float.html> or
http://css-discuss.incutio.com/?page=FloatLayouts> for some nice
solutions you might be able to adjust.

May the Fold be with you.

Matthias

Small world! I thought I was looking at the wrong list for a moment.

I had previously seen one of the sites you had mentioned, but didn't
think it applied to me. Finally went back and read both of them
CAREFULLY, and managed to piece it together.

I just need two divs to do it, too.

Thanks for the links,
Phil

(for those of you interested, the final code follows...)
Have only tested it on IE6 and Mozilla 1.4. The issues that kept messing
me up were this:
-IE would center the inner (diagcell) box, but Mozilla refused to do it
until I added the margin-right:auto; and margin-left:auto;

-I had to set an arbitrarily too-small size to the diagcell div.
(without it, the box automatically resized to the larger div, so there
was no effective centering.) Oddly enough, IE would resize the diagcell
div border automatically. Mozilla does not, with the img and text
spilling out. Setting the height:auto solved this. As long as I won't
have borders displayed, this is a non-problem.

-Note the <nobr> tags. They werenecessary for any titles that were wider
than image. I wound up using them judiciously on the text underneath as
well. Not the most flexible solution, but it worked for me.

-Since the pictures were of different sizes, the final boxes were uneven
and the automatic screen wrap was funky.
I wound up putting a clear:both after each row to keep it neat.
Fortunately, this is all in a fixed-width container, so another
non-problem. If I was using a dnamic-sized window, I would have had
problems.


---Css --
<style type="text/css">
..diagtable {
text-align:center;
float:left;
width:235px;
}

..diagcell {
margin-right:auto; /* IE doesn't need these but MOZ does */
margin-left:auto;
text-align:left;
width:100px; /* otherwise it's too big. IE adjusts, but MOZ
overruns. */
height:auto; /* IE doesn't need these but MOZ does */
}
</script>

<div class="diagtable" >
<div class="diagcell" >
<nobr>Long Title</nobr><br>
<img>
Descriptive text.
</div>
</div>

<div class="diagtable" >
<div class="diagcell" >
<nobr>Long Title</nobr><br>
<img>
Descriptive text.
</div>
</div>
<p style="clear:both;" />

Philip wrote:

Matthias Gutfeldt wrote:
Check out e.g. <http://realworldstyle.com/thumb_float.html> or
http://css-discuss.incutio.com/?page=FloatLayouts> for some nice
solutions you might be able to adjust.

May the Fold be with you.


Small world! I thought I was looking at the wrong list for a moment.

Hehe :-).

I had previously seen one of the sites you had mentioned, but didn't
think it applied to me. Finally went back and read both of them
CAREFULLY, and managed to piece it together.

Yippeeeh!


Matthias
Origamians never die. They just unfold.