nicht angemeldet
horizontale Navigation richtig formatieren
Gunnar Bittersmann
suitHallo,
ich benötige eine horizontale Navigationsleiste, die sich über die ganze Breite des bodys (880px) erstreckt. Die Navigationsleiste soll vier Buttons enthalten, die alle eine Breite von 80 Pixeln und einen Rahmen von 1px haben. Die ersten zwei Buttons sollen links ausgerichtet sein. Die Buttons drei und vier sollen rechts ausgerichtet sein. Zwischen dem ersten und dem zweiten Buttons soll eine Abstand von 4px bestehen. Zwischen dem dritten und dem vierten Button soll ebenfalls ein Abstand von vier Pixeln bestehen. Ich probiere das jetzt schon ne ganze Weile. Es will nicht so funktionieren wie ich mir das Vorstelle. Es soll zumindest im Firefox, im IE6 und im IE7 funktionieren. Eine IE5 bzw. IE5.5 Unterstützung ist nicht notwendig. Ich bin mir nicht sicher, ob ich überhaupt den richtigen Ansatz verfolge. Hier mein Versuch. Es wäre super, wenn ihr mal drüber schaut und mir sagt, wie ihr das lösen würdet.
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="navigation" class="list listWithoutPoints">
<li><a href="#">Links1</a></li>
<li><a href="#">Links2</a></li>
<li><a class="buttonThree" href="#">Rechts1</a></li>
<li><a class="buttonFour" href="#">Rechts2</a></li>
</ul>
<div id="content">
</div>
</body>
</html>
* {
padding: 0px;
margin: 0px;
}
body {
width: 880px;
margin: 0px auto;
background: blue;
}
#content {
height: 400px;
clear: both;
border: 1px solid black;
border-left-color: white;
border-top-color: white;
}
#navigation {
float: left;
width: 880px; background: red;
}
#navigation li {
float: left;
}
#navigation a {
display: block;
width: 86px;
height: 35px;
line-height: 35px;
margin: 0px 2px 0px 0px;
text-align: center;
text-decoration: none;
border: 1px solid black;
border-left-color: white;
border-top-color: white;
}
#navigation .buttonThree {
margin: 0px 2px 0px 523px;
}
#navigation .buttonFour {
margin: 0px 0px 0px 0px;
}
#navigation a:hover {
color: white;
background: #a00705;
}
.listWithoutPoints{
list-style: none;
}
-
Lieber Anton,
Du brauchst weder die Klasse "list", noch die Klasse "listWithoutPoints", da Du alles über
#navigationmachen kannst.Unter Zugänglichkeitsaspekten würde ich der Liste noch eine passende Überschrift spendieren (und das ganze in ein <div> verpacken).
<div id="navigation"> <h2>Navigation</h2> <ul> <li>... </ul> </div>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
@@Anton:
#navigation {
width: 880px;Nicht die beste Idee. Du weißt nicht, wie breit der Viewport des Nutzers ist.
#navigation .buttonThree {
margin: 0px 2px 0px 523px;Dito.
Schonmal über 'float: right' für 'buttonThree' und 'buttonFour' nachgedacht?
Und warum sind das Klassen? Sieht eher nach IDs aus. Und die Benennung nicht nach Zahlen, sondern nach der Funktion:
<ul id="navigation"> <li id="navigation-home"><a href="home">Home</a></li> <li id="navigation-about"><a href="about">Über mich</a></li> <li id="navigation-kontakt"><a href="kontakt">Kontakt</a></li> <li id="navigation-sitemap"><a href="sitemap">Sitemap</a></li> </ul>Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
#navigation {
width: 880px;Nicht die beste Idee. Du weißt nicht, wie breit der Viewport des Nutzers ist.
Naja das ist zwar richtig, aber 1024 Pixel in der Breite haben wohl die meisten mindestens eingestellt. Der Abstand auf der linken bzw. rechten Seite steigt dann einfach mit steigender Auflösung. Das ist doch nicht weiter schlimm. Wie würdest du das denn machen?
Schonmal über 'float: right' für 'buttonThree' und 'buttonFour' nachgedacht?
Genaus das habe ich gerade so probiert:
#navigation .buttonThree { float: right; } #navigation .buttonFour { float: right; }Klappt aber nicht. ne Ahnung warum?
Und warum sind das Klassen? Sieht eher nach IDs aus.
Ich habe auch zunächst versucht IDs zu verwenden. So:
<ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Über uns</a></li> <li><a id="buttonKontakt" href="#">Kontakt</a></li> <li><a id="buttonImpressum" href="#">Impressum</a></li> </ul>Das Problem ist dann folgendes. Laut der Spezifität-Tabelle (siehe: <http://de.selfhtml.org/css/formate/kaskade.htm@title=Tabelle Spezifität>) hat
#navigation a { ... }eine höhere Priorität als
#buttonKontakt { ... } #buttonImpressum { ... }Dadurch hat die margin-Zuweisung in "buttonKontakt" und "buttonImpressum" keine Wirkung. Ich wußte mir nicht anders zu helfen und habe deshalb Klassen verwendet. Zunächst hab ich versucht die höhere Spezifität zu erreichen indem ich vorne noch die id Navigation angegeben habe. Das klappt aber nicht. Scheint syntaktisch nicht korrekt zu sein.
#navigation #buttonImpressum { ... }Für Alternativvorschläge deinerseits wäre ich dankbar.
-
Hi,
Du weißt nicht, wie breit der Viewport des Nutzers ist.
Naja das ist zwar richtig, aber 1024 Pixel in der Breite haben wohl die meisten mindestens eingestellt.
Die Nutzung mobile Endgeraete nimmt immer weiter zu - aber mit teilweise weitaus geringeren Display-Aufloesungen.
Ausserdm sollte es doch langsam klar sein, dass die "Aufloesung" keinerlei Relevanz hat.
Das Browserfenster muss keineswegs maximiert sein, und zusaetzliche Toolbars/Seitenleisten koennen den Platz weiter verringern.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Die Nutzung mobile Endgeraete nimmt immer weiter zu - aber mit teilweise weitaus geringeren Display-Aufloesungen.
Ausserdm sollte es doch langsam klar sein, dass die "Aufloesung" keinerlei Relevanz hat.
Das Browserfenster muss keineswegs maximiert sein, und zusaetzliche Toolbars/Seitenleisten koennen den Platz weiter verringern.Da hast du natürlich Recht.
Bisher hatte ich mir diesbezüglich recht wenig Gedanken gemacht und mich dementsprechend mit mit diesem Thema kaum beschäftigt.
Kannst du mir vielleicht einen Artikel empfehlen der sich genau mit diesem Thema beschäftigt. Es geht dabei im besoneren darum, seine Webseite so zu gestalten, dass sie unabhängig vom Endgerät (Browser, PDA, Handy usw.) und unabhängig von der Größe des Viewports richtig dargestellt wird.
-
Hallo.
Kannst du mir vielleicht einen Artikel empfehlen der sich genau mit diesem Thema beschäftigt.
Ich empfehle dir eine kleine Auswahl.
MfG, at
-
-
-
Zunächst hab ich versucht die höhere Spezifität zu erreichen indem ich vorne noch die id Navigation angegeben habe. Das klappt aber nicht. Scheint syntaktisch nicht korrekt zu sein.
[code lang=css]
#navigation #buttonImpressum {
...
}glaub ich nicht, das ist syntaktisch völlig in ordnung und auch gängige praxis
-
-