Problem mit Dropdownmenü

Cloud Strife · 10. März 2012

Hallo

Ich glaube ein Bild sagt mehr als 1000 Worte
[attachment=0]fehler.jpeg[/attachment]
Wie bekomme ich das wieder gerichtet? Die unteren Links müssen nicht in einer eigenen Box eingeschlossen sein. Liegt das daran das alle <ul> und <li> den #navi unterliegen? In #navi liegen die Befehle für das Aussehen der Boxen und der Schrift. Wie man sehen kann verdrängt es auch den Text in der unteren Box. Oder ist es weil ich ".Container" benutze um die Float Befehle immer mittig zu haben? Das übrigens leider nicht mehr so funktioniert seit ich das Drpdownmenü eingeführt hatte.

mfg
Thomas

Basi · 10. März 2012

Code...

Cloud Strife · 10. März 2012

CSS:

Code

html, body
    .comtainer {margin:10px auto;width:960px;overflow:hidden}
	.container-inner {position:relative;left:-50%;float:right}
	.container-inner ul {position:relative;left:50%}
	.container-inner li {display:inline;border-right:1px solid #525252;line-height:normal;padding:0 10px}
	.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
	.container-inner a:hover {text-decoration:underline}
	.container-inner li:last-child {border-right:none}
{
background-color: #FFFFFF;
}
#navi {                           /* Für die Anordnung der Link Inhalte */
   text-align: center;            /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
   font-weight: bold;             /* Schriftbreite */
   font-size: medium;             /* Schriftgröße */
}
#navi ul {                         /* Algemeiner Befehl */
   list-style:none;               /* keine Aufzählungspunkte */
    list-style-type:none;
    margin:0px;
    padding:0px;
}
#navi li {                          /* Schrift und Farbe sowie Anordnung der Links */
   float: left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:128px;                     /* Breite des Links  */




   background-color: #FFFFFF;     /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px purple solid ;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px black solid;    /* Rahmenfarbe unten  */
   border-right:2px black solid;    /* Rahmenfarbe unten  */
   margin-top:10px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
}
#navi li ul {
    display:none;
 }
#navi li:hover ul {
    display:block;
    }
#newsbox {
    margin-top: 150px;
}
#profilbox {
    margin-top: 150px;
}

Alles anzeigen

HTML:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Testseite</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>




<center>
 <img src="Testlogo.jpg" width="65" height="40" style="border: 0px;"   />  </center>
<br />
<div  id="navi">
	<div class="container">
	    <div class="container-inner">                                                   <!--DAS LOGO WIRD DIE STARSEITE -->
<li><a href="#">Registrieren</a></li>
  <li><a href="#">#</a>
    <ul>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
    </ul>
  </li>
  <li><a href="#">#</a>
    <ul>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
      <li><a href="#">#</a></li>
    </ul>
  </li>
  <li><a href="#">Impressum</a></li>
</ul>
	    </div>
	</div>
 </div>
<div id="newsbox">
<center>
<div style="background-color: #FFFFFF;




            width:650px;
            height:200px;
            margin: auto;
            border-top: 1px purple solid;
            border-left: 1px purple solid;
            border-right: 1px purple solid;
            border-bottom: 1px purple solid;




">




<p>~Test um zu schauen ob es in der Box steht~</p>
</center>
</div>
</div>
<div id="profilbox">
<center>
<div style="background-color: #FFFFFF;




            width: 450px;
            height: 2000px;
            padding: 100px;
            margin-top: 150px;
            border-top: 5px purple solid;
            border-left: 5px purple solid;




">
</center>
</div>
</div>
</body>
</html>

Alles anzeigen

Bitteschön

Basi · 10. März 2012

Und jetzt bitte noch mal die genaue Problembeschreibung, was gehört wo nicht hin? Bei mir sieht das halbwegs ordentlich aus..

Cloud Strife · 10. März 2012

Ich dachte auf dem Bild ist das Offensichtlich *g* Die untergeordneten Links stechen doch aus der dafür vorgesehenen Tabelle nach rechts raus. Anstatt gerade neben dem lang gezogenen purple strich herunter zu laufen, sind sie in eignen Boxen und etwas weit rechts. Ich dachte da eher an so etwas:
[attachment=0]richtig.jpg[/attachment] Bearbeitet via Paint!

-Die links sind angeordnet
-Der text in der unterliegenden Box wird nicht nach unten gedrückt beim öffnen.
-Die links haben keine eignen Boxen mehr.
Oh und nicht zu vergessen meine Sichtbaren Links waren durch die .Container automatisch in die Mitte gesetzt worden. Jetzt stehen die wieder left. Irgendein Befehl schneidet dazwischen

unkown-6363 · 10. März 2012

den Abstand von Links kriegst du mit

Code

li ul, li ul li
{
margin:0;
padding:0;
}

weg.

Problem mit Dropdownmenü

Jetzt mitmachen!

Teilen