Drop Down Menü - Float zentrieren?

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.
 

Anhänge

  • test.zip
    1,8 KB · Aufrufe: 30
Mit den fettmarkierten Attributswerten wird das Menü korrekt zentriert:
Code: 
<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
 
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. :)
 

Anhänge

  • test.zip
    2,5 KB · Aufrufe: 17
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%.
Zum Vergrößern anklicken....
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
 
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. ;)
 
Ü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:


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:

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-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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück