JJ: Navigation

SELF-Forum

Navigation

JJ
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe ein Problem mit meiner Navigationsleiste. Ich habe eigentlich keine Ahnung von CSS, ich hoffe ihr könnt mir helfen!!
Die Navigationsleiste soll links sein und rechts daneben das Bild (über die ganze Seite) Bei mir werden die Dinge allerdings untereinander dargestellt. Könnt ihr mir sagen wie ich das ändern kann!!!???
Danke!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }

ul#Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 8.8em;
  }
  ul#Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
</style>
<title>Das Circus Zelt</title>
</head>
<body bgColor="#00A6EC">

<div>
  <map name="Zelt">

<area shape="poly" coords="339,403,564,403,568,523,339,523"
          href="manege.htm" alt="Eingang">

<area shape="poly" coords="342,327,559,319,559,382,350,385"
          href="../index.htm" alt="Gemeindeb&uuml;cherei">

</map>
</div>

<p align="right"><img border="0" src="startseite.jpg" width="800" height="582" alt="Startseite" usemap="#Startseite"></p>
<div>
<ul id="Navigation">
    <li><a href="nav_definieren.htm">Information </a></li>
    <li><a href="nav_formatieren.htm">Anmeldung</a></li>
    <li><a href="nav_rollover.htm">Führung</a></li>
    <li><a href="angebote.htm">Angebote</a></li>
    <li><a href="lesefoerderung.htm">Leseförderung</a></li>
    <li><a href="katalog.htm">Katalog</a></li>
    <li><a href="surfen.htm">Surfen</a></li>
    <li><a href="buchtipp.htm">Buchtipp</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
  </ul></p></div>
<p align="left">
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigation

    Pierre
    – Informationen zu den Bewertungsregeln

    Hallo JJ

    da fehlt dir nicht nur CSS-Wissen sondern auch HTML. Also hier mal ein bisschen rumschauen und dich schlau machen, wie man sowas aufbaut.

    Hier mal ein Beispiel wie das ganze etwas besser ausschaut. Die Container für die Navi und das Bild sollten DIVs sein. p align=right gibts nicht. Auch die Bodyinfo gehört ins CSS und nicht ins HTML. Deine 100 Hacks die du nur schon für die Navi zusammendröselst sind sicher unnötig und können durch richtige Anwendung vermieden werden.

    Und wenn das Bild schon im Lesefluss nach der Navigation folgt, sollte das im Code auch so sein.

    Also check mal diesen Code hier und dann geh mal über die Bücher... Das ganze hier ist nicht geprüft und sicher noch weit weg von richtigem Code.

    [code lang=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" lang="en">
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Das Circus Zelt</title>

    <style type="text/css">
      body {
        background-color: #00A6EC;
      }

    #navi {
       width: 12em;
       float: left;
      }

    #content {
       margin-left: 13em;
      }

    ul {
          margin: 0;
       padding: 0.8em;
          border: 1px solid black;
          background-color: silver;
        }
        * html ul {  /* Korrekturen fuer IE 5.x */
          width: 11.6em;
          w\idth: 10em;
          padding-left: 0;
          padd\ing-left: 0.8em;
        }
        ul li {
          list-style: none;
          margin: 0.4em; padding: 0;
        }

    ul a {
          display:block;
          padding: 0.2em;
          text-decoration: none; font-weight: bold;
          border: 1px solid black;
          border-left-color: white; border-top-color: white;
          color: maroon; background-color: #ccc;
        }
        * html ul a {  /* Breitenangaben nur fuer IE */
          width: 100%;
          w\idth: 8.8em;
        }
        ul a:hover {
          border-color: white;
          border-left-color: black; border-top-color: black;
          color: white; background-color: gray;
        }
     </style>
    </head>
    <body>

    <div id="navi">
     <ul>
         <li><a href="nav_definieren.htm">Information </a></li>
         <li><a href="nav_formatieren.htm">Anmeldung</a></li>
         <li><a href="nav_rollover.htm">Führung</a></li>
         <li><a href="angebote.htm">Angebote</a></li>
         <li><a href="lesefoerderung.htm">Leseförderung</a></li>
         <li><a href="katalog.htm">Katalog</a></li>
         <li><a href="surfen.htm">Surfen</a></li>
         <li><a href="buchtipp.htm">Buchtipp</a></li>
         <li><a href="impressum.htm">Impressum</a></li>
       </ul>
    </div>
    <div id="content">
     <img border="0" src="startseite.jpg" width="800" height="582" alt="Startseite" usemap="#Startseite">
     <map name="Startseite">
         <area shape="poly" coords="339,403,564,403,568,523,339,523" href="manege.htm" alt="Eingang">
         <area shape="poly" coords="342,327,559,319,559,382,350,385" href="../index.htm" alt="Gemeindeb&uuml;cherei">
      </map>
    </div>

    </body>
    </html>
    [code]

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln