zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Bildergalerie mit Bildunterschrift, Bilder nebeneinander

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2006, 23:20
Benutzerbild von CvH
CvH CvH ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 18
CvH befindet sich auf einem aufstrebenden Ast
Standard Bildergalerie mit Bildunterschrift, Bilder nebeneinander

Hallo zusammen,

ich will eine Bildergalerie mit CSS umsetzen. In meiner "Bibel" (Seibert/Hoffmann: Professionelles WebDesign mit (X)HTML und CSS) steht der Tipp drin, dass man das mit Definitionslisten machen soll, allerdings steht da leider nicht drin, wie ich die Elemente dann mit CSS anordnen kann.

Optik der Seite soll wie im Anhang sein, nur mit Bildunterschriften zusätzlich.

Ohne CSS-Formatierung der Definitionsliste sieht die Seite im Augenblick wie folgt aus: http://www.webdaisy.de/coton/welpen/coton.htm.

Kann mir jemand sagen, wie ich die Beschriftungen nun unter die Bilder kriege und die kleinen Bilder alle brav nebeneinander in zwei Zeilen?

Danke und Gruß
Catharina

PS: kann man das Tauschen des großen Bildes bei Berührung eines kleinen eigentlich auch mit CSS machen statt mit Javascript?
Angehängte Grafiken
Dateityp: jpg Bildergalerie.jpg (35,9 KB, 37x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.07.2006, 00:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das Grundprinzip: http://xhtmlforum.de/41008-unter-jed...-ein-text.html
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.07.2006, 00:39
Benutzerbild von CvH
CvH CvH ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 18
CvH befindet sich auf einem aufstrebenden Ast
Blinzeln habe Lösung selbst gefunden :-))

Hallo, es hat mir keine Ruhe gelassen und jetzt habe ich die Lösung für die Galerie-Anordnung selber gefunden:

Code in der HTML-Seite:
Code:
<dl>
		<dt><img src="lilli_01.jpg"></dt>
		<dd>Lilli</dd>
		<dt><img src="dummy_01.jpg"></dt>
		<dd>Dummy</dd>
</dl>
zugehöriges CSS:
Code:
#inhalt dl img{
	float: none;
	margin: 5px;
	padding: 0px;
}
#inhalt dt{
	float: none;
	display:inline;
}
#inhalt dd{
	float: left;
	width: 120px;
	margin: 5px;
	padding: 0px;
	display:block;
	text-align:center;
}
Sie funktioniert so auf jeden Fall schonmal, wie Ihr hier sehen könnt:
http://www.webdaisy.de/coton/welpen/coton.htm

Trotzdem ist meine Frage mit dem Wechseln des Bildes ohne Javascript noch offen.

Danke und Gute Nacht
Catharina
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2006, 00:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von CvH
Wechseln des Bildes ohne Javascript noch offen.
Schau mal da http://www.cssplay.co.uk/menu/gallery.html
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2006, 01:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Deine Lösung funktioniert weder im Opera (7-9) noch im Safari, das solltest Du also nochmal überarbeiten (siehe mein Link).

Einige Galerien mit der gewünschten Funktion ohne JS gibt es auf cssplay.co.uk, den genauen Link habe ich jetzt leider nicht parat.

EDIT: Viiieeel zu langsam, genauer Link siehe oben
Mit Zitat antworten
  #6 (permalink)  
Alt 07.08.2006, 21:41
Benutzerbild von CvH
CvH CvH ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.06.2006
Beiträge: 18
CvH befindet sich auf einem aufstrebenden Ast
Unglücklich

Zitat:
z.B. mit einer <dl> für jedes Modell: in <dt> das Bild und in <dd> die Typenbezeichnung. Dann <dl> eine einheitliche Höhe & Breite geben, links floaten lassen und abschließend clearen.
Hallo Heiko,

ich probiere mich dumm und dusselig, aber es klappt einfach nicht. Die Liste ist in der HTML-Datei ja bereits so angelegt. Zum "clearen" (damit habe ich immer so meine Schwierigkeiten) habe ich am Ende vor dem Schließen der Liste noch ein
Code:
<dt style="clear:both"></dt>
eingefügt. Richtig so?

Die Texte landen einfach nicht unter den Bildern, sondern immer daneben. Kannst Du mal ein konkretes Beispiel posten, an dem ich dann herumexperimentieren kann?

Danke und verzweifelte Grüße
Catharina
Mit Zitat antworten
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
Video von youtube responsive in Webseite einbauen R14 (X)HTML 1 28.01.2019 22:39
Zwei Bilder nebeneinander, sollen kleiner werden! cecyle CSS 1 12.01.2014 19:20
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 09:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:43 Uhr.