IE (PC) verhaut Layout

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
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
 
Zuletzt bearbeitet von einem Moderator:

hagbard86

Aktives Mitglied
Dabei seit
30.03.2005
Beiträge
4.085
Punkte Reaktionen
43
weil sich der IE nicht an die standart hält
 

Jakob

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
Zuletzt bearbeitet von einem Moderator:

Jakob

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
Laut Validator fehlt das <ul>-Tag oder steht an der falschen Stelle.
 

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
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

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
Ui, da schau ich im Quelltext und siehe da…
Das garnix gut:
Code:
<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:
Code:
<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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
habs nun mal so probiert, aber da verhaut es auch die Navigation.

HTML:
<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

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
Hm… lad es mal so hoch und validiere/verbessere, bis kein Fehler mehr auftritt. Es sollte eigentlich gehen.
 

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
Jakob schrieb:
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

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
Jakob schrieb:
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

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
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!
Code:
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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
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

Aktives Mitglied
Dabei seit
05.01.2004
Beiträge
1.070
Punkte Reaktionen
21
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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
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

Aktives Mitglied
Dabei seit
09.05.2004
Beiträge
1.312
Punkte Reaktionen
41
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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
Ok danke für die Info. Der Text wird aber eh überarbeitet.

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

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
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.

HTML:
<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>


HTML:
/* 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

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.422
Punkte Reaktionen
161
Navigation macht mir Kopfzerbrechen

Weiß keiner einen Rat zu meinem Problem :(

P.S. Ich nutze keine Liste mehr.
 
Oben Unten