universalattribute u horizontalie Navigation

html.de-Forum HTML, XHTML & CSS
1

Vorab die Information, es dreht sich um folgenden Quelltext:

CSS-Datei:

[HTML]body {
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {margin-left:40px;
margin-top:35px
}

#navibereich {
margin: 0em; padding: 2em;
border: 1px solid black;
background-color: E5FFFF;
text-align: center;
margin-top: 0px;
margin-right: 40px;
margin-left:40px
}

/* -------NUN DER WICHTIGE TEIL------------ */

#ul navibereich {

padding: 4px 0px; /* Innenabstand: oben/unten 4px, li/re 0 /
margin: 4x; / Keinen Außenabstand /
display: inline; / Listenelemente nebeneinander /
list-style-type: none; / Aufzählungszeichen entfernen */
}

#li navibereich {
float: left;
position: relative;
width: 8em;
}

#ul navibereich li {
display: none;
position: absolute;
top: 10em;
left: 0;
}

#li navibereich hover ul {
display: block
}

a:link {font-weight:bold; color: 3300CC; text-decoration:none; }
a:visited: {font-weight:bold; color: grey; text-decoration:none; }
a:focus: {font-weight:bold; color: red; text-decoration:none; }
a:hover {font-weight:bold; color: 003300; text-decoration:none; }
a:active {font-weight:bold; color: 4C4C66; text-decoration:none; }

g:focus { background-color:red; }

g:hover { background-color:silver; }

g:active { background-yellow:red; }

[/HTML]

Index-Datei:

[HTML]

Herzlich Willkommen

Logo

ansicht

Funktionsanalyse Südwest

[/HTML]

Ich möchte die Navigation einfach horizontal (und vor allem OHNE Listenzeichen) angeordnet haben und dann noch bei dem einen oder anderen Link einfach eine „Unternavigation“ in Blockform ausgeben, sofern man mit der Maus drüber geht(hover). In der Theorie passt das ja prima, aber in der Praxis haperts ganz schön. Wo liegt denn genau der Fehler…? Kenne mich mit der Syntax von Universalattribute nicht sonderlich gut aus. Selfhtml bringt mich da auch nicht wirklich weiter. Wäre Dankbar, wenn ihr mir zeigt, wie s richtig geht…

2

Eine horizontale Navigation erreichst du, indem du den Listenelementen float: left gibst. Nichts mit relativer und absoluter Positionierung, einfach float: left.

Deine Unternavigation ist schon fast richtig, nur das von Privat muss die Unternavigation umschließen, also so:

[html]

  • Privat
    • [/html]

    Sinnvoll ist es dann, der Unternavigation eine Klasse zu geben und display auf none zu setzen, so ist sie ausgeblendet. Dem Listenelement, welches eine Unternavigation enthält, gibst du eine andere Klasse und setzt display wieder auf block, wenn das Listenelement gehovert wird.

    3

    Dir sind da wohl ein paar Fehler unterlaufen beim benutzen meines Quelltextes :smiley:
    alsoo
    in css werden elemente mit ids mit # gekennzeichnet-
    Klassen mit .
    und elemente als solches ohne prefix.
    Hier mal eine kleine Abänderung
    [HTML]
    body {
    font-size: small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }

    h1 {margin-left:40px;
    margin-top:35px
    }

    #navibereich {
    margin: 0em; padding: 2em;
    border: 1px solid black;
    background-color: E5FFFF;
    text-align: center;
    margin-top: 0px;
    margin-right: 40px;
    margin-left:40px
    }

    /* -------NUN DER WICHTIGE TEIL------------ */

    #navibereich li{

    padding: 0px 0px; /* Innenabstand: oben/unten 4px, li/re 0 /
    margin: 0px; /     Keinen Außenabstand /
    display: inline; /     Listenelemente nebeneinander /
    list-style-type: none; /     Aufzählungszeichen entfernen */
    }

    #navibereich li {
    float: left;
    position: relative;
    width: 8em;
    }

    #navibereich li ul {
    display: none;
    position: absolute;
    margin-top: 0em;

    }

    #navibereich li:hover ul {
    display: block;
    }

    a:link {font-weight:bold; color: 3300CC; text-decoration:none; }
    a:visited: {font-weight:bold; color: grey; text-decoration:none; }
    a:focus: {font-weight:bold; color: red; text-decoration:none; }
    a:hover {font-weight:bold; color: 003300; text-decoration:none; }
    a:active {font-weight:bold; color: 4C4C66; text-decoration:none; }

    g:focus { background-color:red; }

    g:hover { background-color:silver; }

    g:active { background-yellow:red; }
    [/HTML]

    Ansonsten den Quelltext so bearbeiten wie Thor es gesgat hat :D.
    Und so nebenbei. Ich bezweifle dass du g elemente einsetzt, da diese nur in SVG eingesetzt werden :smiley: Somit kannst du die letzten 3 Zeilen streichen in deinem css :smiley:

    4

    Zunächst mal vielen Dank für Eure Antworten! Bin soweit auch ein grosses Stück weiter gekommen…Jetzt habe ich nur noch (so hoffe ich doch, Kleinigkeiten;-))

    1. Punkt: Was das Hovern angeht: Wenn ich mit der Maus bspw. über Privat gehe, wird das erhoffte Untermenü angezeigt, soweit ok. Wenn ich dann aber mit der Maus einen der Untermenüpunkte anwählen will, verschwindet das Untermenü zu schnell und ich kann mit der Maus nichts auswählen. (hoffe ich konnte mich klar genug ausdrücken;-))
      2.Punkt: Wenn ich bespielsweise auf Privat gehe und das Untermenü angezeigt wird, dann (so denke ich mal,) sollte sich der Abstand nach unten etwas vergrößern, dass die komplette Untermenüleiste sichtbar ist und nicht andere andere Sachen (beispielsweise Graphik oder h1Überschrift überlagert). Wie wird so etwas von gelöst?
      3.Punkt: (Ich weiss, jetzt wirds langsam peinlich, also bitte seid gnädig zu mir…):
      Wenn ich nun Seiten einbinden will, aber die Navileiste folglich immer sichtbar haben will, wie wird das gelöst (beispielsweise wenn ich auf Wir über uns gehe, dann soll ca. 5cm weiter unten die Wirüberuns Seite geöffnet werden oder wenn ich auf einen Unterpunkt von Privat gehe, dann soll eben entsprechende Seite unterhalb der Menüleiste angezeigt werden. Wie wird dies von einem geübten Programmierer gelöst (so dass es auch gut aussieht…) Schäm
      Hoffe, wenn diese Problempunkte alle gelöst sind, dann kann ich hoffentlich loslegen…

    Bis dahin mal noch einmal herzlichen Dank"!!!

    5

    zu Punkt 1: Das kommt daher, dass du den ul Bereich verlässt bevor du auf das untermenu kommst. Du solltest margin: 0 wählen, sodass das Untermenü direkt am ul liegt. Am besten siehst du es wenn du dem ul einen background verpasst.

    Punkt 2: Da du nicht mit margin arbeiten kannst must du mit padding arbeiten wenn du das untermenu weiter unten haben willst. Das Überlagern von Überschriften und Bildern ist schon ganz gut. Sieht natürlich nur nicht gut aus, wenn man keinen Hintergund für die Untermenus definert hat. Deswegen sieht Punkt 1 und du wirst sehen, dass es nicht schlimm ist die grafiken bzw Überschriften zu überlagern.

    Punkt 3:
    In jede Seite kopierst du deine navigation samt css (oder wenn du php benutzen kannst packe dein menu in eine extra datei und include diese auf jede seite). Dass Platz unten ist kriegst du mit margin-bottom hin. Dafür gibst du #navibereich ein margin-bottom. In cm wird nicht gearbeitet, also nimmst du zum Beispiel 2em. Teste es mal aus