Ergebnis 1 bis 5 von 5

Thema: navi

  1. #1
    Gast
    Gast

    Standard navi

    Hi,
    ich hab grade ne Navi-leiste entdeckt und ne kurze frage:

    <html>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css"/>

    <!--[if IE]>
    <style type="text/css" media="screen">
    #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    </head>


    <div id="menu">
    <ul>[*]<h2>Titel 1</h2>
    <ul>[*]eins[*]zwei ...
    <ul>[*]zwei a[*]zwei b[*]zwei c[*]zwei d[/list]
    [*]drei ...
    <ul>[*]drei a[*]drei b ...
    <ul>[*]drei b i[*]drei b ii[*]drei b iii[/list]
    [*]drei c[/list]
    [/list]
    [/list]
    </div>
    CSS

    #menu { width: 80px; background: #eee; }

    #menu ul { list-style: none; margin: 0; padding: 0; }

    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb;
    margin: 0; padding: 2px 3px; }

    #menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; }

    #menu a { color: #000; background: #efefef; text-decoration: none; }

    #menu a:hover { color: #a00; background: #fff; }

    Hier legen wir die Breite der Menu-Einträge (80px), Schriftart, Rahmen-, Text- und Hintergrundfarben fest und schalten die Listenzeichen ab. Mit der Zeilenhöhe (16px) regulieren wir die Höhe der Einträge. display: block sorgt dafür, dass Titel und Links stets die ganze Breite ausfüllen.

    Bleiben noch Fragen der Positionierung zu klären:

    #menu li { position: relative; }

    #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }

    div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;}

    div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}
    #menu { width: 100%; background: #eee; float: left; }

    #menu ul { list-style: none; margin: 0; padding: 0; width: 80px; float: left; }

    #menu a, #menu h2
    { font: bold 11px/16px arial, helvetica, sans-serif;
    display: block; border-width: 1px; border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0; padding: 2px 3px; }

    #menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; }

    #menu a { color: #000; background: #efefef; text-decoration: none; }

    #menu a:hover { color: #a00; background: #fff; }

    #menu li {position: relative;}

    #menu ul ul { position: absolute; z-index: 500; }

    #menu ul ul ul { position: absolute; top: 0; left: 100%; }

    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}

    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
    wie bekomm ich weitere horizontalliegende Hauptpunkte hin?

    THX
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    würd sagen nach dem letzten einfach weitermachen mit[*]vier....
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Gast

    Standard

    danke driver,
    das funktioniert schon mal!
    Wie kann ich jetzt noch verhindern,
    dass die navileiste sich aufteilt und ein paar der Felder
    eine Zeile nach unten rutschen, wenn ich das Fenster kleiner mache??
    also wenn ich das Fenster auf größter Größe habe siehts gut aus, wenn ich dann aber zB ICQ starte,
    verrutsch alles und sieht dumm aus, weil dann zwei der Felder untereinander liegen...

    THX

  4. #4
    Gast

    Standard

    wenn ihr versteht, was ich meine

  5. #5
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    versuch mal die % werte fest in px anzugeben,
    dann sollte es klappen...
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

Ähnliche Themen

  1. CSS- navi
    Von radeon55 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.03.2008, 11:12
  2. Navi
    Von Bozz Maxx im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 05.02.2008, 01:30
  3. navi
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 04.04.2007, 15:49
  4. FLash Navi
    Von tepsch im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 29.05.2006, 13:17
  5. Navi CSS
    Von Mad_Dog im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.05.2006, 17:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •