Zum Inhalt springen

Naviagtion CSS / Text ausrichten


nefertari05

Empfohlene Beiträge

Hallo,

ich bin gerade dabei mich mit css vertraut zu machen. Ich bastel gerade an einer horizontalen Navigation mit einer Unterbene die vertikal ausgerichtet ist. Nun habe ich eine Frage.

Das Bild im Anhang zeigt die Navigation, nun meine Frage, kann man es einrichten das die Links (Text z.B. "Allgemeines") in dem Rahmen weiter links positioniert werden?

Ich habe den text mit "left" angegeben, aber dennoch ist so ein großer Abstand links.

Hat jemand eine Idee? Was von dem Code benötigt ihr?

<style type="text/css">

  body, p a {

    font: normal 100.01% verdana, Arial, sans-serif;

    font-size:small;

    color: black; 

    background-color: white;

  }


* html body {

	font-size:x-small;

	f\ont-size:small;

}


  div#Rahmen {

    width: 70em; 

    padding: 0.8em;

    background-color: white;

  }

  * html div#Rahmen { 

    width: 65.7em;

    w\idth: 64.1em;

  }

  div#Rahmen div {

     clear: left;

  }

  ul#Navigation {

    margin: 0; padding:0; 

    text-align: left; 

  }


  ul#Navigation li {

    list-style: none;

    float: left;  

    position: relative;

    margin: 0; padding: 0;

  }

  * html ul#Navigation li {  

    margin-bottom: 0em;

  }


  ul#Navigation li ul {

    margin: 0; padding: 0;

    position: absolute;

    top: 1.9em; left: 0em; 

    display: none;

  }

  * html ul#Navigation li ul {  

    left: -1.5em;

    lef\t: 0em;

    top:1.9em;

    to\p:1.9em;


  }

  ul#Navigation li:hover ul {

    display: block;

  }

  ul#Navigation li ul li {

    float: none;

    display: block;

    margin-bottom: 0em;

  }


  ul#Navigation a, ul#Navigation span {

    display: block;

    width: 8em;  

    padding: 0.3em 1em;

    text-decoration: none; font-weight: bold;

    border: 1px solid black;

    border-left-color: white; border-top-color: white;

    color: white; background-color: blue;

  }

  * html ul#Navigation a, * html ul#Navigation span {

    width: 8.4em;   

    w\idth: 8.4em;  

  }

ul#Navigation a:hover, ul#Navigation span, li a#aktuell {

    border-color: white;

    border-left-color: black; border-top-color: black;

    color: black; background-color: white;

  }

  li a#aktuell {  

    color: maroon; background-color: white;

  }

  ul#Navigation li ul span {

    background-color: white;

  }


</style>

Schöne Grüße,

Nefertari

post-27528-14430447368003_thumb.gif

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hallo mhel,

danke!!! Ich dachte ich hätte das schon getestet aber ich habe folgenden Wert geändert:

ul#Navigation a, ul#Navigation span {

    display: block;

    width: 8em;  

    padding: 0.3em [COLOR="Red"]1em[/COLOR]; !!!AUF 0 GESETZT!!!

    text-decoration: none; font-weight: bold;

    border: 1px solid black;

    border-left-color: white; border-top-color: white;

    color: white; background-color: blue;

  }

Hab noch mal vielen Dank!

Schöne sonnige Grüße,

Nefertari

Link zu diesem Kommentar
Auf anderen Seiten teilen

*g* nicht so ne überschwengliche Freude. Hab auch erst vor kurzem angefangen mich mit html zu beschäftigen und die css Probleme hatte ich auch schon.

Schau doch einfach mal hier im self html. Da sind erstmal die ganzen Abstände erklärt die es so gibt. Und sonst kannst auch einfach mal allgemein durch die Seite lesen. Dort findest immer was, was man einbauen kann und gut aussieht.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...