Drop Down Menü - Float zentrieren?

D

Derk2

Hallo,

ich benutze folgendes Drop Down Menü:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php

Es funktioniert auch ganz wunderbar in allen Browsern. Nur wollte ich das Menü jetzt zentrieren, und es klappt nicht. Ich habe verschiedene Möglichkeiten ausprobiert. z.B. text-align, ein übergeordnetes DIV... Aber nichts funktioniert. Jetzt bin ich auch auf das Problem gekommen. Es ist das float: left; Wenn man das weg lässt, ist das Menü zentriert. Allerdings nicht mehr nebeneinander, sondern untereinander. Ist ja klar, float fehlt ja.

Weiß einer von euch eine Lösung?


Derk
 
Hi,

verwende anstelle des Original-Stylesheets für #menue diese Regeln:

CSS: 
#menue {
width:32.5em;
margin:auto;
}

mfg Maik
 
Hi,

danke für deine Antwort. Ich glaube wir sind schon einen Schritt weiter. Das Menü ist jetzt zentriert, allerdings sind 4 der insgesamt 7 Menüpunkte oben und die anderen 3 unten.

Dafür ist es jetzt zentriert.

Woraus ergibt sich der Wert 32.5em?

Blöde frage nächste frage. :)

Natürlich ergibt sich der Wert aus den Menüpunkten. Vielen Dank. Sag mal, funktioniert das auch im IE?
 
Meine Breitenangabe bezieht sich auf das Beispiel, das vier Hauptpunkte mit jeweils 8em Breite und umlaufenden Rahmen besitzt.

Folglich müsst ihr bei 7 Menüpunkten die Gesamtbreite aufstocken.

Und ja, dies funktioniert auch im IE, sofern das HTML-Dokument mit der entsprechenden Doctype-Deklaration den Browsern im standardkonformen Modus übergeben wird.

Ansonsten, wenn die Browser in den "Quirks Mode" schalten, nehmt ihr diese Regel im CSS auf:

CSS: 
body { text-align:center; }

Und deklariert für das Nachfolgeelement text-align:left, damit sein Inhalt linksbündig ausgerichtet wird.

mfg Maik
 
Hm,
keine Chance, dass Menü verschiebt sich im IE komplett nach rechts wenn ich das so mache. Und auf klappbar ist es dann auch nicht mehr. Ich kann dir leider kein Beispiel zeigen, da die Seite nicht online ist. Hast du noch eine andere Idee?

Derk
 
Dann poste bitte deinen vollständigen HTML- und CSS-Code, damit ich Gelegenheit habe, ihn im Browser zu begutachten.

Von welcher IE-Version ist hier überhaupt die Rede?


Beachte, dass die Ergänzungen im Code dem IE6 und älter gewidmet sind, und somit die "Conditional Comments" spezifiziert gehören, um IE7 und IE8 hiervon auszuschliessen, da diese den Selektor .aussen:hover interpretieren - "Almost Standards Mode" im HTML-Dokument selbstverständlich vorausgesetzt, denn im "Quirks Mode" verhalten sie sich genauso fehlerhaft in der Interpretation der CSS-Spezifikationen, wie ihre Vorgänger aus dem letzten Jahrhundert.

mfg Maik
 
Code kommt:

CSS:
Code: 
#menuebox {
position: absolute;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
width:57em;
margin:auto;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
font-size: 0.8em;
width: 10em;
height: 1.3em;
font-weight: bold;
background-color: #2C2C2C;
color: #DFDFDF;
border: 1px solid;
border-color: #78561d;
}
#menue .aussen:hover {
height: auto;
background-color: #292929;
color: #DFDFDF;
}
a.innen,
a.innen-1 {
display: block;
width: 10em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
border-top: 1px solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #515151;
color: #FFFFFF;
}

span.menutag {
display: block;
cursor: default;
}


<!--[if IE]>

#menue {
display:none;
}
.stupidie {
text-align:center;
width:32.5em;
margin:auto;
}
a.auss {
float: left;
font-size: 0.8em;
width: 10em;
height: 1.3em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #2C2C2C;
color: #DFDFDF;
border: 1px solid;
border-color: #78561d;
}
a:hover.auss {
overflow: visible;
background-color: #292929;
color: #DFDFDF;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #3B3B3B;
color: #DFDFDF;
border-collapse: collapse;
}
a.inn {
display: block;
width: 7.9em; 
padding: 2px 0;
font-size: 100%; 
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}
a:hover.inn {
position: relative;
background-color: #515151;
color: #FFFFFF;
}
span.menutag {
display: block;
cursor: default;
}
<![endif]-->
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav, #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em; 
}

#nav li ul { 
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; 
}

#nav li:hover ul, #nav li.sfhover ul { 
	left: auto;
}
Am HTML Code ist nichts weiter anders als im Beispiel. Ich benutze noch IE6.


Derk
 
Zuletzt bearbeitet von einem Moderator:
Existiert dein CSS-Code auch in dieser Form aus einem Guß?

Die "Conditional Comments" haben darin nichts zu suchen, sondern werden im Anschluß des ersten Stylesheets notiert.

Und da die aktuellen IE-Versionen diesen "Workaround" überhaupt nicht nötig haben, hab ich sie mittels <!--[if lt IE 7]> hiervon ausgeschlossen.

Mit diesem Code sitzt bei mir im IE6 das Menü in der Fenstermitte, und die Submenüs werden von ihm auch bereitwillig geöffnet.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-20" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
#menuebox {
position: absolute;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
width:57em;
margin:auto;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
font-size: 0.8em;
width: 10em;
height: 1.3em;
font-weight: bold;
background-color: #2C2C2C;
color: #DFDFDF;
border: 1px solid;
border-color: #78561d;
}
#menue .aussen:hover {
height: auto;
background-color: #292929;
color: #DFDFDF;
}
a.innen,
a.innen-1 {
display: block;
width: 10em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
border-top: 1px solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #515151;
color: #FFFFFF;
}

span.menutag {
display: block;
cursor: default;
}
/* ]]> */
</style>

<!--[if lt IE 7]>
<style type="text/css">
#menue {
display:none;
}
.stupidie {
display:block;
width:57em;
margin:auto;
}
a.auss {
float: left;
font-size: 0.8em;
width: 10em;
height: 1.3em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #2C2C2C;
color: #DFDFDF;
border: 1px solid;
border-color: #78561d;
}
a:hover.auss {
overflow: visible;
background-color: #292929;
color: #DFDFDF;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #3B3B3B;
color: #DFDFDF;
border-collapse: collapse;
}
a.inn {
display: block;
width: 7.9em;
padding: 2px 0;
font-size: 100%;
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}
a:hover.inn {
position: relative;
background-color: #515151;
color: #FFFFFF;
}
span.menutag {
display: block;
cursor: default;
}
</style>
<![endif]-->

</head>
<body>

<div id="menuebox">

        <div id="menue">
                <div class="aussen">
<span class="menutag">Item 1</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 2</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 3</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 4</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 5</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 6</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
                </div>
                <div class="aussen">
<span class="menutag">Item 7</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>
                </div>
        </div><!-- menue -->

<!-- Der folgende Block bedient nur IEs!
         Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if lt IE 7]>
        <div class="stupidie">
<a class="auss" href="#"><span class="menutag">Item 1</span>
<table><tr><td>
<a class="inn" href="#">Systeme</a>
<a class="inn" href="#">Speicher</a>
<a class="inn" href="#">Laufwerke</a>
<a class="inn" href="#">Monitore</a>
<a class="inn" href="#">Drucker</a>
<a class="inn" href="#">Zubehör</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 2</span>
<table><tr><td>
<a class="inn" href="#">Netzwerke</a>
<a class="inn" href="#">Server</a>
<a class="inn" href="#">Wartung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 3</span>
<table><tr><td>
<a class="inn" href="#">Reparatur</a>
<a class="inn" href="#">Konfiguration</a>
<a class="inn" href="#">Software</a>
<a class="inn" href="#">Schulung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 4</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 5</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 6</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Item 7</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
        </div><!-- stupidie -->
<![endif]-->

</div><!-- menuebox -->

</body>
</html>


mfg Maik
 
H Maik,

was meinst du mit aus einem Guss?

Ich habe das in einer externen CSS-Datei, ist das falsch? Ich kenne mich mit Conditional Comments noch nicht so aus. Wie mache ich das denn in einer externen Datei richtig?

Derk
 
Schau dir meinen Code bzgl. der Einbindung der Stylesheets mal genauer an:

Code: 
<style type="text/css">
/* <![CDATA[ */

/* Stylesheet für standardkonforme Browser */

/* ]]> */
</style>

<!--[if lt IE 7]>
<style type="text/css">

/* Stylesheet für IE5.x und IE6 */

</style>
<![endif]-->


Oder im Falle von externen CSS-Dateien:

Code: 
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]-->


Siehe auch Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück