• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wrapper Border Problem

Christi24

Neues Mitglied
Hallo,

ich habe 12 Grafiken in einer Reihe stehen. Je nachdem wie groß das Browserfenster ist brechen die Grafiken in die nächste Zeile um.
Soweit kein Problem. Nun muss ich um die Grafiken einen Border machen (Solid 1px #AAA). Wenn ich nun die normale Bordereigenschaft
verwenden würde wäre dieser bei einem Umbruch 2px groß (also 1px von der oberen Zeile und 1px von der unteren Zeile = 2px).
Ich habe das nun so erstmal "gelößt":

Code:
<style type="text/css">
body {
    background-color: #fff;
}
img {margin-right:1px; margin-bottom:1px;}

#wrapper1000 { width:1000px; border-top:1px solid #AAA; border-left:1px solid #AAA;}
#wrapper500 { width:500px;  border-top:1px solid #AAA; border-left:1px solid #AAA;}

</style>

<div id="wrapper1000"><table width="100%" border="0" cellspacing="0" cellpadding="0"  bgcolor="#AAAAAA" style="border-top:1px solid #AAA; border-left:1px solid #AAA;">
  <tr>
    <td><img src="bild1.gif" width="78" height="50" /><img src="bild2.gif" width="78" height="50" /><img src="bild3.gif" width="78" height="50" /><img src="bild4.gif" width="78" height="50" /><img src="bild5.gif" width="78" height="50" /><img src="bild6.gif" width="78" height="50" /><img src="bild7.gif" width="78" height="50" /><img src="bild8.gif" width="78" height="50" /><img src="bild9.gif" width="78" height="50" /><img src="bild10.gif" width="78" height="50" /><img src="bild11.gif" width="157" height="50" /><img src="bild12.gif" width="315" height="50" /></td>
  </tr>
</table></div>

So, die Frage die ich nun hätte wäre folgende: Schiebe ich nun das Fenster kleiner dann ist der Hintergrund je nach Größe oftmals ein graues Feld. Ich möchte ja aber einen sauberen 1px breiten Rahmen haben. Hat jemand eine Idee wie ich diesen Rahmen hinbekomme?

Danke für die Info
 
Soweit ich dein Problem verstanden habe, wird das nur mit JavaScript/JQuery machbar sein.

Die Tabelle nimmt die Breite von seinem Elternelement an. (weshalb auch die Breitenangabe des wrappers keinen Sinn macht) Wird das Fenster kleiner passt sich die Breite dem Viewport an. Das Bild wird aber dann in die naechste Zeile verschoben, wenn es nicht mehr Platz hat. Die Tabelle nimmt aber immer noch den restlichen Platz ein.

Mit JavaScript kannst du die Breite des Viewports auslesen, damit die Breite der Tabelle berechnen und diese so anpassen. Ansonsten wirst du immer diesen Rand/grauen Block haben.

Wenn du die Loesung mit JavaScript waehlst, kannst du den kompletten Border auch einfach dem wrapper zuweisen..

Hoffe ich konnte dir ein wenig helfen.

mfg
 
Zurück
Oben