# Drop Down Menü - Float zentrieren?



## Derk2 (20. Februar 2010)

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


----------



## Maik (20. Februar 2010)

Hi,

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


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

mfg Maik


----------



## Derk2 (20. Februar 2010)

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?


----------



## Maik (20. Februar 2010)

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:


```
body { text-align:center; }
```

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

mfg Maik


----------



## Derk2 (20. Februar 2010)

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


----------



## Maik (20. Februar 2010)

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?


*Wichtig:* Bei CSS-Problemen mit dem IE bitte die Version angeben

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


----------



## Derk2 (20. Februar 2010)

Code kommt:

CSS:

```
#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


----------



## Maik (20. Februar 2010)

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.


```
<!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


----------



## Derk2 (20. Februar 2010)

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


----------



## Maik (20. Februar 2010)

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


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


```
<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


----------



## Derk2 (20. Februar 2010)

Ah, danke! Jetzt habe ich es verstanden.

Nur eine Frage noch. 

Wenn sich unter dem Menü werden beim aufklappen des Menüs verschoben. Da passierte ja vorher nicht, weil das Menü ja absolut positioniert war. Wie kann ich das jetzt beheben?

Derk

Sorry, ich habe etwas schnell getippt.

Hier noch mal das richtige:
Wenn sich unter dem Menü andere Inhalte befinden werden die beim aufklappen des Menüs verschoben. Das passierte ja vorher nicht, weil das Menü absolut positioniert war. Wie kann ich das jetzt beheben?


----------



## Maik (21. Februar 2010)

Bei mir verschiebt sich da nichts, denn *#menuebox* ist weiterhin absolut positioniert:


```
#menuebox {
position: absolute;
height: 30px;
}
```

mfg Maik


----------



## Derk2 (21. Februar 2010)

Wenn ich diesen Wert setze ist das Menü wieder auf der linken Seite.


----------



## Maik (21. Februar 2010)

Durch die absolute Positionierung wird das Blockelement aus seinem normalen Dokumentfluß genommen, und seine Breite richtet sich nicht mehr an seinem Elternelement, sondern an seinem Inhalt aus, der an der rechten Seite des Menüs endet. Somit wird darin *#menue* auch nicht mittels margin:auto horizontal zentriert.

Ergo wird dem Block eine entsprechende Breite zugewiesen:


```
#menuebox {
position:absolute;
height: 30px;
width:100%;
}
```

mfg Maik


----------



## Derk2 (21. Februar 2010)

Okay, an sich ist das ja schlüssig. Aber sobald ich absolute setze, ist das Menü im IE nach rechts verschoben. Im Firefox wird dann der untere Inhalt nicht mehr verschoben, dafür ist das Menü auch nicht mehr ganz in der Mitte, ein bisschen zu weit rechts.


----------



## Maik (21. Februar 2010)

Wenn das Menü aus der Mitte heraus zu einer Seite verschoben ist, stimmt was mit deiner Angabe zur Gesamtbreite des Menüs nicht.

Ist der Wert zu groß gewählt, rutscht das Menü nach links, fällt er zu gering aus, wandert das Menü im Fenster nach rechts.

mfg Maik


----------



## Derk2 (21. Februar 2010)

Wenn ich den Wert so einstelle, dass es in 1024x768 passt, passt es in den anderen Auflösungen nicht mehr. Und im IE bewegt sich seit position:absolute; nichts mehr. Da ist es immer noch verschoben.

Habe ich irgendetwas vergessen?


----------



## Maik (21. Februar 2010)

Jo 

Was genau kannst du meinem Quellcode in Post #8 entnehmen. Und vielleicht auch noch mal meine Beiträge zu Beginn des Themas lesen, die die entscheidenden Hinweise liefern.

Ich kann dir nämlich nur sagen, dass mit meinem Code im IE6 nichts verschoben ist, und er das Menü unabhängig von seiner Fenstergröße immer horizontal zentriert.

Bei Bedarf reiche ich gerne Screenshots von unterschiedlichen Fenstergrößen nach, die dies dokumentieren.

mfg Maik


----------



## Derk2 (21. Februar 2010)

Ich habe mich erst mal hier angemeldet. 

So, hier ist eine Testdatei. Ich habe deinen Code übernommen, es geht trotzdem nicht. Sobald ich aber position absolut weglasse geht es. 

Könnte man nicht absolut weglassen, und das Menü mit z-index über den restlichen Inhalt stellen?


----------



## Maik (21. Februar 2010)

Wie ich schon sagte, mit meinem Code gibt's bei mir keine derartigen Probleme ;-)

Laßt Bilder sprechen 




(v.l.n.r.: IE6 mit Vollbild (=1280*1024px), IE6 mit verkleinerten Fenster (=1024*768px))

Für Firefox & Co. empfehle ich dieses Stylesheet, in dem ich die enthaltenden Maßeinheiten "px" durch "em" ersetzt habe, denn wie haben wir einst in der Schule gelernt:


> Äpfel kann man nicht von Birnen subtrahieren.





```
#menue {
width:56em;
margin:auto;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
font-size: 0.8em;
width: 9.8em;
height: 1.3em;
font-weight: bold;
background-color: #2C2C2C;
color: #DFDFDF;
border: .1em solid;
border-color: #78561d;
}
#menue .aussen:hover {
height: auto;
background-color: #292929;
color: #DFDFDF;
}
a.innen,
a.innen-1 {
display: block;
width: 10em;
padding: .2em 0;
text-decoration: none;
font-weight: normal;
border-bottom: .1em solid #78561d;
border-top: .1em solid #78561d;
background-color: #3B3B3B;
color: #DFDFDF;
}
```

Falls du dich mit dieser relativen Einheit schwer tust, kannst du die Menüdimensionen genauso gut mittels "px" definieren.

Ebenso ist dieser Regelblock zu Beginn des Stylesheets zu empfehlen:


```
* {
margin:0;
padding:0;
}
```

mfg Maik


----------



## Derk2 (21. Februar 2010)

Ich glaube ich habe raus gefunden woran es liegt, bei meiner Seite befindet sich das Menü noch in einem Rahmen. Es wird zwar Zentriert, aber durch die 100% geht das DIV durch den Rahmen durch.

Sorry, dass ich dir gestern nicht gleich schon den ganzen Code gegeben habe. Ich dachte daran könnte das Problem nicht liegen, ich habe jetzt den Code angehängt. 

Den schwarzen Rahmen habe ich nur um das Menü gemacht, damit man sieht wo es durch den Rahmen geht.


----------



## Maik (21. Februar 2010)

Mit den fettmarkierten Attributswerten wird das Menü korrekt zentriert:

```
<table style="width:100%" cellpadding="{$style['tableoutcellpadding']}" cellspacing="{$style['tableoutcellspacing']}" align="center" border="1" class="tableoutborder">
 <tr>
  <td class="mainpage" align="left">
   <table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td class="logobackground" align="center"><if($style['logoimage']!="")><then><a href="index.php{$SID_ARG_1ST}"><img src="{$style['logoimage']}" border="0" alt="$master_board_name" title="$master_board_name" /></a></then></if></td>
    </tr>
    <tr>
     <td align="left">
```

Das ehemalige Attribut align="center" in der letzten Tabellenzelle bewirkt, dass der IE das Menü sozusagen zweimal zentriert, und somit entsprechend nach rechts verschiebt.

mfg Maik


----------



## Derk2 (21. Februar 2010)

Ich kann aber style="width:{$style['tableoutwidth']}" nicht einfach einen Wert zuweisen, der Wert wird ausgelesen, kann also geändert werden. Momentan entspricht der Wert 92%.

Ich habe schon wieder einen Fehler gemacht, und dir nur den Quelltext in eine Datei gepackt. :-(

 Jetzt habe ich es direkt aus dem Browser, mit allen Angaben.


----------



## Maik (21. Februar 2010)

Derk2 hat gesagt.:


> Ich kann aber style="width:{$style['tableoutwidth']}" nicht einfach einen Wert zuweisen, der Wert wird ausgelesen, kann also geändert werden. Momentan entspricht der Wert 92%.


Der Wert spielt hierbei keine Rolle, mit "92%" funktioniert es genauso. Ich hab die "100%" dort nur eingetragen, damit sich die Tabelle überhaupt entsprechend im Viewport ausdehnt.

mfg Maik


----------



## Derk2 (21. Februar 2010)

Hast du dir meinen neuen Anhang angesehen? Da ist der gleiche Fehler weiterhin, obwohl ich alles geändert habe. 
Vielleicht fällt dir ja etwas auf.


----------



## Maik (21. Februar 2010)

Übergibst du die Seite den Browsern genau in dieser Form? Oder ist der Quellcode nur ein Ausschnitt daraus?

Wenn ersteres zutrifft, darfst du dich nicht wundern, dass es bei dir im IE nicht funktioniert, denn mit dieser fehlerhaften Form eines  HTML-Gerüsts schalten alle Browser in den unvorteilhaften "Quirks Mode", was sich in der IE-Familie (6, 7, 8) äußerst negativ auswirkt, da sie in diesem Darstellungsmodus nicht den W3C-Spezifikationen bzgl. des CSS-Boxmodells folgen.

Ich empfehle dir, dich hierzu mal mit diesen Artikeln näher zu beschäftigen:


Der »DOCTYPE-Switch« und seine Auswirkungen
Workshop Doctype-Switch

Mit diesem Quellcode, in dem ich nun alternativ die Menüdimensionen mit der Maßeinheit "px" definiert habe, sitzt das Menü browserübergreifend (FF, IE, Opera, Safari, Google-Chrome, usw.) korrekt in der Fenstermitte:


```
<!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-21" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
#menuebox {
position:absolute;
height: 30px;
width:100%;
}
.stupidie {
display: none;
}
#menue {
width:910px;
margin:auto;
}
#menue .aussen {
float: left;
display: block;
overflow: hidden;
font-size: 0.8em;
width: 128px;
height: 16px;
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: 128px;
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:910px;
margin:auto;
}
a.auss {
float: left;
font-size: 0.8em;
width: 128px;
height: 16px;
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;
}
span.linkwrapper {
position:absolute;
}
</style>
<![endif]-->

</head>
<body>
<table style="width:92%" cellpadding="0" cellspacing="1" align="center" border="0" class="tableoutborder">
 <tr>
  <td class="mainpage" align="center">
   <table style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td class="logobackground" align="center"><a href="index.php"><img src="http://www.tutorials.de/forum/images/armageddon/logo2.jpg" border="0" alt="" title="" /></a></td>

    </tr>
    <tr>
     <td align="left"><div style="position:relative;">
<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>
        <![endif]-->

</div><!-- menuebox -->
</div>
<br/><br/>
    <span class="smallfont"><a href="usercp.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_usercp.gif" border="0" alt="Ihr Profil" title="Ihr Profil" /></a>
     <a href="pms.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_pms.gif" border="0" alt="Private Nachrichten" title="Private Nachrichten" /></a>

     <a href="calendar.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_calendar.gif" border="0" alt="Kalender" title="Kalender" /></a>
     <a href="memberslist.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_members.gif" border="0" alt="Mitgliederliste" title="Mitgliederliste" /></a>
     <a href="team.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_team.gif" border="0" alt="Teammitglieder" title="Teammitglieder" /></a>
     <a href="search.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_search.gif" border="0" alt="Suche" title="Suche" /></a>
     <a href="misc.php?action=faq"><img src="http://www.tutorials.de/forum/images/armageddon/top_faq.gif" border="0" alt="Häufig gestellte Fragen" title="Häufig gestellte Fragen" /></a>
     <a href="acp/index.php" target="_blank"><img src="http://www.tutorials.de/forum/images/armageddon/top_acp.gif" border="0" alt="Test3" title="Admin Control Panel" /></a>

     <a href="irc.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_chat.gif" border="0" alt="Chat" title="Test" /></a>
<a href="index.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_start.gif" border="0" alt="Zur Startseite" title="Zur Startseite" /></a>
<a href="hmportal.php"><img src="http://www.tutorials.de/forum/images/armageddon/top_portal.gif" border="0" alt="Zur Startseite" title="Test2" /></a>
</span></td>

    </tr>
   </table>
<br/>

<table cellpadding="0" cellspacing="1" border="0" width="98%" class="tableinborder">
<tr>
 <td><table cellpadding="4" border="0" cellspacing="0" width="100%">
 <tr class="tablea">
  <td width="33%" align="left"><span class="smallfont">
   <b><a href="index.php"></a> &raquo; Portal</b>

   <br /><b></b>
  </span></td>
  <td width="33%" align="center"><span class="smallfont">&nbsp;

    <br />

  </span></td>
  <td width="33%" align="right"><span class="smallfont"></span>.
   <br/></span></td>

 </tr></table>
</td></tr>

</table>



</body>
</html>
```


mfg Maik


----------

