Neues Webdesign Hilfe bei der Navigation

Moin Moin,

ich realisiere gerade mit contao meine neue webseite und ich brauche eure hilfe bei dem navigationsmenü.
Ihr seht es ist blau und unter einander. Ich möchte es neben einader mit abstand in der leiste haben. die punkte sollen weg. farbe erstmal braun. und beim hover drauf und geklickt hellblau.
Css ist nicht so meine Stärke, ich hoffe ihr könnt helfen. Farben passe ich dann selber an, wenn ich den Code sehe.

Navigation id = navi_main
Link: www.minecraftsource.de/minecraftsource

Cydox ;)

Ach Kinders ... ;-)

Navigationen sind Listen. Wie man Listen formatiert erklärt Peter Müller auf LittleBoxes ganz prima.

Mal von den Sprites abgesehen solltest du auch unter http://de.contaowiki.org/Navigation_...fiken_-_Sprite genügend Anregungen finden.

Carolina.

Okay danke. Dann noch eine Frage. Ich möchte im Footer eine zweite Navigation haben, aber ich kann ja nur eine Seitenstruktur erstellen, Module natürlich ganz viele. Wie bekomme ich neue Seitenpunkte in die Module?

Stichwort: 'individuelle Navigation' (s. http://de.contaowiki.org/Navigation)

Gruß, folkfreund

Hallo Cydox,
da du anscheinend die Normale Navigation noch nicht so kennst:
http://de.contaowiki.org/ModulNavigation

Viele Grüße

Moin,

folgendes Problem...ich bin mit meiner Navi schon ziemlich zufrieden, nur..
als hover ist n bg gewählt (gelb), bekomme ich es hin das die active seite keine box bekommt? dann es wird auch nicht die richtige dargestellt, sondern nur eine kleine..

mensch hab ich mich aber auch gut ausgedrückt! :D

Code:

---

#navigation
{
        margin-right:auto;
        padding-top:140px;
        padding-left:44px;
        font-family:Helvetica;
        font-weight:bold;
}



.mod_navigation ul.level_1 span.active
{
        color:#FF0000;
        background-color:none
}



.mod_navigation ul.level_1 span.active
{
        text-align:center;
          display:block;
          font-family:helvetica;
          font-color:#FF0000;
}



.mod_navigation ul.level_1 span.active:hover,
.mod_navigation ul.level_1 span.active:focus,
.mod_navigation ul.level_1 span.active:active
{
        color:#FF0000;
}



.mod_navigation ul.level_1 li
{
        float:left;
          display:block;
          margin:0 4px 3px;
          padding:5px 10px;
}



.mod_navigation ul li:hover,
.mod_navigation ul li:active,
.mod_navigation ul li:focus
{
        background-color: #FFD600
}



.mod_navigation ul li:hover ul.level_2,
.mod_navigation ul li:active ul.level_2,
.mod_navigation ul li:focus ul.level_2
{
        margin:5px 0 0 -10px;
}



.mod_navigation ul.level_1 li a
{
        padding-bottom:16px;
        display:block;
          color:#FFD600;
          text-decoration:none;
          text-align:center;
}



.mod_navigation ul.level_1 li:hover a,
.mod_navigation ul.level_1 li:active a,
.mod_navigation ul.level_1 li:focus a
{
        color:#FF0000
}



.mod_navigation ul.level_2
{
        padding-bottom:22px;
        background-color:#FF0000;
        width:120px;
          position:absolute;
          display:block;
}

---

danke schon jetzt.. :)

Zitat:

---

Zitat von Marionetti

mensch hab ich mich aber auch gut ausgedrückt! :D

---

Yo. Und mit einem Link könnte man vermutlich auch weiterhelfen.

Contao wiki ist hilfreich. die muss neu sein.

okay sry für die schlecht beschreibung..
hier zwei scrennshots, der erste zeigt die navi in action (d.h. den hover [der ja auch das Problem darstellt :)])
der zweite das Problem, dieser "gelbe Bg" geht einfach nicht weg, obwohl er meiner meinung nach nicht def. ist...HILFFEEE!!!

[ http://i104.photobucket.com/albums/m...te/Screen1.jpg ]


[ http://i104.photobucket.com/albums/m...te/screen2.jpg ]

Hallo Marionetti,

mit Link wäre es natürlich einfacher. Ich weis nicht ob ich dich richtig verstanden habe.

Änder mal diese Zeile in deinem CSS

Code:

---

.mod_navigation ul li:hover,
.mod_navigation ul li:active,
.mod_navigation ul li:focus
{
        background-color: #FFD600
}

---

in diese:

Code:

---

.mod_navigation ul li:hover,
.mod_navigation ul li:focus
{
        background-color: #FFD600
}

---

Ich hoffe ich konnte dir weiter helfen

Link?
Wär wichtig den Quellecode zu sehen.

lg