| | | | |
| |||||||
| HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability. |
 |
| | LinkBack | Themen-Optionen | Thema bewerten |
23.07.2010, 18:39
| |
| Erfahrener Benutzer  Registriert seit: 29.03.2008
Beiträge: 576
 |  Horizontale Listenelemente vertikal zentrieren Hallo, wie schon oben erwähnt geht es um eine horizontale Liste. In dieser Liste befindet sich die Navigaton der Seite. Hab stundenlang ach ner Lösung gesucht, aber alle Vorschläge haben nicht funktioniert.  Hier mal das html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mitte">
<div id="leiste" style="display: block;">
<ul id="punkte">
<li id="anfang"> </li>
<li class="eintrag"><a href="/index.php?site=2&sub=1">Betonbau</a></li>
<li class="space"></li>
<li class="eintrag"><a href="/index.php?site=2&sub=2">Montage von Fertigelementen</a></li>
<li class="space"></li>
<li class="eintrag"><a href="/index.php?site=2&sub=3">Mauerwerksbau</a></li>
<li class="space"></li>
<li class="eintrag"><a href="/index.php?site=2&sub=4">Tief- und Kanalbau</a></li>
<li class="space"></li>
<li class="eintrag"><a href="/index.php?site=2&sub=5">Putzarbeiten</a></li>
<li class="space"></li>
<li class="eintrag"><a href="/index.php?site=2&sub=6">Außenanlagen</a></li>
<li id="ende"> </li>
</ul>
</div>
</div>
</body>
</html>
Code: body
{
background-color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #334;
}
a{
text-decoration:none;
color:#000;
}
div#leiste{
position:absolute;
width:795px;
height:45px;
display:none;
padding:0;
margin:0;
}
ul#punkte{
width:655px;
height:43px;
padding:0;
margin:0 auto;
}
ul#punkte li{
list-style-type: none;
float:left;
text-align:center;
font:menu;
}
li#anfang{
width:10px;
height:42px;
background-image: url('../pics/bg_leiste_links.gif');
background-repeat: no-repeat;
}
li.eintrag{
height:42px;
background-image: url('../pics/bg_leiste.gif');
background-repeat: repeat-x;
width:100px;
}
li.eintrag a{
display:block;
height:38px;
padding:0;
margin:0;
vertical-align:middle;
}
li.space{
height:42px;
background-image: url('../pics/leiste_space.gif');
background-repeat: no-repeat;
width:1px;
margin:0;
padding:0;
}
li#ende{
width:10px;
height:42px;
background-image: url('../pics/bg_leiste_rechts.gif');
background-repeat: no-repeat;
}
Ich habe schon vieles versucht, aber es nicht hinbekommen, das die einzeiligen Links vertikal zentriert sind. Von mir aus auch bottom.  Kann mir bitte jemand sagen wie ich dashinbekomme? |
|  |
 | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
|
23.07.2010, 21:12
| |
| Moderator¹ Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse: Fortgeschritten   | Code: <li id="anfang"> </li> <li class="space"></li> Und stelle bei in solchen Fällen bitte ein Online-Beispiel bereit, damit man das gleich nachvollziehen kann - ich habe keine Lust auf Copy&Paste für sowas.
__________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? |
|
| |
|
23.07.2010, 21:26
| |
| Erfahrener Benutzer Registriert seit: 29.03.2008
Beiträge: 576
| Und wieso bitte schön sollte das nicht mein Ernst sein? Was ist daran bitte auszusetzen? Hintergrund ist einfach der, das die Liste Hintergrundgrafiken verwendet um ein Menü darzustellen. |
|
| |
|
23.07.2010, 22:11
| ||
| Moderator¹ Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse: Fortgeschritten | Zitat:
Abstände macht man mittels CSS. Und von deinen Hintergrundgrafiken sehe ich auch immer noch nichts.
__________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? | |
|
| |
|
24.07.2010, 10:59
| |
| Erfahrener Benutzer Registriert seit: 29.03.2008
Beiträge: 576
| Nur die Ruhe. Die hab ich im Eifer des gefechts übersehen  Damit man sieht was ich meine hier der Link: http://www.star-wars.de.vu/test |
|
| |
|
24.07.2010, 13:34
| |
| Moderator¹ Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse: Fortgeschritten | Da ist immer noch der Unsinn mit den leeren Listelementen drin. Erst vernünftiges HTML aufbauen, anschließend um Formatierung kümmern.
__________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? |
|
| |
|
24.07.2010, 15:33
| |
| Erfahrener Benutzer Registriert seit: 29.03.2008
Beiträge: 576
| Da sind keine leeren Listenelemente drin. Wie man sieht besitzen diese einen geschützten Leerschritt! Des weiteren sind diese Elemente für die Abgrenzung der einzelnen Links da (ist das |). |
|
| |
|
24.07.2010, 15:45
| |
| Erfahrener Benutzer Registriert seit: 05.02.2009
Beiträge: 1.401
PHP-Kenntnisse: Fortgeschritten | Du müsstest den einzeiligen Elementen ein line-height:38px; zuweisen. cu
__________________ "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus] |
|
| |
|
24.07.2010, 15:46
| ||
| Moderator¹ Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse: Fortgeschritten | Zitat:
Das ist das Äquivalent von "spacer.gif"-Grafiken in Layouts aus dem letzten Jahrtausend. Sowas hat in sinnvoll strukturiertem HTML nichts verloren. Aber hey, wenn du meine Hinweise hier nicht annehmen willst, sondern lieber ständig widersprichst - dann lass' ich's halt, dann löse dein Problem von mir aus alleine.
__________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? | |
|
| |
|
24.07.2010, 16:49
| |
| Erfahrener Benutzer Registriert seit: 29.03.2008
Beiträge: 576
| Na schön. Und wie kann ich das umgehen? |
|
| |
| |
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Inhalt von Div zentrieren: | Paul.Schramenko | HTML, Usability und Barrierefreiheit | 11 | 26.04.2010 14:51 |
| CSS: Zentrieren (wie so oft) | rocco | HTML, Usability und Barrierefreiheit | 23 | 22.01.2009 16:01 |
| Horizontale Scrollbar erscheint wenn Vertikale auftaucht | PsychoEagle | HTML, Usability und Barrierefreiheit | 7 | 20.06.2006 08:54 |
| Vertikal zentrieren mit CSS - so gehts. | HTML, Usability und Barrierefreiheit | 2 | 02.03.2006 09:15 | |
| Text im Bild zentrieren | inu | PHP Tipps 2005 | 19 | 10.05.2005 15:34 |
| &lt;div&gt;- container vertikal auf seite zentrieren | HTML, Usability und Barrierefreiheit | 3 | 08.05.2005 11:16 | |
| Layer vertikal zentrieren | Locutus007 | HTML, Usability und Barrierefreiheit | 4 | 05.09.2004 15:44 |
