Horizontale Navi

[sebastian1992]

Hallo,

ich schreibe gerade eine horizontale Navigation. Jedoch habe ich jetzt mir unerklärliche Abstände.

<ul id='navi'>
  <li><a href='home' title='Hauptseite'>Hauptseite</a></li>
  <li><a href='projekt' title'Projekt'>Projekt</a></li>
</ul>

#navi{
 list-style-type: none;
 display: block;
 background-color: #1E90FF;
 border: #000000 solid 1px;
 margin: 0px;
 padding: 0px;
}
#navi li{
 display: inline;
 border-right: #000000 solid 1px;
 margin: 0px;
 padding: 0px 15px;
 color: #ffffff;
}
#navi li:hover{
 background-color: #ffffff;
 color: #1E90FF;
}
#navi a, #navi a:hover, #navi a:visited, #navi a:active{
display: inline;
 color: inherit;
 text-decoration: none;
}

Der boder-right geht nicht bis komplett oben, also es ist ein Abstand zwischen dem Rahmen der Liste und dem Rechten Rahmen der Listenpunkte.

Außerdem ist ein ABstand links zwischen dem Linken Rahmen der Listenpunkte und dem nächsten Listenpunkt. Das sieht man bei Havoer, da ist nicht alles weiß.

Gruß Sebastian

[Powl]

Hallo,

»» <ul id='navi'>  

>   <li><a href='home' title='Hauptseite'>Hauptseite</a></li>\n  
>   <li><a href='projekt' title'Projekt'>Projekt</a></li>  
> </ul>

Da wo ich den \n ergänzt habe wird ein Zeilenumbruch eingefügt, der wie ein Leerzeichen einen Leeraumraum bewirkt. Das ließe sich so vermeiden:

<ul id='navi'>  
  <li><a href='home' title='Hauptseite'>Hauptseite</a></li><li><a  
  href='projekt' title'Projekt'>Projekt</a></li>...  
</ul>

vermutlich wäre es aber sinnvoller wenn Du Dich mit float beschäftigst.

netten Tag
^da Powl

[sebastian1992]

Hallo,

»» <ul id='navi'>

<li><a href='home' title='Hauptseite'>Hauptseite</a></li>\n
  <li><a href='projekt' title'Projekt'>Projekt</a></li>
</ul>

>   
> Da wo ich den \n ergänzt habe wird ein Zeilenumbruch eingefügt, der wie ein Leerzeichen einen Leeraumraum bewirkt. Das ließe sich so vermeiden:  
>   
> ~~~html

<ul id='navi'>  

>   <li><a href='home' title='Hauptseite'>Hauptseite</a></li><li><a  
>   href='projekt' title'Projekt'>Projekt</a></li>...  
> </ul>

vermutlich wäre es aber sinnvoller wenn Du Dich mit float beschäftigst.

netten Tag
^da Powl

floaten habe ich auch schon versucht, aber dann was das ul so, als ob es keinen Inhalt hat und die Listenpunkte waren darunter, sprich, keinen Rahmen mehr und auch der blaube hintergrund weg.

[Steel]

Hi!

Argh. Zitier doch nicht alles! Schon gar nicht wenn das Zitat kaputt ist und quasi alles als Zitat erkannt wird. Ich sehe dann immer nur eine grosse graue Flaeche aus der ich mir die Antworten raussuchen darf.

floaten habe ich auch schon versucht, aber dann was das ul so, als ob es keinen Inhalt hat und die Listenpunkte waren darunter, sprich, keinen Rahmen mehr und auch der blaube hintergrund weg.

Natuerlich. Float entfernt ja auch die gefloateten Elemente aus dem Dokumentfluss. Du musst da schon irgendwo ein clear einbauen.

[sebastian1992]

Hi!

Hallo

Argh. Zitier doch nicht alles! Schon gar nicht wenn das Zitat kaputt ist und quasi alles als Zitat erkannt wird. Ich sehe dann immer nur eine grosse graue Flaeche aus der ich mir die Antworten raussuchen darf.

OK, werd ich machen!

Natuerlich. Float entfernt ja auch die gefloateten Elemente aus dem Dokumentfluss. Du musst da schon irgendwo ein clear einbauen.

Ok, das macht Sinn.

ps: was ist mit dem Abstand oben??

Gruß Sebastian

[Powl]

Hallo,

ps: was ist mit dem Abstand oben??

margin-top: ? Oder was soll damit sein?

netten Tag
^da Powl

[sebastian1992]

margin-top: ? Oder was soll damit sein?

Ich meine da oben ist doch zwischen dem Border Left und dem Rahmen des ul ein kleiner Abstand.

Und bei li habe ich margin :0; angnegeben und jetzt verstehe ich nicht, warum da dieser Abstand ist.

[Powl]

Hallo,

Ok, das macht Sinn.

BTW: "Sinn machen" wird üblicherweise zügig korrigiert, wart's ab ...

:D

netten Tag
^da Powl

[Powl]

Hallo,

Natuerlich. Float entfernt ja auch die gefloateten Elemente aus dem Dokumentfluss. Du musst da schon irgendwo ein clear einbauen.

Nicht ganz. Es kann auch genügen, dem umgebenen Element, also wie hier [code en lang=html]<ul>[/code] für IE hasLayout zu geben (z.B. height:1%;) und für Browser die overflow-Eigenschaft zu setzen (hidden oder auto).
Dadurch erreicht man, dass das umgebende Element als eigener Bereich gilt und floats von darin enthaltenen Elementen nur für diesen Bereich gelten.
Dabei sollte overflow vor dem IE aber versteckt werden, das ältere Versionen z.B. bei krusiver Schrift bei overflow:auto; horizontale scrollbars erzeugen.

netten Tag
^da Powl