Thema Navigation

Dusan09 · 13. April 2010

Hallo leute!

Ich habe eine Frage. Ich bin bei der Aufbau von einer Internetseite und bei dem Punkt: Navigation habe ich einige fragen. Kann mir jemand vielleicht sagen, wo ich mehr Infos über Aufbau von Navi bekommen kann?
Ich möchte eine Navi so aufbauen, dass bei einigen Punkten, wenn man mit den Punkt anklickt, oder über den Punkt mit dem Cursor ist, sich eine Liste öffnet mit mehreren links.

Danke im Voraus!

Sarkkan · 13. April 2010

Uihh, da kann dir Lauras behilflich sein, die hat da sowas erstellt
Ansonsten halt Tutorials über CSS =/

lauras · 13. April 2010

Jaha.. ich habe einen auskommentierten, ich denke halbwegs selbst erklärenden Code dazu Ich poste ihn hier mal, kannst es dir ja mal ansehn. Bei <a class="postlink" href="http://www.thestyleworks.de">http://www.thestyleworks.de</a> gibt es noch ein paar Feinheiten dazu.

Bei Fragen nur zu

Hier der Code:
(Die Benennung ist etwas komisch, nicht irritieren lassen xD

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Navigation</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />





<style>
<!-- 
/* ##################################### */
/* ######### BASIC PAGE STYLE ########## */
/* ##################################### */




* {                             /* setzt alle vom Browser voreingestellten Abstände auf 0*/
    padding: 0;
    margin: 0;
}




body {                        
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
}
/* ##################################### */
/* ############# MENU STYLE ############ */
/* ##################################### */




ul#main_menu {                        /* Hauptmenue */
    width: auto;
    list-style: none;                 /* keine Aufzählungszeichen */
    margin: 0.5em;
    height: 1.5em;
}




ul#main_menu li.main_menu_item {      /* Hauptmenue-Listenpunkte */
    position: relative;
    line-height: 1.5em;               /* Höhe und vertikale Zentrierung */
    float: left;                      /* Listenpunkte nebeneinander, Vermeidung eines Spaltes im IE */
    width: 10em;
}




ul#main_menu li a {                   /* Hauptmenue-Links */
    display: block;                   /* ganze Fläche anklickbar */
    padding: 0.5em;                   /* Abstand zum Rahmen */
    width: 11em;                      /* Box-Modell Hack für IE */
    w\idth: 10em;




}




/* ##################################### */
/* ########### SUB MENU STYLE ########## */
/* ##################################### */







li ul.sub_menu {                     /* Untermenues */
    position: absolute;              /* absolut positioniert */
    left: -999em;                    /* im nicht gehoverten Zustand außerhalb des Blickfelds */
    width: 10em;




}




ul.sub_menu li.sub_menu_item {       /* Untermenue-Listenpunkte */
    list-style: none;                /* keine Aufzählungszeichen */
    line-height: 1.5em;              /* Höhe und vertikale Zentrierung */
}




ul#main_menu li:hover ul.sub_menu, 
ul#main_menu li:focus ul.sub_menu {  /* Untermenue Zustand, wenn Listenpunkte des Hauptmenues gehovert/vorausgewählt werden */
    left: auto;                      /* normaler Links-Wert */




}


-->
</style>




</head>




<body>
<ul id="main_menu">                                                                                                                                                                 
    <li class="main_menu_item"><a id="" href="#" title="Zur Startseite">Startseite</a></li>                                                                                         
    <li class="main_menu_item"><a id="" href="" title="">Spielrunden</a>                                                                                                            
<!--          
        <ul class="sub_menu">                                                                                                                                                       
            <li class="sub_menu_item"><a id="" href="#" title="Erstelle eine neue Spielrunde nach deinen W&uuml;nschen!">Neue Spielrunde erstellen</a></li>                         
            <li class="sub_menu_item"><a id="" href="#" title="Tritt einer vorhandenen Spielrunde bei!">Einer Spielrunde beitreten</a></li>
            <li class="sub_menu_item"><a id="" href="#" title="Verwalte von dir erstellte Spielrunden!">Spielrunden verwalten</a></li>
        </ul> 
-->
    </li>
    <li class="main_menu_item"><a id="" href="" title="">Charactere</a>                                                                                                             




<!--        
        <ul class="sub_menu">
            <li class="sub_menu_item"><a id="" href="#" title="Schau dir Charactere von anderen Spielern an!">Characterbrowser</a></li>
            <li class="sub_menu_item"><a id="" href="#" title="Erstelle deine eigenen Charactere!">Eigenen Character erstellen</a></li>
            <li class="sub_menu_item"><a id="" href="#" title="Bearbeite und verwalte deine eigenen Charactere!">Eigene Charactere</a></li>
        </ul>
-->        
    </li>
    <li class="main_menu_item"><a id="" href="#" title="Link 4">Impressum</a></li>
</ul>




</body>
</html>

Alles anzeigen

Dusan09 · 14. April 2010

das wird mir sehr viel helfen. ich bedanke mich sehr.

lauras · 14. April 2010

Kein Problem Kannst du von mir aus auch beliebig verwenden, wenn du fragen hast frag einfach

Dusan09 · 14. April 2010

Hallo noch einmal!

Ich habe mit Hilfe des Codes von Lauras eine Navi für meine Seite etwickelt.
Nun, ich habe ein kleines Problem. Ich möchte gerne die Abstände zwischen Buttons verkleinern, aber irgenwie schafe ich dass nicht. Meine Idee ist alle Buttons auf eine Breite von 750px zu platzieren, und die sollen alle in einer Linie sein. Wäre das mit diesem Code möglich?

Hier noch einmal der Code und die css datei dazu:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Navi</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="navi.css" type="text/css" rel="stylesheet" />




</head>




<body>
    <ul id="navi">
        <li class="punkte"><a href="">Startseite</a></li>
        <li class="punkte"><a href="">Eure Freunde</a>
            <ul class="unter_navi">
                <li class="unter_punkte"><a href="">Unsere Manschaft</a></li>
                <li class="unter_punkte"><a href="">Aktuelle Tabelle</a></li>
            </ul>
        </li>
        <li class="punkte"><a href="">Wo sind wir?</a></li>
        <li class="punkte"><a href="">Unsere Geschichte</a></li>
        <li class="punkte"><a href="">Spielberichte</a></li>
        <li class="punkte"><a href="">G&auml;stebuch</a></li>
        <li class="punkte"><a href="">Media</a>
            <ul class="unter_navi">
                <li class="unter_punkte"><a href="">AF und Turniere</a></li>
                <li class="unter_punkte"><a href="">Aus der Zeitung...</a></li>
                <li class="unter_punkte"><a href="">Galerie</a></li>
            </ul>
        </li>
        <li class="punkte"><a href="">Impressum</a></li>
        <li class="punkte"><a href="">AGB</a></li>
    </ul>




</body>
</html>

Alles anzeigen

css:

Code

* {
    padding: 0;
    margin: 0;
}




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




ul#navi
{
    width: auto;
    list-style: none;
    margin: 0.5em;
    height: 1.5em;
}




ul#navi li.punkte
{
    position: relative;
    line-height: 1.5em;
    float: left;
    width: auto;




}




ul#navi li a
{
    display: block;
    padding: 0.5em;
    width: 10em;
    w\idth: 10em;




}




li ul.unter_navi
{
    position: absolute;
    left: -999em;
    width: 10em;




}




ul.unter_navi li.unter_punkte
{
    list-style: none;
    line-height: 1.5em;
}




ul#navi li:hover ul.unter_navi,
ul#navi li:focus ul.unter_navi
{
    left: auto;
}

Alles anzeigen

lauras · 14. April 2010

Natürlich ist das möglich, dafürmusst du einfach alles was mit "width" (Breite) zu tun hat verändern.

Dann gibst du der ganzen Navi eine Breite, in deinem Fall 750px und teilst es durch die Anzahl deiner Listenpunkte.

Empfehlen würde ich, die Breite in em zu lassen, ist meist praktischer für die Anzeige.

Wichtig ist noch dieser Teil:

Code

padding: ...
width: ...
w\idth: ...

Wie daneben stand, ist das der Box-Modell-Hack für den IE, für den padding-left und padding-right zur Breite dazuaddiert werden müssen.
Mit width gibst du dem IE seine Breite, mit w\idth (was der IE nciht versteht) allen anderen Browsern wieder die richtige.
Das musst du beachten, bei dir hast du jetzt zweimal den gleichen Wert stehen.

Vielleicht solltest du die Kommentare auch stehen lassen, bis du fertig bist, damit du auch zwischendruch alles verstehst.

Gruß
Laura

AnTrOn · 14. April 2010

und wie ist das für den IE da dort ja das display: block; nich funktioniert!
da gab es doch einen javascript code um das zu umgehen

lauras · 14. April 2010

Dieser Fakt ist mir neu.
Natürlich kenn der IE display: block;, nur das Box-Modell wendet er falsch an.

AnTrOn · 17. April 2010

ne das geht net zum mindest bei mir

und das bei mehreren seiten

im forum wurd dazu auch schon ma was geschrieben finde es aba gerade ne mehr war glaube von basiii

Thema Navigation

Jetzt mitmachen!

Teilen