nicht angemeldet
Hallo Frunk,
Erwähnte ich eigentlich schon, daß ich die Lösung des bekannten "What is the sound of one hand clapping?"-Koans gefunden habe?
-v please!
(Bitte etwas ausfuehrlicher schreiben, was Du meinst.
Du sprichst - fuer mich - in Raetseln. Und wenn wir schon
dabei sind - wie alt bist denn Du?)
p.navigation { border-bottom:1px solid #000080;
text-align:center;
font-style:normal;}
p.navigation a { padding-left:1.2em; padding-right:1.2em; }Der letzte Teil will einfach nicht hinhauen :(
Ich vermute mal, dass es im MS IE keine Wirkung zeigt.
Mein Fehler. Sorry. In Mozilla zeigt es den gewuenschten Effekt.
Das Box Modell mit margin, border und padding
http://www.w3.org/TR/REC-CSS2/box.html
http://www.jendryschik.de/wsdev/einfuehrung/css/box-modell.html
bezieht sich grundsaetzlich auf "Boxen".
Normalerweise braucht man es fuer
Block-Level-Elemente (<p>, <h1> u.s.w.)
Trotzdem dachte ich, dass man insbesondere padding auch bei
Inline-Elementen (wie <A>) anwenden kann und dass die
Browser dies auch umsetzen (Mozilla tut es in diesem Fall).
Dass es theoretisch erlaubt ist, padding auch bei Inline-Elementen
(bzw. "inline boxes") zu verwenden, schliesse ich aus mehreren
Passagen in der CSS 2 Specification, z.B.
http://www.w3.org/TR/REC-CSS2/visuren.html#q7
Ich wollte es Dir eigentlich ersparen - aber:
Du koenntest jetzt versuchen, mit display: rumzuspielen,
um die <A>-Elemente zu Block-Level-Elementen zu machen,
damit auch der MS IE padding verwendet, z.B.
display:run-in; /* CSS 2.0 */
display:inline-block; /* erst in den Errata bzw. CSS 2.1 hinzugekommen */
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop
http://www.w3.org/TR/CSS21/visuren.html#display-prop
Obwohl ich auch Deine bisherige Navigationsleiste
mit einem Absatz und 5 darin enthaltenen Links
<p class="navigation"><a>Link1</a> <a>Link2</a> <a>Link3</a> <a>Link4</a></p>
fuer Deine Zwecke voellig OK finde, erlaube ich mir noch,
Dich darauf hinzuweisen, dass die semantisch "korrekte"
bzw. "uebliche" HTML-Auszeichnung dafuer eine UL-Liste
(oder allenfalls OL-Liste) waere.
Auch Listen kann man mit CSS so formatieren, dass die
Links horizontal nebeneinander stehen.
Ein paar Ideen kriegst Du vielleicht hier:
http://www.alistapart.com/articles/taminglists/ (Bsp. ziemlich weit unten)
http://css.maxdesign.com.au/listamatic/ (Horizontal lists)
Wieweit diese Beispiele auch im MS IE funktionieren,
weiss ich leider nicht.
Wenn Dir das ganze zu umstaendlich ist, lass es
ruhig bei Deiner Leiste mit <p>, aber mach doch die
Abstaende statt mit <u>____</u> lieber mit ein paar " "
<p class="navigation"><a>Link1</a> <a>Link2</a> <a>Link3</a> <a>Link4</a></p>
---
Wenn Du noch immer aufnahmefaehig und lernbegierig bist,
kannst Du jetzt noch versuchen, die Seiten auch noch
behindertengerecht zu gestalten.
Zugänglichkeitsrichtlinien für Web-Inhalte 1.0
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
Weitere Seite zum Thema "Barrierefreiheit":
http://www.einfach-fuer-alle.de/
Fuer Blinde und andere Leute mit "speziellen Browsern"
waere es evtl. noch sinnvoll, bei Deiner Leiste jeweils
ein Trennzeichen zwischen den Links zu machen.
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-divide-links
Welches Zeichen dafuer am besten geeignet ist, weiss ich
auch nicht. "-" wird vielleicht als "minus" vorgelesen,
"[" als "eckige Klammer auf", "|" als "Senkrechter Trennstrich"
oder "Pipe" ...
<p class="navigation"><a>Link1</a> <span>-</span> <a>Link2</a> <span>-</span> <a>Link3</a> <span>-</span> <a>Link4</a></p>
Diese Trennzeichen kannst Du dann per CSS unsichtbar machen,
indem Du ihnen die gleiche Farbe gibst wie dem Hintergrund:
p.navigation span { color:#ffffff; background-color:#ffffff; }
(Eigentlich moechte man sie mit display:none; ganz ausblenden,
aber was man so "versteckt", wird den Blinden offenbar auch
nicht mehr vorgelesen, da die meiste Spezialsoftware auf
dem MS IE basiert und auch die Stylesheets beruecksichtigt,
welche man fuer media="screen" einbindet. Leider.)
Liebe Gruesse,
Thomas