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>
<a HREF="#">2</a>
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a>
<a HREF="#">2</a>
<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>
<a HREF="#">2</a>
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a>
<a HREF="#">2</a>
<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>
<a HREF="#">2</a>
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a>
<a HREF="#">2</a>
<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>
<a HREF="#">2</a>
<a HREF="#">3</a>
<br>
Large <a HREF="#">1</a>
<a HREF="#">2</a>
<a HREF="#">3</a>
<br>
</div>
</td>
</tr>
</table>