 <li> Navigation vertikal text zentrieren |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
  |
| <li> Navigation vertikal text zentrieren |
 Tue. 25. August 2009, 10:10
Beitrag
#1
|
|
 Advanced Member  Gruppe: AdvancedMembers Beiträge: 236 Mitglied seit: 14.07.2006 Wohnort: Bad Oeynhausen Mitglieds-Nr.: 138  |
Hallo und ein herzliches Willkommen an alle CSS und HTML Profis,
ich habe ein Problem mit vertikaler Zentrierung bei einer Navigation. Wie man sieht, ist der Text leider nicht überall einzeilig und es gibt ein Hintergrundbild. Momentan habe ich es mit padding gelöst. Gibt es eine Möglichkeit ohne Tabellen, die Texte vertikal zu zentrieren? Ich bedanke mich der toto -------------------- Corporate Design, Printdesign, Webdesign, Podcast, Videocast und Beratung bei Junggebauer Grafik & Design
|
 |
 
|
|
Wed. 26. August 2009, 16:48
Beitrag
#2
|
|
 Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
text-align:center
-------------------- |
|
|
|
|
Wed. 26. August 2009, 20:14
Beitrag
#3
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 154 Mitglied seit: 03.07.2006 Mitglieds-Nr.: 91 |
|
|
|
|
|
Thu. 27. August 2009, 16:12
Beitrag
#4
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 236 Mitglied seit: 14.07.2006 Wohnort: Bad Oeynhausen Mitglieds-Nr.: 138 |
hm, danke aber funktioniert alles nicht. das problem ist, das mein Text nicht einzeilig sondern teilweise auch 2zeilig ist. irgendwie hab ich mit inline und vertical-align: middle schon alles ausprobiert, aber et jeht nüsch. Also doch Tabelle, was. :/
gruß toto -------------------- Corporate Design, Printdesign, Webdesign, Podcast, Videocast und Beratung bei Junggebauer Grafik & Design
|
|
|
|
|
Thu. 27. August 2009, 16:29
Beitrag
#5
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 154 Mitglied seit: 03.07.2006 Mitglieds-Nr.: 91 |
Ich hab das mal so gelöst, dass ich ein 1px-GIF (1px breit, gewünschte Pixelzahl in der Höhe) vorangestellt habe. Ob das allerdings mit den zwei Zeilen funktioniert, weiß ich nicht…
Der Beitrag wurde von paulinsche bearbeitet: Thu. 27. August 2009, 16:30 |
|
|
|
|
Thu. 27. August 2009, 16:53
Beitrag
#6
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
Sorry, die willst vertikal positionieren. Vertical-align wirkt nicht in Blockelementen (aber in Tabellen). Also musst du ein Blockelement in eine Tabelle verwandeln.
Hier mal zum copy&paste für eigene Experimente: QUELLTEXT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Vertikkales Zentrieren</title> <style type="text/css"> ul { display: table; } li {height: 5em; display:table-cell; vertical-align:middle; outline:.1em solid red} </style> </head> <body> <ul> <li>Link 1</li> <li>Link 2</li> </ul> </body> </html> -------------------- |
|
|
|
|
Fri. 28. August 2009, 07:58
Beitrag
#7
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 236 Mitglied seit: 14.07.2006 Wohnort: Bad Oeynhausen Mitglieds-Nr.: 138 |
Hi pawel,
das war ein sehr guter Tipp! allerdings hab ich ja eine vertikale navi und sobald elemente wie "Block" (wegen den rolloverbildern) oder float:left reinkommen, sieht die sache wieder anders aus  leiderok, mit QUELLTEXT <ul> <li>Link</li> </ul> <ul> <li>Link<</li> </ul> geht es. Sieht zwar wild aus aber funktioniert, bis auf den IE, bei dem kleben die Zeilen oben am Rand :/ scheiß teil  gibts da auch eine umgehung? -------------------- Corporate Design, Printdesign, Webdesign, Podcast, Videocast und Beratung bei Junggebauer Grafik & Design
|
|
|
|
|
Fri. 28. August 2009, 16:55
Beitrag
#8
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
Keine Ahnung warum du float brauchst. Nur mal eine Anregung:
QUELLTEXT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Vertikkales Zentrieren</title> <style type="text/css"> ul { display: table; width:9em } li {width:9em;height: 3em; display:table-row;} li a{display:table-cell;vertical-align:middle; text-align: center; background:url(http://www.lazkotraining.de/media/img/links_navi_over.gif) top right no-repeat;} </style> </head> <body> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </body> </html> -------------------- |
|
|
|
|
Mon. 7. September 2009, 13:00
Beitrag
#9
|
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 236 Mitglied seit: 14.07.2006 Wohnort: Bad Oeynhausen Mitglieds-Nr.: 138 |
Man super!
Ich hab das mit cell und row nicht so ganz geschnaggelt. Jetzt lübbt et! Danke dir pawel und ich habe wieder was gelernt. Ist zwar etwas kompliziert aber ich hab es schon immer gehaßt mit den 1- und 2zeiligen Navigationsnamen. Aus dem Urlaub zurück und gleich am Montag so eine tolle Neuigkeit! Gruß toto -------------------- Corporate Design, Printdesign, Webdesign, Podcast, Videocast und Beratung bei Junggebauer Grafik & Design
|
|
|
|
|
|
Vereinfachte Darstellung | Aktuelles Datum: 27.4.24 - 16:58 |
