|
|||
Bildergalerie in Liste oder Div packen?
Hallo Leute,
ich hätte gerne eine Bildergalerie mit Hover wie hier: Bildergalerie wo die Bilder in einer Liste erstellt worden ist. Doch sollten meine Bilder nicht in einer Linie sein. Kann man das in einer Liste überhaupt bewerkstelligen oder sollte ich statt der Listenelemente jedes Bild in einen Div packen? Bin für Eure Hilfe sehr dankbar. Danke Schogette |
Sponsored Links |
|
|||
Hallo.
Wenn du die Listenelemente floatest und der horizontale Platz nicht mehr ausreicht, brechen die Elemente automatisch um. Ist also mit einer Liste machbar und auch nur diese Lösung ist semantisch korrekt. |
Sponsored Links |
|
|||
Ah - gute Frage. Ich bin davon ausgegangen, dass z.B. 3 Bilder nebeneinander stehen sollen und dann die nächste Zeile anfängt.
|
|
|||
Vielen Dank, hat super funktioniert!
Hier ist das Ergebnis:Band Allerdings gefällts mir noch nicht ganz, wie bekomme ich das Ganze ein wenig nach rechts gerückt? margin-left hat nichts gebracht, hat mir alles verschoben. |
|
|||
Also ich hab dem 2.und 4.Bild eine eigene Klasse zugewiesen.
Hier ist der Code: Code:
#galerie li { list-style-type: none; float:left; margin: 0px 10px 10px 0px; text-align: center; font-weight: bold; position: relative; } #galerie img { width: 110px; height: 130px; display: inline; padding: 2px; border: 1px solid #8B0000; margin-top:270px; } #galerie img.unten { width: 120px; height: 152px; display: inline; padding: 3px; border: 1px solid #8B0000; margin-top:320px; } #galerie a .tooltip { display: none; } #galerie a:hover .tooltip { width: 400px; height: 248px; display: block; position: absolute; top: -50px; left: -70px; z-index: 1; background: #fff; } /*--Spezialangaben für den Internet Explorer 7--*/ *+html #galerie a:hover { z-index: 1;} *+html #galerie li{position: static;} *+html #galerie a {position: relative;} /*--Spezialangaben für den Internet Explorer 6--*/ *html #galerie a:hover {display: block; z-index: 1;} *html #galerie li{position: static;} *html #galerie a {position: relative;} </style> <div id="galerie"> <ul> <li><a href="#"><img src="../images/alex.jpg"><img src="../images/toolalex.jpg" class="tooltip"></a></li> <li><a href="#"><img src="../images/birgit.jpg" class="unten"><img src="../images/toolbirgit.jpg" class="tooltip"></a></li> <li><a href="#"><img src="../images/rene.jpg" ><img src="../images/toolrene.jpg" class="tooltip"></a></li> <li><a href="#"><img src="../images/ena.jpg" class="unten"><img src="../images/toolena.jpg" class="tooltip"></a></li> <li><a href="#"><img src="../images/robin.jpg"><img src="../images/toolrobin.jpg" class="tooltip"></a></li> Wie gesagt wenn ich bei galerie img und galerie img.unten margin-left eingebe,schmeißts mir alle Bilder durcheinander. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 19:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 16:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 15:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 10:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 19:18 |