Positionieren von Klappnavi

[Freeze]

Hallo!
Hab ein Problem mit meinem Klappnavi. In meiner Vorschau sieht alles super aus, doch wenn ich das Teil dann hochlade, verzweifle ich....sehet selbst trytrytry.funpic.de
in der Vorschau ist das alles so, wie ich es haben möchte...ganz links, direkt unter dem banner (genau in der Ausbuchtung) fängt mein Navi an und sollte genau dort enden wo der banner weiter geht... man sehe selbst...auch die ausfahrbaren teile sind komplett "irgendwo", wo sie nicht hingehören...

hier mal mein html:

  
<div id="navi">  
<div id="menu"><!-- öffnet die Navigationsleiste-->  
  
   <ul><!-- öffnet den ersten Themenblock -->  
  
      <li><a class="direkt" href="home.html">Home</a></li>  
  
   </ul><!--schließt den ersten Themenblock-->  
  
   <ul><!-- öffnet den zweiten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 2 -->  
  
         <h3>Shop</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 2 -->  
  
               <li><a href="team.html">Team</a></li>  
  
               <li><a href="oeffnungszeiten.html">&Ouml;ffnungszeiten</a></li>  
  
               <li><a href="anfahrt.html">Anfahrt</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 2 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 2 -->  
  
   </ul><!--schließt den zweiten Themenblock-->  
  
	<ul><!-- öffnet den dritten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 3 -->  
  
         <h3>Mode</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 3 -->  
  
               <li><a href="herbst2013.html">Herbst-Winter 2013</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 3 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 3 -->  
  
   </ul><!--schließt den dritten Themenblock-->  
  
	<ul><!-- öffnet den vierten Themenblock -->  
  
      <li onmouseover=""><!-- öffnet die Listeneinträge von Thema 4 -->  
  
         <h3>News</h3>  
  
            <ul><!-- öffnet die Klappnavi von Thema 4 -->  
  
               <li><a href="trends.html">Trends</a></li>  
  
               <li><a href="termine.html">Termine</a></li>  
  
            </ul><!-- schließt die Klappnavi von Thema 4 -->  
  
         </li><!-- schließt die Listeneinträge von Thema 4 -->  
  
   </ul><!--schließt den vierten Themenblock-->  
  
   <ul><!-- öffnet den fuenften Themenblock -->  
  
		<li><a class="direkt" href="newsletter.html">Newsletter</a></li>  
  
   </ul><!--schließt den fuenften Themenblock-->  
  
	<ul><!-- öffnet den sechsten Themenblock -->  
  
      <li><a class="direkt" href="kontakt.html">Kontakt</a></li>  
  
   </ul><!--schließt den sechsten Themenblock-->  
  
  
</div><!-- schließt die Menüleiste #menu -->  
  
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->  
</div>  

und hier das Css-Ding:

  
#navi{  
margin-top:140px;  
}  
/*--Setzt alle Abstände auf "Null" Navi--*/  
* {  
margin: 0;  
padding: 0;  
}  
/*--formatiert die Menüleiste--*/  
#menu {  
width: 100%;  
padding: 0px 0px;  
background: none;  
font-family: Verdana;  
font-size: 0.9em;  
line-height: 1.5;  
float: left;  
z-index:2;  
}  
/*--formatiert die Themenblöcke--*/  
#menu ul {  
float: left;  
width: 115px;  
list-style-type: none;  
}  
/*--definiert die Blocküberschriften--*/  
#menu h3 {  
font-size: 1em;  
text-align: center;  
color: #bfbfbf;  
border: 1px solid #FFFFFF; /*--erforderlich für IE 7--*/  
background: #000000;  
}  
  
/*--definiert die "Drop-Down-Links" im Normalzustand--*/  
#menu a {  
text-decoration: none;  
display: block;  
border: 1px solid #FFFFFF;  
text-align: center;  
background: #000000;  
color: #bfbfbf;  
}  
  
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/  
#menu a:hover {  
color: #000000;  
background: #bfbfbf;  
}  
/*  
*verhindert im Zusammenhang mit position absolute bei ul ul  
*eine Höhenvergrößerung von #menu beim Hovern--  
*/  
  
#menu li {  
position: relative;  
}  
  
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/  
#menu ul ul {  
position: absolute;  
z-index: 2;  
display: none;  
}  
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/  
#menu ul li:hover ul {  
display: block;  
}  
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/  
  
* html #menu ul li {  
float: left;  
width: 100%;  
}  
  
/*--nur für IE 7 erkennbar--*/  
  
*+ html #menu ul li {  
float: left;  
width: 100%;  
}  
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/  
*html body {  
behavior: url(csshover3-source.htc);  
font-size: 100%;  
}  
  
*html #menu ul li a {  
height: 1%;  
}  
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/  
  
#menu a.direkt:link {  
font-size: 1em;  
font-weight: bold;  
text-align: center;  
color: #bfbfbf;  
border: 1px solid #FFFFFF;  
background: #000000;  
}  
  
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/  
  
#menu a.direkt:hover {  
color: #000000;  
background: #bfbfbf;  
border: 1px solid #FFFFFF;  
}  

Hoffe, ihr könnt mir helfen oder Tipps geben, was ich falsch gemacht habe?!?
Lg

[Baba]

Ich würde einiges anders machen. Zum Beispiel nicht das Menü per padding nach unten zwingen, die Breite des Menüs an ein Hintergrundbild anpassen, etc...

Zu Deinem Problem: h3 bekommt vom Browser ein padding mit. Das musst Du reseten:
#menu h3 { margin:0}

[Baba]

Achja: und Zeichnkodierung unbedingt angeben!! UTF-8. Bei mir werden zum Beispiel keine Umlaute angezeigt, sondern nur Salat.

Cheers,
Baba

[Freeze]

Danke für die Antworten!
Werde mich zu allererst um das "Fehler-Problem" bemühen und die Umlaute ausbessern...

dann das ganze auf 0 stellen.
Das komische ist, dass es auf dem Smartphone eigentlich richtig angezeigt wird.
Mir ist schon klar, dass es bei jedem Browser unterschiedlich aussieht,aber so ein "durcheinander" wird mir in der Vorschau nicht angezeigt....ich meine, das Aufzählungen in einer geraden Linie verlaufen, das sollte doch in jedem browser gleich zu sehen sein, oder?

[Baba]

Danke für die Antworten!
Werde mich zu allererst um das "Fehler-Problem" bemühen und die Umlaute ausbessern...

Die Umlaute sind ok, bitte nicht durch html-Entitäten austauschen! Teile dem User nur mit, welche Kodierung Du benutzt. <meta> und (falls nötig) im php-Header.

Das komische ist, dass es auf dem Smartphone eigentlich richtig angezeigt wird.

Jeder Browser hat andere defaults. Um alle auf einen Stand zu bringen schau mal nach css reset.

....ich meine, das Aufzählungen in einer geraden Linie verlaufen, das sollte doch in jedem browser gleich zu sehen sein, oder?

Nein, Du hast das Problem nicht verstanden. Erstens: Aufzählungen erscheinen überall *untereinander* standardmäßig. Du machst das explizit anders, durch float:left. Dann wären sie wohl in einer horizontalen Linie, wenn Sie gleich wären. Sind sie aber nicht. Manche enthalten h3's. Da diese wiederum ein margin haben (in manchen Browsern) muss du das reseten.

Cheers,
Baba

[Freeze]

Zuerst einmal:Recht herzlichen dank! Es hat funtioniert!!!!! Nur ist (dadurch) ein weiteres Problem aufgetreten: Ich kann den Text (den hab ich im übrigen zur Probe irgendwo rauskopiert) nicht mehr scrollen...der hört einfach auf,obwohl er noch weiter gehen sollte...(siehe selbst auf trytrytry.funpic.de)
Und nun noch eine Frage: wie schaffe ich es, dass ich dieses Navi in die Bildschirmmitte zentrieren kann??? Dann geb ich schon Ruhe *gg*

@Matthias: Danke für den Hinweis! Habe einen Fehler bei "mir" gefunden. die anderen Fehler sind die Umlaute...

[Baba]

Zuerst einmal:Recht herzlichen dank! Es hat funtioniert!!!!!

... hast Du mal die Fensterbreite verändert? Also: Browser aus der maximierten Ansicht und Fensterbreite verändert?

Nur ist (dadurch) ein weiteres Problem aufgetreten: Ich kann den Text (den hab ich im übrigen zur Probe irgendwo rauskopiert) nicht mehr scrollen...der hört einfach auf,obwohl er noch weiter gehen sollte...(siehe selbst auf trytrytry.funpic.de)

Nicht nachvollziehbar. (Die Seite ist natürlich nicht scrollbar, wenn der Inhalt nicht das Ende erreicht...)

Und nun noch eine Frage: wie schaffe ich es, dass ich dieses Navi in die Bildschirmmitte zentrieren kann??? Dann geb ich schon Ruhe *gg*

Hm. Irgendwie solltest Du wie gesagt Dein Konzept überdenken. Ich glaube nicht, das Hintergrundbild in Kombination mit dem gefloateten Menü eine gute Idee ist. Das das Menü immer bis zum Knick geht kannst Du Dir jedenfalls abschminken :( Da ändert auch ein zentriertes MEnü nichts. Das könntest Du erreichen, wenn du dem div#menu eine Breite kleiner 100% gibst und ein margin:0 auto;

Cheers,
Baba

[Baba]

Das könntest Du erreichen, wenn du dem div#menu eine Breite von 690px und ein margin:0 auto; gibst und das floating ausstellst.

Cheers,
Baba

[Gunnar Bittersmann]

@@Baba:

nuqneH

Die Umlaute sind ok, bitte nicht durch html-Entitäten austauschen!

Richtig. Wann keine Escapes zu verwenden sind

Teile dem User nur mit, welche Kodierung Du benutzt. <meta> und (falls nötig) im php-Header.

HTTP-Header meinst du. Und die Priorisierung eher andersrum: HTTP-Header und zusätzlich im Dokument. Angabe der Zeichencodierung in HTML

Qapla'

[Baba]

HTTP-Header meinst du. Und die Priorisierung eher andersrum: HTTP-Header und zusätzlich im Dokument.

Vielen Dank.

Cheers,
Baba

[Matthias Apsel]

Om nah hoo pez nyeetz, Freeze!

Hab ein Problem mit meinem Klappnavi. In meiner Vorschau sieht alles super aus, doch wenn ich das Teil dann hochlade, verzweifle ich....sehet selbst trytrytry.funpic.de

Müssen denn die Kommentare tatsächlich _alle_ da sein?

Du hast 82 Fehler. Ich kenne funpic nicht. Daher weiß ich nicht, für welche Fehler du verantwortlich bist und für welche funpic.

Man möchte nicht alle Abstände auf Null setzen um sie dann später für jedes Element neu festzulegen. Webseiten können nicht in jedem Browser gleich aussehen. http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil

Matthias