IE (PC) verhaut Layout

Mauki

Aktives Mitglied
Thread Starter
Registriert
24.07.2002
Beiträge
15.411
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:

Jakob

Aktives Mitglied
Registriert
05.01.2004
Beiträge
1.070
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
Registriert
24.07.2002
Beiträge
15.411
Zuletzt bearbeitet von einem Moderator:

Jakob

Aktives Mitglied
Registriert
05.01.2004
Beiträge
1.070
Laut Validator fehlt das <ul>-Tag oder steht an der falschen Stelle.
 

Mauki

Aktives Mitglied
Thread Starter
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
05.01.2004
Beiträge
1.070
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
05.01.2004
Beiträge
1.070
Hm… lad es mal so hoch und validiere/verbessere, bis kein Fehler mehr auftritt. Es sollte eigentlich gehen.
 

Mauki

Aktives Mitglied
Thread Starter
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
05.01.2004
Beiträge
1.070
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
05.01.2004
Beiträge
1.070
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
05.01.2004
Beiträge
1.070
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
09.05.2004
Beiträge
1.315
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
24.07.2002
Beiträge
15.411
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
Registriert
24.07.2002
Beiträge
15.411
Navigation macht mir Kopfzerbrechen

Weiß keiner einen Rat zu meinem Problem :(

P.S. Ich nutze keine Liste mehr.
 
Oben