selma: Navigation

Hallo, ich versuche gerade dieses Navi einzusetzen.
Leider habe ich Schwierigkeiten damit, es an den Platz zu bringen, wo es hingehört.

Wer kann mir einen Tip geben?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>

<style>
body {
margin:5%;

}

#container {width:1000px;
}

#navMain {list-style-type: none;

}

#navMain li {  
	width:20%;  
	text-align:center;  
	  
}  

#navMain li a {
background:#0066FF;
padding: 7.5% 5% 6.5% 7%;
color: white;
margin: 0 0 4% 0;
display:block;
text-decoration: none;

}

#navMain {/* Rotate div */
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
list-style-type:none;

}
nav {width:80%; float:left;

}

a:hover { color: #cc0033; font-weight:900; letter-spacing:0.1em;   border: 3px solid red;
}

</style>

</head>

<body>
<div id="container">

<div id="box">
 <nav>
      <ul id="navMain">
        <li><a href="#">Ägypten</a></li>
        <li><a href="#">Städte-Trips</a></li>
        <li><a href="#">Tauchreisen</a></li>
        <li><a href="#">Nilfahrten</a></li>
        <li><a href="#">Reise-Tipps</a></li>
      </ul>
    </nav></div>

</div>
</body>
</html>

  1. Hallo,

    Hallo, ich versuche gerade dieses Navi einzusetzen.
    Leider habe ich Schwierigkeiten damit, es an den Platz zu bringen, wo es hingehört.

    Wer kann mir einen Tip geben?

    niemand, solange du nicht erklärst, was du genau haben möchtest (und was du stattdessen bisher hast).
    Am besten ist übrigens immer, du verlinkst ein Online-Beispiel, das man sich direkt "live" ansehen kann.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Hier behauptest du, du würdest HTML 4.01 Strict verwenden.

    <nav>
          <ul id="navMain">
            <li><a href="#">Ägypten</a></li>
            <li><a href="#">Städte-Trips</a></li>
            <li><a href="#">Tauchreisen</a></li>
            <li><a href="#">Nilfahrten</a></li>
            <li><a href="#">Reise-Tipps</a></li>
          </ul>
        </nav>

    Allerdings kennt HTML 4.01 kein nav-Element. Das gibt's erst in HTML 5.
    Das hat zwar nichts mit deinem Problem zu tun, aber es ist zumindest ein formaler Fehler.

    Ciao,
     Martin

    --
    Lehrer:  Wieviel ist die Hälfte von 8?
    Schüler: Kommt drauf an. Waagrecht 0 und senkrecht 3.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo Martin,
      danke für deine Antwort.
      Ich habe jetzt diesen Fehler korrigiert.
      Ich stecke noch bei Html4.
      Ich haette das Navi gerne links oben.
      Es setzt sich aber immer mittig in den Monitor.
      So als haette ich irgendwo nicht existierende margins gesetzt.

      Position:absolute setzt es zwar nach links oben, aber dann wird das Navi beschnitten auf eine kleinere Grösse!
      Vielleicht kannst du mir helfen?.

      <-- meine Html-Seite

      <!doctype html>
      <html>
      <head>
      <title>Website in HTML 5 als direktes Beispiel</title>
      <meta charset="iso-8859-1">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Unbenanntes Dokument</title>

      <style>
      body {
      margin:5%;

      }

      #container {width:1000px;
      }

      #navMain {list-style-type: none;

      }

      #navMain li {  
      	width:20%;  
      	text-align:center;  
      	  
      }  
      

      #navMain li a {
      background:#0066FF;
      padding: 7.5% 5% 6.5% 7%;
      color: white;
      margin: 0 0 4% 0;
      display:block;
      text-decoration: none;

      }

      #navMain {/* Rotate div */
      transform:rotate(270deg);
      -ms-transform:rotate(270deg); /* IE 9 */
      -webkit-transform:rotate(270deg); /* Safari and Chrome */
      list-style-type:none;

      }
      nav {width:80%; float:left;

      }

      a:hover { color: #cc0033; font-weight:900; letter-spacing:0.1em;   border: 3px solid red;
      }

      </style>

      </head>

      <body>
      <div id="container">

      <div id="box">
       <nav>
            <ul id="navMain">
              <li><a href="#">Ägypten</a></li>
              <li><a href="#">Städte-Trips</a></li>
              <li><a href="#">Tauchreisen</a></li>
              <li><a href="#">Nilfahrten</a></li>
              <li><a href="#">Reise-Tipps</a></li>
            </ul>
          </nav></div>

      </div>
      </body>
      </html>

      -->

      Hallo,

      Hallo, ich versuche gerade dieses Navi einzusetzen.
      Leider habe ich Schwierigkeiten damit, es an den Platz zu bringen, wo es hingehört.

      Wer kann mir einen Tip geben?

      niemand, solange du nicht erklärst, was du genau haben möchtest (und was du stattdessen bisher hast).
      Am besten ist übrigens immer, du verlinkst ein Online-Beispiel, das man sich direkt "live" ansehen kann.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

      Hier behauptest du, du würdest HTML 4.01 Strict verwenden.

      <nav>
            <ul id="navMain">
              <li><a href="#">Ägypten</a></li>
              <li><a href="#">Städte-Trips</a></li>
              <li><a href="#">Tauchreisen</a></li>
              <li><a href="#">Nilfahrten</a></li>
              <li><a href="#">Reise-Tipps</a></li>
            </ul>
          </nav>

      Allerdings kennt HTML 4.01 kein nav-Element. Das gibt's erst in HTML 5.
      Das hat zwar nichts mit deinem Problem zu tun, aber es ist zumindest ein formaler Fehler.

      Ciao,
      Martin

      1. @@selma:

        nuqneH

        Am besten ist übrigens immer, du verlinkst ein Online-Beispiel, das man sich direkt "live" ansehen kann.

        Und wo ist nun dein Online-Beispiel? Ich hab wenig Lust, mir das aus deinen Codeschnipseln erst erstellen zu müssen.

        <!doctype html>
        <html>
        <head>

        Hier beginnt das head-Element.

        <title>Website in HTML 5 als direktes Beispiel</title>
        <meta charset="iso-8859-1">
        <head>

        Oops, und hier noch eins? Es darf nur ein head-Element geben.

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        Oops, noch eine Angabe zur Zeichencodierung? Es darf nur eine geben.

        Außerdem widerspricht die Angabe der vorigen. Welche Zeichencodierung verwendest du denn nun?

        Du solltest UTF-8 verwenden, nicht sowas veraltetes wie ISO 8859-1.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hallo,

        Hallo Martin,
        danke für deine Antwort.
        Ich habe jetzt diesen Fehler korrigiert.
        Ich stecke noch bei Html4.
        Ich haette das Navi gerne links oben.
        Es setzt sich aber immer mittig in den Monitor.
        So als haette ich irgendwo nicht existierende margins gesetzt.

        Du hast das Element #container mit width: 1000px.
        Darin ist das Element nav mit width: 80% (entspricht 800px).
        Darin ist das Element #navMain mit keiner width-Angabe, also nimmt es die Breite seines Elternelements ein, da es sich um ein Blockelement handelt.
        Darin sind li-Element, die width: 20% bekommen (152px, weil das #navMain noch padding-left hat).

        #navMain ist also 800px breit. Neben den li-Elementen, die nur 152px einnehmen, ist ein großer freier, transparent Raum.

        Nun rotierst du es um 270 Grad. Dadurch ist es immer noch 800px breit. Das Element wird um seine Mitte rotiert. Die li-Elemente, die ursprünglich links oben positioniert waren, liegen jetzt logischerweise ziemlich weit unten.

        Kurz gesagt: Sorge dafür, dass das zu rotierende Element nur so breit ist, wie sein Inhalt. Dann muss es, wenn es auf die Seite gekippt wird, vielleicht noch verschoben werden, wenn es nicht quadratisch ist.

        Grüße
        Mathias