Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[CSS]horizontale Listennavi“

Askalon

Aktives Mitglied

HI
an alle CSS-Freaks
jetzt hab ich mich mal an einer CSS Navi versucht.
Vertikal funktioniert sie wunderbar, aber alle Tips diverser Tutorials wie ich daraus eine horizontale Navigation mache(display:inline), hauen nicht hin.

der Quellcode:
Code:
<body> 

<div class="main"> <div id="navigation">
<ul>
[*][url="#"]Show[/url]
[*][url="#"]Auftritte[/url]
[*][url="#"]Bilder[/url]
[*][url="#"]G&ste[/url]
[*][url="#"]Impressum[/url]
[*][url="#"]Links[/url]
[/list]
</div>[img]grafik/banner.jpg[/img]
Test
</div>
 
</body>
und die CSS:
Code:
#navigation {
   background-color: transparent;
   
   }
#navigation LI {
   background-color:black; /* gruen */
   padding: 0;
   margin: 0;list-style: none;
  
  
width: 101px;
list-style: none;
   
   }

#navigation UL {
   background-color: #6be; /* hellblau */
   padding: 0;
   margin: 0;
width: 100px;
   }

#navigation A {
   display:block;
   padding: 0;
   margin: 0;
border:1px solid #990000;
 

   }

#navigation A:link, #navigation A:visited {
   color: #FFCC00;
   background-color: #black;
   text-decoration: none;
   width: 100px;
   width: 100px !important;


   }

#navigation A:hover, #navigation A:focus {
   color: #FF3300;
   background-color:#666666;
   text-decoration: none;
   width: 100px;
   width: 100px !important;
   }

ich hoffe das mir hier jemand weiterhelfen kann.
danke schonmal

gruss
 
O

ollematze

Guest

hi,

als erstes würde ich es mal mit konsequenter kleinschreibung versuchen, auch im css.

gruß matthias

edit: #navigation ul {width:100px} ??? so kann das nicht funktionieren.
jeder listenpunkt hat doch bereits 100px breite.....
 

Askalon

Aktives Mitglied

HI
danke für den Tip.Ist bereinigt
Aber bringt mich in meinem Problem immer noch nicht weiter.
Insofern war dein post unsinnig
 
O

ollematze

Guest

das einzige was hier unsinnig ist ist deine beknackte antwort.
wenn meine versuche hilfestellung zu leisten als unsinnig bewertet werden kann ich es auch bleiben lassen.
ein "hilft mir leider nicht weiter" hätte es wahrhaftig auch getan.
bisher gefällt mir das forum ganz gut.....
 

TRex2003

Hat es drauf

sein post war nicht unsinnig...er hat dir versucht zu helfen und im übrigen recht gehabt: im webcode herrscht durchgehende kleinschreibung, der w3c validator rechnet dir das evt sogar als fehler an.

zu deinem problem: entferne das display: block; in #navigation A und dann kannst du auch display: inline; erfolgreich in #navigation li setzen..habe es eben ausprobiert.
 

Askalon

Aktives Mitglied

Hi
ich hatte mich ja auch bei ihm für den Tip bedankt.
hatte mich nur in meinem aktuellen Problem nicht weitergeholfen.
(die grossgeschriebenen Sachen waren blind kopiert, ich gebs ja zu :) )
habe es gerade selber rausgefunden.
Habs jetzt mit float:left; gelöst
da es ohne display:block; falsch dargestellt wird
trotzdem danke dir

gruss
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben