nicht angemeldet
Hallo,
ich hab mich schon doof und dusselig gesucht, und wahrscheinlich find ich deswegen jetzt auch keine Lösung mehr für folgendes Problem:
Das Layout soll 7 Bilder nahtlos kombinieren, und zwar so:
| | 2-1 | 3-1 | 4-1 | |
| 1 |-----|-----|-----| 5 |
| | 2-2 | 2-2 | 4-2 | |
Alle Bilder, auch die halben, sollen später verlinkt oder mit :hover ausgetauscht werden, da hab ich auch schon was gefunden
Doch schon weit vorher fängt das Problem an:
-
Mit dem Quellcode unten bekomme ich per Tabelle alles nahtlos angeordnet -- aber nur in IE (6.0.x), während in den Mozilla/Firefox/Netscape zwischen den Teilbildern in der Vertikalen immer eine Lücke bleibt :((
Alle Tipps in den verschiedenen Foren reden nur davon, dass Mozilla das Boxmodell korrekt interpretiert und solche Lücken im IE auftreten...??? -
Sobald ich jetzt einen Link um ein Teilbild reinsetze, krieg ich überall weiße Zwischenräume, weil um dieses Bild ein blauer Rahmen erscheint -- sowohl in Mozilla als auch in IE. Kann gerad nicht mehr denken, vielleicht ist das jetzt ganz simpel...
-
deshalb: Hat vielleicht jemand eine Idee, wie ich das Layout in CSS mit :float etc hinbekomme? Ich schaffe da nur dreispaltige Layouts, und die unteren Bildhälften flutschen sowieso immer weg... Vielleicht absolut positionieren?
Dank für alle Tipps schon mal im Voraus,
karina
<head>
<style type="text/css">
table {border-collapse:collapse; border-spacing:0;}
tr { padding:0px; border:0;}
td { padding:0px; border:0;}
div#oben {display: block; margin: 0; padding:0; }
</style>
</head>
<body>
<div align="center" id="oben" >
<table>
<!--obere hälfte bilder-->
<tr>
<td rowspan="2"><img src="blau_2.gif" width="72" height="142" /></td>
<td><img src="blau_3-1a.gif" width="213" height="70" /></td>
<td><img src="blau_4-1a.gif" width="165" height="70" /></td>
<td><img src="blau_5-1a.gif" width="202" height="70" /></td>
<td rowspan="2"><img src="blau_6a.gif" width="150" height="142" /></td>
</tr>
<!--untere hälfte bilder-->
<tr>
<td><img src="blau_3-2a.gif" width="213" height="72" /></td>
<td><img src="blau_4-2a.gif" width="165" height="72" /></td>
<td><img src="blau_5-2a.gif" width="202" height="72" /></td>
</tr>
</table>
</div>
</body>