paaax: Navigation zerreißt

SELF-Forum

Navigation zerreißt

paaax
– Informationen zu den Bewertungsregeln

Hallo liebe Leute,

am besten ihr macht euch erst einmal ein Bild davon was ich meine: www.die-twedde.de/atw/index3.php

Meine Navigation wird wie ihr seht ziemlich hart auseinander gerissen. Ich finde meinen Fehler allerdings nicht. Vielleicht könnt ihr mir ja weiterhelfen.

CSS-Code:

body { 			background-attachment: fixed;  
				background-image: url('Bilder/bg.gif');  
				background-repeat: repeat-x;  
				background-color: #3482e2;  
				text-align: center;  
	}  
	  
#ganzeseite { 	position: absolute;  
				width: 800px;  
				height: 1265px;  
				top: 50%;  
				left: 50%;  
				margin-top: -440px;  
				margin-left: -400px;  
			}  
  
#kopfbereich {	width: 800px;  
				height: 315px;  
			}  
			  
#menu 	{	width: 800px;  
			height: 30px;  
		}  
  
#content {	background: #ffffff;  
			width: 800px;  
			height: 900px;  
			text-align: left;  
			padding:0.01em;  
		}  
			  
#fußzeile {	width: 800px;  
			height: 20px;  
		 }  
		  
ul {  
  padding: 0;  
  margin: 0;  
  list-style: none;  
  }  
  
li {  
  float: left;  
  position: relative;  
  width: 10em;  
  }  
  
li ul {  
  display: none;  
  position: absolute;  
  top: 1em;  
  left: 0;  
  }  
  
li > ul {  
	top: auto;  
	left: auto;  
	}  
  
li:hover ul, li.over ul{ display: block; }  
  
a.home {  
    display:block;  
    width:100px;  
    height:100px;  
    background-repeat:no-repeat;  
    background-image:url('Bilder/menu_01.gif');  
}  
a.home:hover {  
    background-image:url('Bilder/menu2_01.gif');  
    background-repeat:no-repeat;  
}  
  
a.welt {  
    display:block;  
    width:100px;  
    height:100px;  
    background-repeat:no-repeat;  
    background-image:url('Bilder/menu_02.gif');  
}  
a.welt:hover {  
    background-image:url('Bilder/menu2_02.gif');  
    background-repeat:no-repeat;  
}  
  
a.stadt {  
    display:block;  
    width:100px;  
    height:100px;  
    background-repeat:no-repeat;  
    background-image:url('Bilder/menu_03.gif');  
}  
a.stadt:hover {  
    background-image:url('Bilder/menu2_03.gif');  
    background-repeat:no-repeat;  
}  
  
a.bade {  
    display:block;  
    width:100px;  
    height:100px;  
    background-repeat:no-repeat;  
    background-image:url('Bilder/menu_04.gif');  
}  
a.bade:hover {  
    background-image:url('Bilder/menu2_04.gif');  
    background-repeat:no-repeat;  
}  
  
a.gästebuch {  
    display:block;  
    width:100px;  
    height:100px;  
    background-repeat:no-repeat;  
    background-image:url('Bilder/menu_05.gif');  
}  
a.gästebuch:hover {  
    background-image:url('Bilder/menu2_05.gif');  
    background-repeat:no-repeat;  
}

HTML-Code:

<html>  
  
<head>  
  
<title>Einmal rum!</title>  
  
<link rel="stylesheet" type="text/css" href="_stylesheet.css">  
  
</head>  
  
<script type="text/javascript">  
startList = function() {  
if (document.all&&document.getElementById) {  
navRoot = document.getElementById("nav");  
for (i=0; i<navRoot.childNodes.length; i++) {  
node = navRoot.childNodes[i];  
if (node.nodeName=="LI") {  
node.onmouseover=function() {  
this.className+=" over";  
  }  
  node.onmouseout=function() {  
  this.className=this.className.replace(" over", "");  
   }  
   }  
  }  
 }  
}  
window.onload=startList;  
</script>  
  
<body>  
	<div id="ganzeseite">  
		<div id="kopfbereich">  
			<img src="Bilder/Header/header.gif">  
		</div>  
		<div id="menu">  
									<ul id="nav">  
									  <li><a href="index3.php" class="home"></a></li>  
  
									  <li><a href="weltkarte.php" class="welt"></a></li>  
									  
									 <li><a href="stadt.php" class="stadt"></a>  
										<ul>  
										  <li><a href="paris.php" class="paris">Paris, Frankreich</a></li>  
										  <li><a href="prag.php" class="prag">Prag, Tschechien</a></li>  
										  <li><a href="hamburg.php" class="hamburg">Hamburg, Deutschland</a></li>  
										</ul>  
									  </li>  
  
									  <li><a href="bade.php" class="bade"></a>  
										<ul>  
										  <li><a href="alanya.php" class="alanya">Alanya, Türkei</a></li>  
										  <li><a href="grancanaria.php" class="grancanaria">Gran Canaria, Spanien</a></li>  
										</ul>  
									  </li>  
									  
									  <li><a href="gästebuch.php" class="gästebuch"></a>  
									  </li>  
									  <li><img src="Bilder/menu_06.gif"></li>  
									</ul>  
		</div>  
		<div id="content">  
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
		</div>  
		<div id="fußzeile">  
		</div>  
	</div>  
</body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigation zerreißt

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, paaax!

    Beseitige zunächst die Fehler.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigation zerreißt

      paaax
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, paaax!

      Beseitige zunächst die Fehler.

      Matthias

      Wie finde ich nun raus welcher Doctype der "beste" für mein Dokument ist?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Navigation zerreißt

        Vinzenz Mai
        – Informationen zu den Bewertungsregeln

        Hallo,

        Beseitige zunächst die Fehler.

        Wie finde ich nun raus welcher Doctype der "beste" für mein Dokument ist?

        ich nähme <!DOCTYPE html>, d.h. HTML5.

        Freundliche Grüße

        Vinzenz

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Navigation zerreißt

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, paaax!

        Wie finde ich nun raus welcher Doctype der "beste" für mein Dokument ist?

        Der, der zu deinem Quelltext passt. Du schreibst HTML, also verwende HTML (4 strict).

        Matthias

        --
        1/z ist kein Blatt Papier.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Navigation zerreißt

    Vinzenz Mai
    – Informationen zu den Bewertungsregeln

    Hallo,

    am besten ihr macht euch erst einmal ein Bild davon was ich meine: www.die-twedde.de/atw/index3.php

    Meine Navigation wird wie ihr seht ziemlich hart auseinander gerissen.
    CSS-Code:

      

> #menu {	  
>     width: 800px;   /* Dein Menü ist 800 Pixel breit */  
>     height: 30px;  
> }  
  

> li {  
>     float: left;  
>     position: relative;  
>     width: 10em;    /* Die Einträge sind jedoch 10em breit */  
> }  
  

> a.home {  
>     display:block;  
>     width:100px;    /* und enthalten 100 Pixel breite und */  
>     height:100px;   /* 100 Pixel hohe Links (ohne Inhalt) */  

      /* Diese erhalten Hintergrundbilder, die zum Teil breiter sind und  
         daher abgeschnitten werden. */  

>     background-repeat:no-repeat;  
>     background-image:url('Bilder/menu_01.gif');  
> }


    » <ul id="nav">  

>   <li><a href="index3.php" class="home"></a></li>  
>   <li><a href="weltkarte.php" class="welt"></a></li>  
>   <li><a href="stadt.php" class="stadt"></a>  
>     <ul>  
>       <li><a href="paris.php" class="paris">Paris, Frankreich</a></li>  
>       <li><a href="prag.php" class="prag">Prag, Tschechien</a></li>  
>       <li><a href="hamburg.php" class="hamburg">Hamburg, Deutschland</a></li>

    [...]

    Für Deinen Hover-Effekt benötigst Du doch gar keine Bilder, das läßt sich doch wundervoll mit CSS erledigen. Netter Nebeneffekt: deine vielen Klassen, die einfach nur für die Hintergrundbilder da sind, kannst Du umweltschonend entsorgen.

    Schreibe als erstes den entsprechenden Linktext ins HTML:

    <ul id="nav">  
  <li><a href="index3.php">Home</a></li>  
  <li><a href="weltkarte.php">Weltkarte</a></li>  
  <li><a href="stadt.php">Städtereisen</a>  
    <ul>  
      <li><a href="paris.php">Paris, Frankreich</a></li>  
      <li><a href="prag.php">Prag, Tschechien</a></li>  
      <li><a href="hamburg.php">Hamburg, Deutschland</a></li>  
    </ul>  
  </li>

    Du hast fünf Hauptnavigationspunkte, was spricht dagegen, diese gleich breit zu machen? Deine a-Elemente solltest Du nicht höher machen als die Menüleiste, die Textposition kannst Du per padding-left und padding-top regeln, die Breite sollte gleich der des enthaltenden Listenelementes sein. Gib den a-Elementen als Hintergrundfarbe schwarz und die Vordergrundfarbe weiß. Bei Hover ändere die Vordergrundfarbe in die Farbe Deines Seitenhintergrundes ab ...

    Bei der Unternavigation sieh' zu, dass der Text in eine Zeile passt.

    Freundliche Grüße

    Vinzenz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Navigation zerreißt

    paaax Homepage des Autors
    – Informationen zu den Bewertungsregeln

    So habe alle Fehler beseitigt. Jedoch bin ich bei meinem ursprünglichen Problem im Code noch nicht weiter. Knan mir jemand helfen? ;) Es geht immer noch um das Menü

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigation zerreißt

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, paaax!

      Jedoch bin ich bei meinem ursprünglichen Problem im Code noch nicht weiter.

      Du hast doch von Vinzenz eine ganze Menge Hinweise bekommen. Zusätzlich noch folgende:

      * Die graphische Umsetzung der Links ist nicht nowendig, font: 14px bold arial, sans-serif; background: black; color: white; sollte ähnliches erreichen
      * Wenn es denn unbedingt Grafiken sein sollen, könnte eine einzige reichen
      * Für das Einblenden der Untermenüs könnten fundierte Kenntnisse zum Boxmodell und zur Positionierung nicht schaden

      Matthias

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. Navigation zerreißt

    paaax
    – Informationen zu den Bewertungsregeln

    Ich komm der Sache langsam näher. jedoch hat sich jetzt am Ende der Navigation eine doofe schwarze Ecke aufgetan, welche in den Content-Bereich ragt. Woraus resultiert diese?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigation zerreißt

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, paaax!

      Ich komm der Sache langsam näher. jedoch hat sich jetzt am Ende der Navigation eine doofe schwarze Ecke aufgetan, welche in den Content-Bereich ragt. Woraus resultiert diese?

      Das ist dein letztes Listenelement, entsorge dies und gib stattdessen deinem (eigentlich überflüssigem) div "menü" die entsprechende Hintergrundfarbe.

      Matthias

      --
      1/z ist kein Blatt Papier.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Navigation zerreißt

        paaax
        – Informationen zu den Bewertungsregeln

        Okay dank dir schonmal. Wenn du mir jetzt noch verrätst warum der Text im Content nach unten einrückt obwohl ich kein margin vergeben habe bist du mein Held ;)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Navigation zerreißt

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Om nah hoo pez nyeetz, paaax!

          Elemente haben vom Browserstylesheet bestimmte Voreinstellungen. Schau dir mit einem Entwicklerwerkzeug deiner Wahl, z.B. Firebug, die Werte der dich interessierenden Eigenschaften an.

          Matthias

          --
          1/z ist kein Blatt Papier.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln