Willkommen Gast. Bitte anmelden oder registrieren.

Autor Thema: Bilder und Text in Div fester Größe _vertikal_ platzieren  (Gelesen 5512 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Hallo,

wo wir beim Malen von Templates waren....
Ich möchte ja auch brav von Layouttabellen weg, weshalb ich spielerisch meine Galerie-Einträge anpassen wollte:

Es soll ja nur schön aussehen: Links ein Bild, rechts Titel auf gleichgroßen farbigen 'Kacheln'.

Aktuell habe ich:
- Eine Tabelle mit einer Zeile (feste Höhe) und Hintergrundfarbe
- In der Zeile zwei Zellen (jeweils feste Breite)
- Links ein Bild horizontal und vertikal zentriert (text-align:center und vertical-align:middle)
- Rechts zwei Absätze vertikal zentriert (text-align:center)

Kann mir jemand sagen, wie ich das Zentrieren mit Divs hin bekomme?
- Div feste Höhe -> OK
- Div links feste Breite -> OK
- Div rechts feste Breite -> OK
- Bild horizontal zentriert -> OK (text-align:center)
-> beim vertical-align hörts dann aber leider auf.

Falls hierzu ein Beispiel notwendig ist, dann kann ich das vermutlich am Wochenende liefern, auch, wenn ich dazu eine produktive Seite teilweise 'lahm' legen muss.
Da das Beispiel aber recht einfach ist, hoffe ich auch so auf Antworten oder auf den alles erklärenden Link  ;D.

Ich finde einiges zum vertikalen Zentrieren bei google, nur leider keine Aussagen, wie's wirklich funktionieren kann, wenn die inneren Maße unbekannt sind.

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #1 am: 25. März 2012, 22:58:46 »
Dein Suchbegriff ist "CSS3 flexible box model". Ich bin hin und weg von den Möglichkeiten, die ich da finde, oute mich aber selber als Lernend. Schau mal hier: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
Grüße, Christiane

bembelimen

  • moderatives Dielektrikum
  • Beiträge: 227
  • Ich kam, sah und zensierte...
    • Joomla! Vereinsverwaltung
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #2 am: 26. März 2012, 07:02:27 »
Coole Sache, ich sollte mal wieder anfangen Templates zu bauen. Danke für den Link.
Joomla! ist auch nur ein Mensch...

Lintzy

  • Gast
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #3 am: 26. März 2012, 10:09:13 »
Und bezogen auf die Frage "vertikale mittige Ausrichtung" hier eine Lösung ohne CSS3  (einfach als *.html abspeichern und im Browser aufrufen)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<title>DIV zentriert</title>
<style media="all" type="text/css">

* { margin:0; padding:0; }
#wrapper { display:table; overflow:hidden; margin:0px auto; }

#content { display:table-cell; vertical-align: middle; }
html,body { height:100%; }
#wrapper { height:100%; width:465px;  }
#container { border:1px solid #FF0000; padding:10px; }

</style>

</head>
<body>
<div id="wrapper">
<div id="content">
               <div id="container">
                     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
               </div>

</div>
</div>
</body>
</html>

Es gibt auch workarounds für IE6 und IE7 die mit display:table nichts anfangen können.

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #4 am: 26. März 2012, 14:03:50 »
@Lintzy:

Das CSS hat mich jetzt nicht wirklich überrascht, außer, dass es funktioniert :-)
Mit display:table-cell; und vertical-align: middle; hab ich auch rumgespielt, hatte aber leider keinen Erfolg. Vielleicht habe ich zwischendurch mal eingecheckt, dann kann ich das mit meinem Versuch vergleichen. Ich glaube, der Text ging noch, nur das Bild machte Probleme?!
Unter dem Strich bin ich mir aber auch gar nicht sicher, ob in diesem Fall nicht eine Layout-Tabelle auch praktikabler ist, da durch die Tabelle automatisch eine Trennung vom möglichen weiteren Artikel-Content habe.
Ich probiere das aber noch mal. Danke.

Firstlady

  • Pink Berserk (Mod)
  • Beiträge: 190
    • www.chmst.de
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #5 am: 26. März 2012, 14:53:46 »
Wage es ja nicht, eine Layout-Tabelle zu verwenden  8)
Das ist völlig gegen state-of-the-art und eine Barriere für die usability. Es sit altmodisch und bequem aber hier wollen wir ja best-practice und nicht worst-practice behandeln.
Du kannst eine saubere Trennung mit css genauso oder besser erreichen, du darfst nur das clear:left nicht vergessen.
Grüße, Christiane
Grüße, Christiane

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #6 am: 26. März 2012, 16:23:37 »
Oh. Ich sehe gerade, dass hier die Herkunft meines Problems gar nicht klar beschrieben stand:
In meinem Fall geht es nicht um ein Template (das habe ich bis auf ein nicht benutztes internes Menü auf 'ohne Layouttabellen' migriert) sondern um einen Teaser eines Artikels, der mit seinesgleichen in einem Blog als Galerie dient.
Wenn man diesen normal mit dem Editor layoutet, dann hat man fast nur die Möglichkeit, eine Tabelle zu benutzen (zumindest der eigentliche Anwender). Da die aber immer etwas anders aussahen und blöd für neue Einträge zu kopieren und anzupassen waren, habe ich mein eigenes Plugin dafür benutzt, in dem ich nur die Daten übergebe und die automatisch gelayoutet werden.
Dadurch kann ich natürlich auch CSS-taugliche Divs generieren, ich mache das aber an einer Stelle, an der ohne mich auch eine Layouttabelle auftauchen würde.

Ich hoffe, das war verständlich und konnte mich jetzt etwas entlasten  ;D
Nichts desto trotz werde ich die saubere Variante noch einmal ausprobieren.

sybrek

  • Bestätigter Nutzer
  • Beiträge: 25
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #7 am: 27. März 2012, 19:22:05 »
Tabellen für Layout gehören (oder besser: müssen) nur noch in HTML-Mails, wenn man überhaupt HTML-Mails nutzen will (vielen Dank MS...).

Natürlich sind für einfache User Tabellen im WYSIWYG-Editor einfacher. Aber mit einer kurzen Schulung und vernünftigem CSS kann auch ein Laie die Beiträge layouten. Sollte dies aufgrund einer immer wiederkehrenden Komplexität nicht möglich sein, hat der JCE z.B. ein nettes Plugin für mit dem du Template-Snippets erstellen und einfügen kannst.

Spontane Idee: Die Templates an z.B. Kategorien binden, so dass Sie per default geladen werden können... mal mit Ryan sprechen ..

Sammy

  • Bestätigter Nutzer
  • Beiträge: 165
Antw: Bilder und Text in Div fester Größe _vertikal_ platzieren
« Antwort #8 am: 27. März 2012, 19:48:38 »
Mist, willst du mir erzählen, dass ich mein Plugin gar nicht bräuchte, wenn ich von Anfang an den je benutzt hätte?
Das wird ja auch umgestellt, wenn ich da sowieso wieder ran muss.

Wenn Gott gewollt hätte, dass der Mensch html-Mails verschickt, dann würde jedes Gebet auf </Amen> enden ;)