elemente vertikal mittig

Hier können allgemeine Fragen zu HTML und CSS gestellt und diskutiert werden.
Antworten
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

elemente vertikal mittig

Beitrag von baluo »

ich sitze etwas auf der leitung ...

fuer unser bilderalbum - z.b. hier:
http://www.kirchennetz.info/luther-ka/f ... &rubric=87
moechte ich gerne die fotos auch vertikal mittig setzen. aber irgendwie faellt mir der clou dazu nicht mehr ein.

dies ist das dazu gehoerige css:

Code: Alles auswählen

.bilder-uebersicht{
   width:150px; height:150px; 
   float:left; 
   margin:0 10px 10px 0; 
   text-align:center; 
   vertical-align:middle;
   border: 3px #F2F2F2 solid;
	padding: 3px;  font-size: 0.8em;
	line-height: normal;
	
}
danke fuer eure tipps,
gerhard
Benutzeravatar
MarkusR
Handbuchversteher
Beiträge: 7361
Registriert: 01.01.1970 01:00
Hat sich bedankt: 110 Mal
Danksagung erhalten: 933 Mal
Kontaktdaten:

Beitrag von MarkusR »

Geht nicht.

Als Workaround benutze ich bei mod_gallery einfach die Bilder als zentriertes Hintergrundbild des DIVs:

Code: Alles auswählen

<div style="float: left; border: 1px solid white; margin: 0px 5px 5px 0px; background: url(../mod_gallery/bilder/tDSC00404.jpg) no-repeat 50% 50%;">
	<a style="display: block; width:83px; height:83px;" href="../mod_gallery/album.php?pic=DSC00404.jpg&from=C-Wurf&speed=5" onclick="window.open(this.href,'Bilderalbum','width=600,height=485,scrollbars=no'); return false;"></a>
</div>
Schau Dir den Code einfach bei mod_gallery an...
Ciao Markus
ConPresso-Module

Kein Support per PN!!! Für Fragen und Diskussionen ist das Forum da!

Succi recentis officinalis
Hochwertige Kräutersäfte und -Öle
Benutzeravatar
baluo
ConPresso-Experte
Beiträge: 607
Registriert: 14.11.2005 12:17
Hat sich bedankt: 216 Mal
Danksagung erhalten: 11 Mal

Beitrag von baluo »

MarkusR hat geschrieben:Geht nicht.
___lol___
"geht nicht" gibt's bei dir wohl nie ...
Als Workaround benutze ich bei mod_gallery einfach die Bilder als zentriertes Hintergrundbild des DIVs
klasse, klappt, ich bin beeindruckt und habe etwas neues gelernt!

danke, gerhard

p.s. hier der code auch fuer andere:

Code: Alles auswählen

[b]Dia-Vorlage:[/b]

<!-- ************** Anfang Bild *************** -->

<span class="bilder-uebersicht" style="background:url(../### ALBUM_DIR ###/bilder/### ALBUM_THUMB ###) no-repeat 50% 50%;" title="### ALBUM_BESCHREIBUNG ###">

<a 

style="display: block; width:150px; height:150px;"

href="javascript:void(0)" onclick="window.open('../### ALBUM_DIR ###/album.php?pic=### ALBUM_PIC ###&from=### ALBUM_FROM ###&speed=### ALBUM_SPEED ###','Bilderalbum','width=### POP_UP_WIDTH ###,height=### POP_UP_HEIGHT ###,scrollbars=no');">

</a>

</span>

<!-- ************** Ende Bild *************** -->
Benutzeravatar
hscha
ConPresso-Experte
Beiträge: 712
Registriert: 22.02.2006 22:00
Wohnort: Berlin
Hat sich bedankt: 216 Mal
Danksagung erhalten: 25 Mal
Kontaktdaten:

mein thema...

Beitrag von hscha »

Hallo,

warum geht das eigentlich nicht? In <div> kann ich keinen Text mit "vertical-align:bottom" so formatieren, dass er an den unteren Rand des <div> fließt. Genau das brauche ich aber. Es geht nur im Tabellenlayout, warum nicht hier? :twisted: :?:

Hier die id aus meinem Stylesheet:

Code: Alles auswählen

#fototext {
 position:absolute; left:15px; top:384px; height:40px; width: 120px; vertical-align:bottom; text-align:left; 
 font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 9px; font-style: normal;
 line-height: normal; font-weight: normal; font-variant: normal; text-transform: lowercase; color: #666666;
 text-decoration: none;
 } 
Habt ihr einen Tipp für mich??? :idea:
Grüße aus Berlin von
H.Schallnas
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Hallo hscha,

das vertical-align betrifft nur die Ausrichtung innerhalb einer Text-Zeile. Das heißt, damit kannst du ein bild dazu bringen, dass es zentriert, oben bündig oder unten bündig zum Text angeordnet wird. Oder du kannst damit ein Wort hoch oder Tiefstellen im Vergleich zum restlichen Text in der Zeile.

Wenn du den Footer ganz ans Ende schreiben willst, dann probiere mal folgendes:

Code: Alles auswählen

position:absolute; left:15px; bottom:384px;
Gruß Matthias V

P.S. was ich recht gerne mache ist positon: fixed; zu benutzen, damit bleiben Sachen fest im Viewport des Browsers. Ich habe damit auch einige Webseiten laufen, auch in Verbindung mit bottom. Für alle Browser die dies nicht verstehen setze ich dann immer noch position: absolute;
Und damit es jeder Browser so versteht, wie er es verstehen kann mache ich es folgendermaßen:

Code: Alles auswählen

position: fixed !important;
position: absolute;
Das funktioniert super und mit allen modernen und älteren Browsern, die wenigstens die Absolute positionierung untestützen.
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Benutzeravatar
hscha
ConPresso-Experte
Beiträge: 712
Registriert: 22.02.2006 22:00
Wohnort: Berlin
Hat sich bedankt: 216 Mal
Danksagung erhalten: 25 Mal
Kontaktdaten:

geht nur mit krücke

Beitrag von hscha »

Hallo Matthias,

danke für deine Tipps! Es hat alles nichts gebracht. Nun habe ich mir mit einer "Krücke" geholfen, da valign in Tabellenzellen funktioniert:

Code: Alles auswählen

<div id="bildtext"><table border="0" height="100% width="100%"><tr><td class="fototxt" valign="bottom">hier steht der eigentliche text</td></tr></table></div>
Die css-id "bildtext" enthält die Positionierung, die Klasse "fototxt" das Stylesheet für die Schriftformatierung.
Ich hätte gern auf die Benutzung der fossilen Tabellenzelle verzichtet, aber so funktionierts...

Grüße von
H.Schallnas
Benutzeravatar
balu
ConPresso-Entwickler
Beiträge: 1748
Registriert: 01.01.1970 01:00
Hat sich bedankt: 81 Mal
Danksagung erhalten: 133 Mal

Beitrag von balu »

Von http://de.selfhtml.org/css/eigenschafte ... ical_align:
vertical align:

Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.
Wichtig ist hierbei das "nebeneinanderstehende Elemente mit unterschiedlicher Höhe" und das "im Verhältnis zueinander".

vertical-align ist also nicht dafür gedacht, etwas mittig in einem anderen Element zu positionieren.

Balu
Bartels.Schöne
ConPresso Support & Development
Benutzeravatar
Matthias V
Modul-Entwickler
Beiträge: 1251
Registriert: 01.01.1970 01:00
Wohnort: Sondershausen
Hat sich bedankt: 54 Mal
Danksagung erhalten: 147 Mal
Kontaktdaten:

Beitrag von Matthias V »

Ja stimmt Balu, so kann man das deutlich schreiben.

Das habe ich gemeint, als ich geschrieben habe, dass dies nur alle Elemente innerhalb einer Textzeile betrifft.

Gruß Matthias V
mod_Guestbook 4.1.0

Features:
- Einträge als ConPresso-Artikel
- benutzt Templates, Rubriken, ...
- Captcha
- BB-Code + Smilies + Zitieren
- Badwords
- Anonymisierung
Antworten