Probleme mit Darstellung eines horizontalen Menüs im div-Container im IE

[mgriebe]

Hallo Community,

habe ein kleines Problem bei der Darstellung eines horizontalen Menüs in einem div-Container, jedoch nur im IE. Unter Firefox oder Safari passt alles.

Das ganze sieht dann im IE so aus:



und sollte aber so aussehen:



Das ganze sieht in meinem CSS dann wie folgt aus:

.topnav {		
	font-size: 10px;
	margin: 25px 35px 65px 828px;
}

.topnav ul {
	float: left;
	text-align: right;
	list-style-type: none;
}

.topnav a {
	font-size:12px;
	font-weight:bold;
	display: block;
	padding: 6px 8px 5px 8px;	
	border-right: 1px solid #FFFFFF;
	color: #FFFFFF;
	text-decoration: none;			
}

.topnav a:hover {	
	color: #336600;
	background-color: #E1E1E1;
}

Da ich in CSS noch nicht ganz so kapitelfest bin, hoffe ich auf Eure Hilfe, denn ich bekomm´s einfach net hin. Bin dankbar für jede Hilfe...

Gruß Matthias

[wildmieze]

hmm .. warum hat .topnav ein margin von 828px nach links? .. aber das löst dein Problem vermutlich nicht^^

hast Du ganz am Anfang ein "css-reset" gemacht? also sowas wie *{margin:0;padding:0;} ..? Es sieht nämlich so aus, als ob die Liste im IE ein Stückchen weiter rechts anfängt und deswegen nicht mehr ganz draufpasst, das könnte evtl. daran liegen, das Listen in beiden Browsern "unterschiedlich" anfangen, wenn man vorher nicht resettet ..
Ansonsten könntest Du auch das padding etwas kleiner machen, vielleicht auf 7 statt 8 Pixel ..

[mgriebe]

Hi und danke für die schnelle Antwort.

Bin aber auch selten dämlich, war der falsche css-Code...
Aber den Reset mit padding: 0; margin: 0; habe ich durchgeführt.
Der richtige Code, für die Navigationszeile lautet:

.vertnav {		
	float: left;
	font-size: 0.8em;
	margin: 0px 0px 0px 90px;
	text-align:center;
}

.vertnav a {
	float: left;
	display: block;
	padding: 0px 10px 0px 10px;
	color: #FFFFFF;
	font-weight:bold;
	text-decoration: none;			
}

.vertnav a:active {
	float: left;
	display: block;
	padding: 0px 10px 0px 10px;	
	color: #FFFFFF;
	font-weight:bold;
	text-decoration: none;			
}

.vertnav a:visited {
	float: left;
	display: block;
	padding: 0px 10px 0px 10px;	
	font-weight:bold;
	color: #FFFFFF;
	text-decoration: none;			
}

.vertnav a:hover {	
	float: left;
	display: block;
	padding: 0px 10px 0px 10px;	
	font-weight:bold;
	color: #333333;
	text-decoration: none;			
}

[mgriebe]

Hat den niemand eine Idee??

Mir fehlt einfach der zündende Funke...

[wildmieze]

haste denn schonmal das padding von den links runtergesetzt? .. keine schöne methode, aber eine schnelle, wenns denn funktioniert. .. vielleicht ist der platz einfach "zu knapp", vielleicht macht der IE die schrift minimal breiter oder sowas. könnte auch an umgebenden divs liegen, das seh ich ja so nicht...

[phpBuddy]

Mir fehlt einfach der zündende Funke...

Uns fehlt einfach ein Link zur Seite.


Screenshots sind schön und gut, auch CSS ist oft hilfreich, aber am besten immer einen Link zur Seite posten die das Problem aufweist. So kann sich jeder mal schnell selbst ein Bild davon machen und mit Tools wie Firebug den Quelltext, und das Zusammenspiel von CSS und HTML, analysieren. Das ist für Helfer immer noch der schnellste Weg, weil man mit Firebug konkrete Änderungen direkt im Browser durchführen kann um zu sehen, ob dadurch das Problem behoben wird. Okay, beim IE gestaltet sich das etwas schwieriger, als im FF, aber nur wenn man den gesamten Code sieht kann man andere Fehler (nicht geschlossene Tags, Break-Tags, falsche Verschachtelungen usw.) ausschließen, wie sie schon unzählige Mal aufgetreten sind.

Per Screenshots und mit nur Code-Fragmenten ist das ein ewiges hin&her und zieht alles unnötig in die Länge. Durch eine möglichst exakte Beschreibung des Problems und vor allem einem Link zur Seite kann nicht nur schneller, sondern auch erheblich präziser geholfen werden.

[mgriebe]

Hi,
Ok ich habe mich heute nochmal mit dem Problem eingehend beschäftigt, jedoch bin ich nach vielem prüfen und probieren nicht wirklich dahinter gekommen, woran das liegt.

Also hier mal der Link zur Seite:

http://www.ruebe.info/cms/index.php

Das Ganze läuft unter TYPO3, einem html-Template und einer dazugehörigen css.

Wenn noch weitere Infos fehlen, bitte noachmal kurz Bescheid geben.
Das kostet mich wirklich bald den letzten Nerv...

Danke für Eure Hilfe!!

Gruß Matthias

[phpBuddy]

Hallo Matthias,

siehst Du, eine Sache fällt sofort, wenn man 1 Sekunden in den Quelltext schaut. Für deine Navigation verwendest Du eine unordered List, aber darin sind keine Listenelemente, sondern direkt die Links.

<ul>
    <a hred="#">link</a>
    <a hred="#">link</a>
    <a hred="#">link</a>
</ul>

Richtig wäre aber...

<ul>
    <li><a hred="#">link</a></li>
    <li><a hred="#">link</a></li>
    <li><a hred="#">link</a></li>
</ul>

Dazu werden dann die li-Tags gefloated und nicht die a-Tags. Außerdem wäre es sinnvoll einem Element, dass display:block hat, auch eine Breite (width) mitzugeben.

[mgriebe]

Danke Andreas für Deine super schnelle Antwort!

Nun habe ich aber ein kleines Verständnisproblem, was wohl eher an TYPO3 liegt (denke ich). Denn ich habe nun keine Ahnung, warum das hier in eine UL gepackt wird und noch weniger, wie ich daraus nun eine sortierte Liste machen soll...

Hats Du dazu auch eine Idee, oder ist das zu speziell?

Gruß Matthias

[phpBuddy]

Hats Du dazu auch eine Idee, oder ist das zu speziell?

Keinen Schimmer, aber frag mal im TYPO3 Board nach, Steffen wird das schon wissen.

[mgriebe]

Nun hatt ich endlich wieder mal die Zeit, mich etwas mit dem Thema auseinander zu setzen. Habe das auch alles soweit hinbekommen, nur bekomme ich die entsprechende Menüzeile nicht zentriert.

Mit "float:right" und "float:left" wird die Zeile auch wunderbar rechts- oder linksbündig angezeigt. Nur möchte ich das Menü zentriert haben, und genau das funktioniert eben nicht.

Hier mal mein Code:

/*********************/
/* HORIZONTALES MENU */
/*********************/

#hmenu {
	height: 30px;
	width: 100%;
}

#hmenu ul{
	list-style-tyle:none;
	margin:0;
	padding:0;
}
#hmenu li{
	display: inline;
}

#hmenu li a:link, #hmenu li a:visited, #hmenu li a:active{
	color:#FFFFFF;
	display:block;
	float: left;
	padding: 0px 10px;
	text-decoration: none;
	font: bold 0.9em/30px Verdana, Arial, Helvetica, sans-serif;
	height: 30px;
}

#hmenu li a:hover{
	color: #333333;
	display:block;
	float: left;
	padding: 0px 10px;
	text-decoration: none;
	font: bold 0.9em/30px Verdana, Arial, Helvetica, sans-serif;
	height: 30px;
}

<tr>
    <td height="30" colspan="2"><div class="hmenu"><div id="hmenu"><ul><li><a href="index.php?id=ueber_uns"  >ÜBER UNS</a></li><li><a href="index.php?id=organisationen"  >ORGANISATIONEN</a></li><li><a href="index.php?id=zuckerruebenanbau"  >ZUCKERRÜBENANBAU</a></li><li><a href="index.php?id=6"  >LIEFERRECHTE</a></li><li><a href="index.php?id=veroeffentlichungen"  >VERÖFFENTLICHUNGEN</a></li><li><a href="index.php?id=termine"  >TERMINE</a></li><li><a href="index.php?id=downloads"  >DOWNLOADS</a></li></ul></div></div></td>

  </tr>

Wo muss ich denn nun schrauben, das es zentriert wird?

Danke und Gruß Matthias

[hero-master]

Moin
zuallererst haust du mal das eine Div um deinem Menu da raus:

<tr>
    <td height="30" colspan="2"><div id="hmenu"><ul><li><a href="index.php?id=ueber_uns"  >ÜBER UNS</a></li><li><a href="index.php?id=organisationen"  >ORGANISATIONEN</a></li><li><a href="index.php?id=zuckerruebenanbau"  >ZUCKERRÜBENANBAU</a></li><li><a href="index.php?id=6"  >LIEFERRECHTE</a></li><li><a href="index.php?id=veroeffentlichungen"  >VERÖFFENTLICHUNGEN</a></li><li><a href="index.php?id=termine"  >TERMINE</a></li><li><a href="index.php?id=downloads"  >DOWNLOADS</a></li></ul></div></td>
  </tr>

Dann solltest du dem Menu (#hmenu ul) eine Breite zuweisen, z.B. 80% oder 600px. So dass es passt. Diesem weißt du gleichzeitig noch ein margin: 0 auto zu.

Das Floaten der Links ist auch falsch gedacht. Da solltest du dich einmal einlesen. Wenn überhaupt etwas gefloatet werden muss, dann sind es die Listenpunkte, sprich die li-Tags.
Denen hast du aber ein display:inline zugewiesen, so dass sie sich nebeneinander aufbauen. Dadurch kannst du ihnen aber keine blockelement-typischen Eigenschaften, wie Breite oder Höhe zuweisen.

[mgriebe]

Wenn ich das <div> nun rausnehme und das mit der Breite vorgebe, ist das aber immer noch linksbündig.

Welche Möglichkeit gibt es denn, das die Liste Horizontal ausgegeben wird, aber eben zentriert? Das verstehe ich noch nicht so ganz.

Gruß Matthias

[hero-master]

hatte ich doch geschrieben: margin: 0 auto. Such dir einen Link aus

http://www.thestyleworks.de/tut-art/center
http://www.1ngo.de/web/zentrierung.html
http://aktuell.de.selfhtml.org/artikel/css/ausrichtung

[hero-master]

hatte ich doch geschrieben: margin: 0 auto. Such dir einen Link aus

http://www.thestyleworks.de/tut-art/center
http://www.1ngo.de/web/zentrierung.html
http://aktuell.de.selfhtml.org/artikel/css/ausrichtung