Antworten auf deine Fragen:
Neues Thema erstellen

Horizontale Navi

elo63

Nicht mehr ganz neu hier

Hallo,
weiss echt nicht mehr wie es funktioniert wenn ich
Code:
#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





Code:
* {
    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;
   }
 
Zuletzt bearbeitet von einem Moderator:

jimny1999

Nicht mehr ganz neu hier

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

Alter Mann

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben