CSS-Problem mit relativer Ausrichtung

rodaroda · 14.03.2010, 16:58

Hallo

Ich habe eine schönes Bild-Galerie gefunden bei Lightweight Image Gallery with*Thumbnails*|*David’s kitchen und wollte diese anpassen. Klappt alles wunderbar, bis auf ein Problem: Wenn ich die Seite zentrieren will, wird mir das grosse Bild relativ zur kleinen Vorschau angezeigt.
Mein Versuch: http://äts.ch/teppiche/
Das Problem liegt im CSS hier:

Code:

#jgal li img {
position: absolute;
top: 107px;
margin-left:200px;
display: none;
height:296px;
width:500px}

Die absolute Position von 107px top ist ok, denn die ändert ja nie. Hingegen ändert die horizontale Position natürlich ja nach Breite des Browserfensters. Ich muss also margin-left irgendwie anpassen können, damit das Bild nicht nur beim Anklicken einer Vorschau in der ersten Spalte richtig positioniert wird.

Wäre schön, wenn mir jemand von euch einen Tipp geben könnte - ein grosser Dank im Voraus.

rodaroda

Manko10 · 14.03.2010, 17:04

Code:

margin-left: auto;
margin-right: auto;

funktioniert aber nicht mit position: absolute. Da kannst du es nur per

Code:

left: 50%;
margin-left: -250px; /* Hälfte der Breite */

machen, wobei du sicherstellen solltest, dass es kein positioniertes Elernelement mit einer Breite != 100% gibt.

rodaroda · 14.03.2010, 18:03

Hallo Manko10

Funktioniert perfekt. Danke!

rodaroda

Manko10 · 14.03.2010, 18:46

Dann noch fix den

Zitat:

Beitrag als erledigt markieren!

Danke!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit relativer Angabe von ErrorDocuments	MaMo-Net	Server, Hosting und Workstations	3	29.03.2009 15:11
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Text rendern => Fontgröße ändert Ausrichtung	M3g4Star	PHP Tipps 2007	19	29.03.2007 14:43
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

14.03.2010, 16:58
rodaroda Neuer Benutzer Registriert seit: 27.08.2008 Beiträge: 17 PHP-Kenntnisse: Anfänger	CSS-Problem mit relativer Ausrichtung Hallo Ich habe eine schönes Bild-Galerie gefunden bei Lightweight Image Gallery withThumbnails\|*David’s kitchen und wollte diese anpassen. Klappt alles wunderbar, bis auf ein Problem: Wenn ich die Seite zentrieren will, wird mir das grosse Bild relativ zur kleinen Vorschau angezeigt. Mein Versuch: http://äts.ch/teppiche/ Das Problem liegt im CSS hier: Code: #jgal li img { position: absolute; top: 107px; margin-left:200px; display: none; height:296px; width:500px} Die absolute Position von 107px top ist ok, denn die ändert ja nie. Hingegen ändert die horizontale Position natürlich ja nach Breite des Browserfensters. Ich muss also margin-left irgendwie anpassen können, damit das Bild nicht nur beim Anklicken einer Vorschau in der ersten Spalte richtig positioniert wird. Wäre schön, wenn mir jemand von euch einen Tipp geben könnte - ein grosser Dank im Voraus. rodaroda


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.03.2010, 17:04
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Code: margin-left: auto; margin-right: auto; funktioniert aber nicht mit position: absolute. Da kannst du es nur per Code: left: 50%; margin-left: -250px; /* Hälfte der Breite */ machen, wobei du sicherstellen solltest, dass es kein positioniertes Elernelement mit einer Breite != 100% gibt. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

14.03.2010, 18:03
rodaroda Neuer Benutzer Registriert seit: 27.08.2008 Beiträge: 17 PHP-Kenntnisse: Anfänger	Hallo Manko10 Funktioniert perfekt. Danke! rodaroda