Anton: horizontale Navigation richtig formatieren

Beitrag lesen

SELF-Forum

horizontale Navigation richtig formatieren

Anton
– Informationen zu den Bewertungsregeln

Hallo,

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;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln