Horizontale Navi

[elo63]

Hallo,
weiss echt nicht mehr wie es funktioniert wenn ich

#navigation li {
   : inline
}

rausnehme ist die Navi trozdem noch Horizontal, aber laut css geht
das nicht erst wenn ich float in der navigation a regel rausnehme ist
es vertikal, wie kommt das wo ist der Fehler.
mfg

elo63

* {
    padding: 0px;
    margin: 0px;
  }
 

 body  {
   /* Gesamtschriftbündel */
    font-family: Arial, Helvetica, sans-serif;
   /* Hintergrundfarbe */
    background-color: #CCCCCC;
    margin-top: 25px; /* oberer Rand */
    text-align: center;  /* mittig */
    
 }
 

 /* DIV umspannt alles */
 #wrapper {  
    width: 780px;   
    background-color: white;
    margin: 0 auto;
    text-align: left; /* linksbündig */
 }
 

 /* DIV für Logo */
 #header {
   height: 140px; /* Höhe */
   background-color: gray;
   background-image: url(../img/podo_header.jpg);
 }  
 

 /* Überschrift 1 in diesem Header */
 #header h2 {
   font-variant: small-caps; /* Kapitälchen */
   color: white; /* in weiß */
 }
 

 /* DIV für Hauptbereich */
 #main {  
   font-size:18px;
   background-color: white;
   width: auto;
   padding-top: 70px;
   padding-left: 40px;
   padding-right: 40px;
   margin: 0px;
 }
 

 /* Überschrift 1 im Hauptbereich */
 #main h1 {
   color: #1285DA;  
 }
 

 /* DIV für Menübereich */
 # {
   background-color: #73AADE;
   width: 780px;
   height: 40px;
   float: left;
 }
 

 #navigation li {
   : inline;
 }
 

 #navigation ul {
   list-style-type: none;
 }
 

 /* DIV für Links im Navi */
 #navigation a {
   display: block;
   float: left;
   height: 24px;
   margin-left: 20px;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 9px;
   text-decoration: none;
   color: black;
 }
   
  #navigation a:hover {
   height: 22px;
   color: #FFFFFF;
   background-color: #999999;
   padding-top: 9px;
   }

 

[jimny1999]

AW: Horizontale Navi

Ich glaube, das ist kein Fehler, denn Du sagst zunächst:

#navigation a { display: block }

und dann für dasselbe Element float: left;

Die display-Anweisung verlangt einen Umbruch nach dem a-Element, die float-Anweisung verhindert ihn.

Du könntest natürlich das jeweils nächste li-Element clearen. Oder eben die float-Geschichte rausnehmen.

Wie sollte sich denn Deiner Meinung nach float verhalten? Bzw. was soll es machen?

 

[Chickenshooter]

AW: Horizontale Navi

moin

float steuert den Textfluss

eben links oder rechts herum

display:block; erzwingt eine Darstellung wie eine (<p> ist z.B. eines)

dh.



willst die eine hor. Nav. setze float:left in den css selector für die li 's
schreibe dann noch display:block; width:100%; text-align:center;

in den selector für die ul
width:200px;


und fortan werden deine li 's 200px breit (weil ul 200px ) sein und untereinander und die Links sind zentriert.

MfG