zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildergalerie in Liste oder Div packen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.08.2009, 10:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2009
Beiträge: 8
schogette befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.08.2009, 10:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.08.2009, 10:48
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von schogette Beitrag anzeigen
Doch sollten meine Bilder nicht in einer Linie sein.

Wenn nicht in einer Linie, wie denn denn? Im Kreis? Frei platziert?
Mit Zitat antworten
  #4 (permalink)  
Alt 05.08.2009, 11:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
Wenn nicht in einer Linie, wie denn denn? Im Kreis? Frei platziert?
Ah - gute Frage. Ich bin davon ausgegangen, dass z.B. 3 Bilder nebeneinander stehen sollen und dann die nächste Zeile anfängt.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.08.2009, 11:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2009
Beiträge: 8
schogette befindet sich auf einem aufstrebenden Ast
Standard

sorry, sie sollten frei platziert werden.
Ich habe 5 Bilder die zwar horizontal angelegt werden sollen, daß 2.und 4.
jedoch von der Position etwas tiefer als die anderen.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.08.2009, 11:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Dann kannst du dem 2. und 4. Bild eine Klasse geben, die das Element via margin/padding nach unten schiebt.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.08.2009, 15:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2009
Beiträge: 8
schogette befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.08.2009, 20:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Sollte funktionieren. Zeig mal, was du gemacht hast.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.08.2009, 16:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.08.2009
Beiträge: 8
schogette befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.08.2009, 12:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Gib doch #galerie margin-left. Warum jedem Element einzeln? Das ist doch nicht Sinn der Sache
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:10 Uhr.