Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 05. Juni 2011 21:16

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

[GELÖST] CSS - Bild in DIV vertikal zentrieren

Hallo!

Ich hab eine Website mit einem Div, das wie man am Titel erkennen kann ein Bild beinhaltet. Diese sind unterschiedlich hoch, dh wenn ein Bild niedriger als ein anderes ist, steht es am oberen Ende des Divs.
Wie bekomm ich dieses in die Mitte - kann mir wer dabei helfen?
Hier das konkrete Beispiel: Beispiel

Vielen Dank!

Beitrag geändert von brandy (05. Juni 2011 21:17)

Offline

#2 05. Juni 2011 21:43

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Hallo und willkommen im Forum.

Die Lösung ist kinderleicht smile
Gib den Listenpunkten, die die Bilder beinhalten eine Zeilenhöhe, die genauso hoch ist wie deren Höhe (line-height:540px;).
Und dann gib den Bildern vertical-align: middle.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#3 06. Juni 2011 22:54

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Vielen Dank!

Offline

#4 06. Juni 2011 07:43

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

So, doch noch nicht ganz gelöst - im IE 8 funktionierts so leider nicht obwohl es im Firefox schon gut aussieht - gibts dazu eine Lösung!
Siehe hier:
http://www.foto-riedler.com/index.php?page=familien

Vielen Dank!

Beitrag geändert von brandy (06. Juni 2011 09:12)

Offline

#5 06. Juni 2011 16:29

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Ok ich hab nun das richtige Listenelement mit "line-height: 450px;" erweitert und im IE stehts noch immer oben. Firefox haut perfekt hin!

Offline

#6 07. Juni 2011 07:09

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Hab jetzt die table-cell-Methode ausprobiert - führte mich aber auch nicht zum gewünschten Ziel.

Offline

#7 07. Juni 2011 10:23

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

So meine lieben - Vielen Dank! Ich habs jetzt auch im IE in der Mitte!

Vielen Dank!

Offline

#8 07. Juni 2011 12:14

COR9
Server-Pate
Ort: Dresden
Registriert: 09. November 2010
Beiträge: 281

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Ist zu diesem Thema zwar nicht direkt passend; mich interessiert aber, ob Dein »Riedler Template« eine Anpassung eines vorhandenen Gallery-Templates ist oder ob Du es komplett selbst erstellt hast.
Möchte mir eine Galerie mit Hilfe von jQueryTOOLS (http://flowplayer.org/tools/demos/scrol … llery.html) bauen, was soweit ganz gut klappt. Kompliziert wird es, weil ich die Menge der angezeigten Thumbnails und Ihrer einzelnen Bereiche ja nicht vorher festlegen kann; das bestimmt der Benutzer. Um undefinierte Mengen neuer Inhaltsbereiche hinzuzufügen, hilft zwar dieser sicher dieserThread, was mir aber in diesem Falle wie ein manueller Nachbau von möglicherweise in Gallery schon enthaltenen Funktionen vorkommt.
Wie hast Du das Problem gelöst, nicht zu wissen, wieviele Thumbs(gruppen) pro Galerie benötigt werden?

Schöne Seite übrigens!

Offline

#9 07. Juni 2011 13:39

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Naja der Scroller hüpft ja immer um die gleiche Länge (momentan 516px, muss ich aber noch anpassen) weiter. Ich selbst muss ja die Thumbnails auch noch so anordnen, damit ich immer sechs seh.
Die Länge (516px) kann man frei einstellen, gleich wie den sichtbaren Bereich.
Mehr dazu: http://www.dyn-web.com/

Offline

#10 07. Juni 2011 18:22

COR9
Server-Pate
Ort: Dresden
Registriert: 09. November 2010
Beiträge: 281

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Danke für den Hinweis, Dyn-Web hatte ich auch schon mal in den Fingern, hab's dann aber nicht verwendet wg. der Lizenzkosten. Hast Du den Scroller via Gallery-Template eingefügt oder quasi manuell über das Seiten-Template?

Offline

#11 07. Juni 2011 19:37

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Ist alles im Template - aber ich kann dir sagen die 40$ sind es wert...

Offline

#12 09. Juni 2011 20:27

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

So meine Lieben, hab wieder ein Problem.
Einige Bilder werden nicht angezeigt und der Verursacher ist auch schon gefunden - <div class="wraptocenter"><span></span><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"/></div>
Was wäre umzustellen?

Offline

#13 09. Juni 2011 21:32

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Hat jemand eine Idee - hab jetzt mal probiert inline-block mit table-cell zu ersetzen. Bilder werden dann zwar angezeigt, aber gewisse andere wieder nicht in der Mitte!

Vielen Dank!

PS: wenn das Problem gelöst ist, wird die Seite freigeschalten...

Offline

#14 10. Juni 2011 22:10

mike-r
arbeitet mit CMS/ms
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Wie sieht denn die Ausgabe davon aus?
"einige Bilder werden nicht angezeigt" ist eine ziemlich nichtssagende Fehlermeldung...


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#15 10. Juni 2011 22:11

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.435

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Also wenn ich das Span mal rausnehme, dann sind die Bilder im FF immer noch zentriert.
Wenn dieses Span Element nur für den IE sein soll.
Dann nimm doch conditional comments.


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#16 10. Juni 2011 22:21

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Wenn ich es rausnehm wandert zB das 4. Bild unter Familie wieder nach oben.

Offline

#17 10. Juni 2011 23:58

mike-r
arbeitet mit CMS/ms
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

so lang die Seite nicht valide ist, wirst Du da ewig dran rumstochern, das zeigt jeder Browser anders an.


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#18 10. Juni 2011 06:11

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

Danke mike-r - kennst du eine andere browserunabhängige Methode zum vertikalen Zentrieren von Bildern in DIVs, sodass es mir die anderen nicht hinausschiebt?

Wieso wirkt sich das <span> nur bei gewissen Bildern aus und bei anderen nicht? Ich würde es verstehen, wenn alle verschoben wären, aber es sind ja nur wenige - woher kommt das?

Hat wer einen Lösungsvorschlag - Vielen Dank!

Offline

#19 10. Juni 2011 07:04

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 799
Webseite

Re: [GELÖST] CSS - Bild in DIV vertikal zentrieren

So hab jetzt eine andere Lösung gefunden... Siehe hier: http://www.pmob.co.uk/temp/vertical-align3.htm Mit table und table-cell... Nach den ersten Tests siehts nicht schlecht aus... Birgt diese Lösung irgendwelche Fehler?

Vielen Dank!

Beitrag geändert von brandy (10. Juni 2011 07:05)

Offline