IE (PC) verhaut Layout

[Mauki]

Ich bin gerade dabei ein Layout für ne Typo3 Webseite zu erstellen. Jetzt bin ich gerade dabei die Seite in verschiedenen Browsern zu testen uns im IE (PC) verhaut es die ganze Navigation. Wo ist hier das Problem ? Im Firefox/Safari sieht es korrekt aus.

Achja, die helle Stellen in der Navi dienen nur zur Demonstration. Später soll die Untermenüs automatisch aufklappen.

Wie kann ich nun den linken Bereich mit Navigation und Terminen kompatibler gestalten.


Webseite
CSS

 

[hagbard86]

weil sich der IE nicht an die standart hält

 

[Jakob]

schau mal in diesen Thread. Da Du nicht sagst „wie“ das Design verhauen wird, ist es schwierig was zu raten.

Ich tippe mal auf zuviel Platz zwischen den Menüpunkten? Dann die CSS width-Eigenschaft der li's auf 100% setzen.

 

[Mauki]

schau mal in diesen Thread. Da Du nicht sagst „wie“ das Design verhauen wird, ist es schwierig was zu raten.

Sorry vergessen.

IE
Firefox

 

[Jakob]

Laut Validator fehlt das <ul>-Tag oder steht an der falschen Stelle.

 

[Mauki]

Das <ul> Tag steht eigentlich schon korrekt. Ich bin gerade am überlegen wie man das anders lösen kann. Immerhin sind das ja verschachtelte Divs, was ja nicht so gut ist.

Ich habe mal probiert das Submenu mit einer Klasse zu definieren, allerdings wurde da die Formatierung nicht angewendet. Sehr komisch, steh gerade irgendwie auf dem Schlauch :-(

 

[Jakob]

Ui, da schau ich im Quelltext und siehe da…
Das garnix gut:

<ul>
	<li><a href="#">VCP Denkendorf</a></li>
	<div id="submenu"> [color=red]<-- Alarm[/color]
	<li><a href="#">&nbsp;Wir über uns</a></li>
	<li><a href="#">&nbsp;Stammesrat</a></li>
	<li><a href="#">&nbsp;Termine</a></li>
	</div> [color=red]<-- Alarm[/color]
	<li><a href="#">Freundeskreis</a></li>
	<li><a href="#">Gästebuch</a></li>
	<li><a href="#">Links</a></li>
</ul>

Verschachtelte Listen haben so ein Format:

<ul>
	<li>Punkt 1</li>
	<li>Punkt 2
		<ul class="submenu">
			<li>Punkt 2.1</li>
		</ul>
	</li>
	<li>Punkt 3</li>
</ul>

Kannst Du auf diese Weise beliebig oft verschachteln. Achte drauf, dass das submenu zwischen den <li>…</li> des Hauptmenüs liegt.

Musst nicht mal für jedes Submenü ne Klasse vergeben, CSS könnte es auch so:
#hauptmenu ul li <-- Punkte des Hauptmenüs
#hauptmenu ul ul li <-- Punkte des Submenus

 

[Mauki]

habs nun mal so probiert, aber da verhaut es auch die Navigation.

<div id="hauptmenu">
<ul>
	<li><a href="#">VCP Denkendorf</a>
		<ul class="submenu">
	<li><a href="#">&nbsp;Wir über uns</a></li>
	<li><a href="#">&nbsp;Sippen</a></li>
	<li><a href="#">&nbsp;Heimat</a></li>
	<li><a href="#">&nbsp;Stammesrat</a></li>
	<li><a href="#">&nbsp;Termine</a></li>
	</ul>
	</li>
	<li><a href="#">Freundeskreis</a></li>
	<li><a href="#">Pfadichor</a></li>
	<li><a href="#">Familienkreis</a></li>
	<li><a href="#">Pfadfinden</a></li>
	<li><a href="#">Galerie</a></li>
	<li><a href="#">Gästebuch</a></li>
	<li><a href="#">Links</a></li>
</ul>

 

[Jakob]

Hm… lad es mal so hoch und validiere/verbessere, bis kein Fehler mehr auftritt. Es sollte eigentlich gehen.

 

[Mauki]

Hm… lad es mal so hoch und validiere/verbessere, bis kein Fehler mehr auftritt. Es sollte eigentlich gehen.

so jetzt ist es online, der Validator sagt wegen dem Menü garnichts, allerdings sieht das scheisse aus und passt nicht

 

[Jakob]

Doch sagt er, und er hat auch recht. Guck Dir nochmal in Post #7 an, wie die verschachtelt werden. Das ul kommt _in_ das li Tag des Überpunktes. Dadurch wird eine logische Gliederung vollzogen.

Im CSS kannst Du mit #submenu {margin-left:0;} den Abstand wegnehmen.

IE kann ich hier leider nicht überprüfen, aber wenn Du die Liste richtig schreibst, sollte der restliche Code zu einer richtigen Darstellung führen.

 

[Mauki]

Doch sagt er, und er hat auch recht. Guck Dir nochmal in Post #7 an, wie die verschachtelt werden. Das ul kommt _in_ das li Tag des Überpunktes. Dadurch wird eine logische Gliederung vollzogen.
.

irgendwie steh ich auf dem Schlauch. Kannst du mir das mal an meinem geposteten Code zeigen ?

 

[Jakob]

Oh! im geposteten ist es auch richtig. Hab im Quelltext auf der Seite geguckt, da ist ne Zwischenform. Wie sieht's denn jetzt im IE aus?

Ah! (Ausrufe gerade hoch im Kurs) Grad hab ich's glaub ich.
Der CSS Validator meckert über zwei Bezeichner und er hat Recht!

a.nav:link  {
        color:#FFFFFF;
        text-decoration: [color=red]Wert und ";" fehlen[/color]
        font-weight: bold;
    }

Das tritt auch noch mal weiter unten auf.

Mögliche Erklärung: Durch die fehlenden Semikola (semi-cola? Pepsi? ) werden Teile des CSS nicht interpretiert. Das erklärt warum Dein submenü im IE gar keine Formatierung bekommt.

 

[Mauki]

Ich habs nun korrigiert, wie du es vorgeschlagen hast, allerdings bringt das das erhoffte Ergebniss nicht. Selbst im Safari oder Camino sieht die Navigation jetzt bescheiden aus.

Schaus dir mal

 

[Jakob]

Das sieht doch sehr gut aus! Das komplette submenu wird gerendert. Das es anders aussehen soll ist nur noch eine Sache von CSS-Einstellungen.

 

[Mauki]

Was findest du da gut dran. Das Submenu klebt direkt am ersten Menueintrag und ist zudem nach Rechts versetzt. Außerdem hat es nicht die Formatierung die es eigentlich haben soll.

Ich glaube ich versteh dich nicht so ganz ?

Was meinst du mit den CSS-Einstellungen, welche passen denn nicht ?

 

[macracer]

Hallo.
Auf der Website sind mir im ersten Absatz 3 Grammatikfehler aufgefallen:

Auf unseren Seiten findet hier Informationen über unseren Stamm, die Pfadfinderei im Allgemeinen, über unseren Verband den VCP und vieles mehr. Einen Überblick über alle Seiten findet ihr in der Sitemap.

Schaut euch einfach in Ruhe alles an, erfahrt mehr über BP den Gründer der Pfadfinder, erfreut euch an unsere Bildergallerie oder schaut nach wer den was macht bei den Denkendorfer Pfadfindern und natürlich vieles mehr. Wenn ihr Fragen habt, könnt ihr uns gerne eine Email schicken. Ihr dürft euch natürlich auch in unser Gästebuch verewigen.

Gut Pfad

 

[Mauki]

Ok danke für die Info. Der Text wird aber eh überarbeitet.

Ich bin auf jeden Fall mal froh, wenn die Navigation steht.

 

[Mauki]

So ich habe mich nun von den Listen getrennt, weil mir scheint das bei Typo3 das wohl zu Problemen führt, da die Navigation ja dynamisch erstellt wird.

Die jetztige Formatierung klappt auch sehr gut, nur sind die Boxen zu weit auseinander. Den korrekten Abstand sieht man hier: hier

Das Problem ist, das ich bei meiner Formatierung nicht weiß, wie ich den ursprünglichen <li> Tag ersetze, der hat nämlich dafür gesorgt das die Buttons enger beisammen sind.

<div id="hauptmenu">
        <a href="#">VCP Denkendorf</a><br>
        <a href="#">Freundeskreis</a><br>
        <a href="#">Pfadichor</a><br>
        <a href="#">Familienkreis</a><br>
        <a href="#">Pfadfinden</a><br>
        <a href="#">Galerie</a><br>
        <a href="#">Gästebuch</a><br>
        <a href="#">Links</a><br>
</div>

/* Stylesheets für Hauptnavigation */
    
#hauptmenu {
   float:left;
   width:150px;
   margin:0 0 10px 5px;
   padding:0;
   list-style:none;
      }
    
#hauptmenu li{
   padding:0 0 2px 0;
   /*der abstand zw den menupunkten kann wegen dem ie nicht mit margin gesetzt werden*/
   margin:0;
   }
    
#hauptmenu a{
   padding:0 0 2px 0;
   /*der abstand zw den menupunkten kann wegen dem ie nicht mit margin gesetzt werden*/
   margin:0;

   width:120px;
   /*die breitenangabe wir nur vom ie benoetigt*/
   display:block;
   color:white;
   background:#538c4a;
   border:1px solid black;
   padding:4px 4px 4px 10px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
   }

#hauptmenu a:hover{
   color:black;
   background:#a9d69e;
   border:1px solid black;
   text-decoration:none;
   }

 

[Mauki]

Navigation macht mir Kopfzerbrechen

Weiß keiner einen Rat zu meinem Problem

P.S. Ich nutze keine Liste mehr.