Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#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
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
Seiten: 1