nicht angemeldet
Hallo
Ich beziehe mich mal auf die angegebene Seite.
Vielleicht würde dir etwas anderer Code generell entgegen kommen.
Grundsätzlich handelt es sich um eine List.
<ul>
<li></li>
...
</ul>
Jeder Listenpunkt beinhaltet drei Punke:
a) ein Vorschau-Panoramabild.
b) 3symbole für Files, die mit einem Betrachter verbunden sind.
Diese Symbole würden gerne in einem Bercih mit weissem Hintergrund stehen.
c) Eine verbale Erläuterung.
Den Code sehe ich so:
<ul id="tour">
<li>
<a class=preview ><img src="" alt="info"></a>
<div class=viewers>
<a ...><img ...></a>
...
</div>
<div class=description>
<h4>Titel</h4>
<p>Die Beschreibung</p>
</div>
</li>
...
</ul>
Nun das CSS.
Zuerst die Liste des Listentypischen berauben.
#tour, #tour li {margin:0; padding:0}
Wir arbeiten mit floats.
.preview, .viewers, .description{
float:left;
}
Wir arbeiten mit festen Weiten
.preview {width: 200px;}
Wir formatieren die viewer
.viewer{
width:80px;
background-color:#fff;
padding:5px;
margin: 0px 10px;
}
.description {
background-color:#444;
padding:0.5em;
margin: 0px 10px;
}
Wir definieren keine Breite bei Description, weil einfach der restliche Raum aufgebraucht werden soll.
Was passiert mit den Floats, wenn der Bildschirm schmaler ist?
Der Beschreibungstext fällt unter die Viewer-Icons.
Das mal als Idee:
valign und halign spielen keine Rolle mehr im Code.
Achtung, da sind alle Arten von Bugs mit dem MSIE im Zusammenhang mit floats.
Einfach den Code mal antesten und schauen ob es behagt.
mfg Beat