CSS_Anfänger: CSS Navigation will nicht so recht....

SELF-Forum

CSS Navigation will nicht so recht....

CSS_Anfänger
– Informationen zu den Bewertungsregeln

Nabend Leute,
ich habe mir eine kleine CSS Navigation (Dropdown) zusammengebastelt.

Der CSS Code ist folgeder (in einer style.css) :

----------------------------------------------------------------------------

ul.dropdown * ul {
 list-style: none;
 margin:0px;
 padding:0px;
 display:none;
 position:absolute;
}

ul.dropdown li {
 list-style:none;
 float:left;
 font-weight:bold;
    padding:2px;
}

ul.dropdown li * li {
 float:none;
 background-color:black;
 font-size:10px;
 font-weight:normal;
 border-left:3px solid #cfcfcf;
 position: relative;
}

ul.dropdown ul * ul {
 left:98%;
 top:0;
 width:100%;
}

ul.dropdown a {
 display:block;
}

ul.dropdown ul * a {
 width:15em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
 display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
 display:block;
}

ul.dropdown a.has_submenu {
 background:
}

#nav {
 font:10px verdana;
     background-color:#f9f9f9;
}

#nav a {
 color:FF7F00;
 padding:3px;
 text-decoration:none;
}

#nav a:hover {
 background-color:CCCCCC;
 color:#000;
}

#nav a.is_blind {
 color:#cfcfcf;
}

#nav a.is_blind:hover {
 color:#cfcfcf;
}

#nav ul {
 background-color:#fff;
 border:1px solid #999;
}

----------------------------------------------------------------------------

Und meine index.html (zumindest der erste Teil danachfolg einfach nur die Liste, für das Menü) :

----------------------------------------------------------------------------

<html>
 <head>
   <title>Test HP</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <meta http-equiv="content-style-type" content="text/css">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <script src="js/js.js" type="text/javascript"></script>
  <script type="text/javascript"></script>
 </head>

<body bgcolor="black">
  <br><br /><center><img src="logo.png"></img><center>
  <div id="menu">
  <ul id="nav" class="dropdown" style="padding:0;margin:0;">

<li><a href="">Start </a></li>
  <li><a href="">Games</a>
  <ul>
  <li><a href="">Playstation 1</a></li>
  <li><a href="">Playstation 2</a></li>
                </ul>
                </li>
  </div>
 </body>
</html>

----------------------------------------------------------------------------

So nun habe ich zwei Probleme.

1. Die Navigation ist auf der Seite am linken Bildschirmrand ausgerichtet sie soll allerdigns in die Mitte der Seite.

2.Funktionier das Dropdownmenü mit dem IE7 nicht, was muss ich tun damit es mit allen Browsern funktioniert ?

So das wäre auch schon alles ;-)

Gruß

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Navigation will nicht so recht....

    Malcolm Beck´s
    – Informationen zu den Bewertungsregeln

    hi,

    ul.dropdown a.has_submenu {
    background:
    }

    Das ist eine gute Farbwahl.

    #nav a:hover {
    background-color:CCCCCC;
    }

    Hier fehlt noch ein #.

    <html>
    <head>

    kein Doctype

    <body bgcolor="black">

    diese Angabe gehört ins CSS

    <br><br /><center><img src="logo.png"></img><center>

    bezogen auf <br>, hier musst du dich entscheiden, html oder xhtml, center ist veraltet und auch nicht nötig, aber wenn du es schon benutzt, dann am Ende das schliessen nicht vergessen, im img fehlt noch ein alt=''.

    1. Die Navigation ist auf der Seite am linken Bildschirmrand ausgerichtet sie soll allerdigns in die Mitte der Seite.

    diese frage haben wohl schon so viele gestellt, das sie in den faq ist, http://forum.de.selfhtml.org/hilfe/faq.htm#css-zentrieren

    2.Funktionier das Dropdownmenü mit dem IE7 nicht, was muss ich tun damit es mit allen Browsern funktioniert ?

    Im ie6 ohne passendes js wird es wohl auch nicht funktionieren, ansonsten würde ich ein besuch bei css und html validator empfehlen.

    grüße

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. CSS Navigation will nicht so recht....

    CSS_Anfänger
    – Informationen zu den Bewertungsregeln

    Erstmal danke ;-)

    So zu :

    1.Ich wollte eigentlich nur wissen an welcher Stelle ich welchen Befehl für die Zentrierung und die Verrückung ein wenig nach unten einfügen muss.

    2.Das sagt mir überhaupt nichts, was genau meinst du damit ?

    Danke nochmals Gruß

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Navigation will nicht so recht....

      Malcolm Beck´s
      – Informationen zu den Bewertungsregeln

      hi,

      Erstmal danke ;-)

      Gerne doch :-)

      1.Ich wollte eigentlich nur wissen an welcher Stelle ich welchen Befehl für die Zentrierung und die Verrückung ein wenig nach unten einfügen muss.

      ul.dropdown * ul {  
 position:absolute;  
}

      Das ist hier schwierig, du Tackerst das ul auf der Seite fest (position: absolute;), wenn du diesem eine Breite zu weist kannst du das ganz einfach Zentrieren, mit

        
left: 50%;  
margin: 0 0 0 -?;

      das "-?" heisst, da kommt der Wert der "breite von <ul> geteilt durch 2".
      Also wenn ul z.b. 300px breit ist, dann kommt bei margin

      margin: 0 0 0 -150px;

      Am besten, du schaust dir das an einem lebenden beispiel an
      http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm#beispiel

      2.Das sagt mir überhaupt nichts, was genau meinst du damit ?

      Das menu, das du haben willst gibt es schon als fertig lösung, vielleicht eine Alternative für dich?
      http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

      grüße

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln