✔ Ausfahrbare Navigation

Das Menü würde sich ohne weiteres horizontal zentrieren, wenn es denn nur könnte :p

Da liegt aber so einiges im Argen in deinem HTML-Code - bei Unklarheiten konsoltiere bitte http://validator.w3.org/.

Allein schon dieser Ausschnitt aus dem Code-Schlamasel bedarf da eigentlich keiner weiteren Worte:
Code: 
<div class="menu">

<!--

-->


        <div align="left">
              <ul>
                  ...

Hier mal die bereinigte Fassung:
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="en" >
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="MediaUp" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="robots" content="all" />
        <title>RWE Songs</title>

        <script type="text/javascript"></script>

        <link rel="stylesheet" media="all" type="text/css" href="dropdown.css">
        <!--[if lte IE 6]>
        <link rel="stylesheet" media="all" type="text/css" href="dropdown_ie.css">
        <![endif]-->
        <style type="text/css" title="currentStyle" media="all">
                @import "global.css";
                </style>

</head>

<body>

<div id="wrapper">
        <div id="header">
                <h1 align="center">&nbsp;</h1>
        </div>

        <div class="menu">
              <ul>
                <li><a class="hide" href="./menu/index.html">Home</a>
                  <!--[if lte IE 6]>
<a href="./menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="./menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
                    <li><a href="./menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
                    <li><a href="./menu/form.html" title="Styling forms">styled form</a></li>
                    <li><a href="./menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
                    <li><a class="hide" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
                      <!--[if lte IE 6]>
    <a class="sub" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->
                      <ul>
                        <li><a href="./menu/form.html" title="Styling forms">styled form</a></li>
                        <li><a href="./menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
                        <li><a href="./menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
                      </ul>
                      <!--[if lte IE 6]>
        </td></tr></table>
    </a>
    <![endif]-->
                    </li>
                    <li><a href="./menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
                    <li><a href="./menu/old_master.html" title="Image Map for detailed information">image map</a></li>
                    <li><a href="./menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
                    <li><a href="./menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
                    <li><a href="./menu/em_images.html" title="em size images compared">em sized images</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                <li><a class="hide" href="index.html">MENUS</a>
                  <!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
                    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
                    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
                    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
                    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
                    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
                    <li><a href="circles.html" title="circular links">circular links</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                <li><a class="hide" href="./layouts/index.html">LAYOUTS</a>
                  <!--[if lte IE 6]>
<a href="./layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="./layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
                    <li><a href="./layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
                    <li><a href="./layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
                    <li><a href="./layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
                    <li><a href="./layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                <li><a class="hide" href="./boxes/index.html">BOXES</a>
                  <!--[if lte IE 6]>
<a href="./boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
                    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
                    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
                    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
                    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
                    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
                    <li><a href="circles.html" title="circular links">circular links</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                <li><a class="hide" href="./mozilla/index.html">MOZILLA</a>
                  <!--[if lte IE 6]>
<a href="./mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="./mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
                    <li><a href="./mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
                    <li><a href="./mozilla/content.html" title="Using content:">content:</a></li>
                    <li><a href="./mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
                    <li><a href="./mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
                    <li><a href="./mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
                    <li><a href=".mozilla/target.html" title="Target Practise">target practise</a></li>
                    <li><a href="./mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
                    <li><a href="./mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                <li><a class="hide" href="./ie/index.html">EXPLORER</a>
                  <!--[if lte IE 6]>
<a href="./ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
                  <ul>
                    <li><a href="./ie/exampleone.html" title="Example one">example one</a></li>
                    <li><a href="./ie/weft.html" title="Weft fonts">weft fonts</a></li>
                    <li><a href="./ie/exampletwo.html" title="Vertical align">vertical align</a></li>
                  </ul>
                  <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
                </li>
                </li>
              </ul>
          <!--[if lte IE 6]>
        </td></tr></table>
    </a>
    <![endif]-->
          </li>
          </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

          </li>
          </ul>
</div>
  <p align="center">&nbsp;</p>
  <div id="headig">
    <p align="center">&nbsp;</p>

    <p align="center">Hier wird geschrieben</p>
    <p align="center">jdz</p>
    <p align="center">öl</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g</p>
    <p align="center">g </p>
    <p align="center">g</p>
</div>
  <div id="footer">
    <div align="center">© Copyright 2009 www.rwe-songs     All Rights Reserved.
      Private </div>
  </div>
  <div class="cleaner"></div>
</div>

</body>
</html>


Und wenn du aus dem Menü einen Hauptmenüpunkt entfernst, muß sich nach Adam Riese auch seine Ausgangsbreite verringern:
CSS: 
.menu {font-family: arial, sans-serif; width:644px; height:100px; position:relative; font-size:11px; z-index:100; margin:auto;}

mfg Maik
 
Es klappt

Mensch, wenn du für mich nicht virtuell wärst, würde ich dich glatt küssen. =)
Ich will auch meinen Monitor nicht knutschen, weil ich den das letzte mal anno 1940 sauber gemacht habe. ^^

Deswegen bewerte ich es mal als ein +
 
Ich habe noch eine Frage ^^

Habe mit der Navi alles fertig, funktioniert auch einwandfrei.

Jetzt nochma ein Problem:
Da ich viele Seiten habe und ich dann immer was ändere, heisst dass ich jedes mal jede html seite öffnen muss um die Navigation zu aktualisieren.
Gibt es eine Möglichkeit eine Navigation zu haben die dann auf allen Seiten ist? Sprich ich ändere an einer Seite was in der Navi und es ist überall aktualisiert?

Danke im voraus ;)
 
xXsaugerXx hat gesagt.:
Gibt es eine Möglichkeit eine Navigation zu haben die dann auf allen Seiten ist? Sprich ich ändere an einer Seite was in der Navi und es ist überall aktualisiert?
Zum Vergrößern anklicken....

Nur durch HTML per IFrames (meiner Meinung nach eine böse Lösung).
PHP könnte so etwas machen:
PHP: 
<!-- Es folgt die Navigation //-->
<?PHP readfile('navigation.html'); ?>
(Sofern PHP möglich ist)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück