Hi Leute,

ich habe ein Problem mit meinem Layout, und zwar habe ich mit CSS ein "Aufklappmenu" erstellt und würde dies gerne mittig in eine Tablle einfügen, das funktioniert aber nicht so wie ich es möchte.

Brauche da mal eure hilfe.

Der Code für die Tabelle sieht so aus.

PHP-Code:

<table class="navigation">
   <tr>

         <td><div id="menue">
   <?php
   if(isset($_SESSION['username']))
   {
   ?>   
      <div class="aussen">
      <span class="menutag">Mein Profil</span>
      <a class="innen" href="#">Profilvorschau</a>
      <a class="innen" href="userdaten.php">Pers&ouml;nliche Daten</a>      
      <a class="innen" href="profildaten.php">Profildaten 1</a>      
      <a class='innen' href='profildaten2.php'>Profildaten 2</a>      
      <a class='innen' href='#'>Einstellungen</a>
      <a class='innen' href='#'>G&auml;stebuch</a></div>
      
      <div class='aussen'>
      <span class='menutag'>Meine Nachrichten</span>
      <a class='innen' href='#'>Posteingang</a>
      <a class='innen' href='#'>Postausgang</a> 
      <a class='innen' href='#'>Meine Ordner</a>  
      <a class='innen' href='#'>Nachrichten-Filter</a>  
      <a class='innen' href='#'>Einstellungen</a>
      <a class='innen' href='#'>Scam melden !</a></div> 
  <?php
   }
      $abfrage2 = "SELECT `status` FROM `mitglieder` WHERE `status` = 'online'";
      $ergebnis2 = mysql_query($abfrage2);
      $anzahl2 = mysql_num_rows($ergebnis2);
  ?>
      
      <div class='aussen'>
      <span class='menutag'>Mitglieder Suche</span>
      <a class='innen' href='#'>**********</a>
      <a class='innen' href='#'>Wer hat Geburtstag</a> 
      <a class='innen' href='#'>User online (<?php echo $anzahl2; ?>)</a>  
      <a class='innen' href='#'>Erfolgsgeschichten</a></div>  

      <div class='aussen'>
      <span class='menutag'>Extras</span>
      <a class='innen' href='#'>Extras</a></div></div>
   
  </td></tr>  
</table>

CSS Scripts dazu :

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

#menue { position: absolute; }   .aussen { border: 1px inset #330033; margin: 0px; padding: 0px; float: left; display: block; width: 150px; background-color: #66ffff; color: #000066; font-size: 12px; font-family: Times New Roman,Times,serif; font-weight: bold; text-align: center; height: 25px; overflow: hidden; -moz-border-radius:10px 5px; -ms-border-radius:10px 5px; -webkit-border-radius:10px 5px; border-radius:10px 5px; behavior: url(border-radius.htc); } a.innen { border-style: solid; border-color: #000066; border-width: 0px 0px 1px; margin: 0px; padding: 4px 0px 0px; display: block; width: 150px; height: 25px; text-decoration: none; font-family: Times New Roman,Times,serif; font-weight: normal; color: #000066; background-color: #33ffff; } span.menutag { margin: 0px; padding: 0px; height: 25px; display: block; background-color: #66ffff; font-family: Arial,Helvetica,sans-serif; line-height: 25px; } .aussen:hover { height: auto; } a.innen:hover { font-family: Times New Roman,Times,serif; color: #3333ff; background-color: #ffffcc; }

Die Ausgabe ist auf dem Anhang Bild zu sehen.

Wie mache ich es jetzt das die Navileiste mittig angezeigt wird, habe schon vieles versucht aber immer wenn ich sie auf mittig hatte und dann mit der Maus drübergegangen bin klappte auch die ganze Tabelle mit auf und das soll sie ja grad nicht machen.
So wie es auf dem Bild zu sehen ist klappen nur die Menupunkte auf, die Tabelle bleibt so wie sie sein soll.
Ich hatte bei #menu schon verschiedene Sachen versucht, display: inline-table; usw aber nichts hat genutzt.

Danke schon jetzt für eure Hilfe

Hey Leute,

hat denn echt niemand eine Ahnung woran es liegen könnte das die leiste nicht richtig bzw. mittig dargestellt wird

<center>
deine Leiste hier
</center>

?!

Oder wie meinst du es? Wenn du so lieb wärst könntest du ja mit Paint ein Bild erstellen, wie inetwa das ganze auszusehen hat.

LG

So wie auf dem Bild im Anhang sollte es eigentlich aussehen bzw. wollte ich es haben.

Habe wie gesagt schon Vieles versucht aber nichts hat bis jetzt funktioniert.

na dann mach doch center drum rum und wenn du abstand von der begrenzung möchtest pack <br>'s rein ?

Genau das ist es ja was gerade nicht funktioniert.
Es funktioniert wenn ich position: relative; mache, nur das dann eben die komplette Hintergrundleiste mit aufklappt was sie ja eben nicht soll.
Aber dann wird dir Navileiste richtig in horizontaler und vertikaler Richtung in der Mitte ausgerichtet ****?

Sobald ich aber wieder position: absolut; mache und die Leiste wieder richtig aufklappt, wird sie wieder links und unterhalb angezeigt, ist echt zum Mäusemelken

hast du es mit margin und padding etc. probiert? definier doch die außenabstände wenn du das noch nicht probiert hast. alternativ kannst du mir auch alle quelldatein zukommen lassen, dann such ich auch nach einer lösung

ich hab es zwar in deinem Fall noch nicht probiert, aber probier mal margin:auto;

Hallo
Unabhängig von deinem eigentlichen Problem noch ein Tipp:

Wenn du die Anzahl wissen willst dann solltest du auch die Anzahl ermitteln.

Code sql:

1	SELECT COUNT(*) FROM `mitglieder` WHERE `status` = 'online'

liefert dir direkt die gewünschte Anzahl und die Datenbank muss nicht erst Tausende Status selektieren die dann ja nur verworfen werden.

@ franz007 ,

klar, hast Recht, hatte ich wärend der ganzen programmiererei übersehen bzw. nicht bedacht, danke

@ n1roxxer,

hatte es schon mit margin versucht und auch mit padding, hat aber beides nichts geholfen, wobei ich bei margin das Gefühl hatte das die ganze Navileiste garnicht in der Tabelle "drin" ist, was ich aber nicht verstehe da sie ja in die Tabelle eingefügt ist.

Wenn das eine Navigationsleiste sein soll, dann ist sie falsch definiert. Menüs/Navigationen erstellt man mit <ul> bzw. <navigation> (in HTML5). Ein horizontales Menü waagerecht zu zentrieren ist dennoch etwas tricky, es gibt aber viele Tutorials und Hinwesie dazu:
http://www.ohne-css.gehts-gar.net/0063.php
http://www.thestyleworks.de/tut-art/centerblock.shtml