Auf Thema antworten 2026

Beitrag

<blockquote data-quote="mastergeiger" data-source="post: 1659886" data-attributes="member: 464183">Hallo,ich habe ein kleines backend gescriptet mit einem Dropdown menü. Allerdings ist die seitenbox neben dem navi und nicht unter dem navi. Wenn ich statt einer Liste einfach &lt;a&gt;test test bla&lt;/a&gt; reinschreibe stimmt alles. da ich das meisten STRG + C gemacht habe und mich nicht wirklich in der CSS Materie auskenne brauche ich eure hilfe!Die index.php sieht folgendermaßen aus:[PHP]&lt;!-- Stylesheets --&gt;&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;style/style.css&quot; /&gt;&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;style/dropdown.css&quot; /&gt;&lt;!-- jQuery --&gt;&lt;script src=&quot;includes/js/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script src=&quot;includes/js/jquery.validate.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;wrapper&quot;&gt;&lt;div id=&quot;header&quot;&gt;&lt;h1&gt;Admin &lt;strong&gt;Backend&lt;/strong&gt;&lt;/h1&gt;&lt;/div&gt;&lt;div id=&quot;nav&quot;&gt;&lt;ul id=&quot;navi&quot;&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 1&lt;/a&gt;&nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 1.1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 1.2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 1.3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 2&lt;/a&gt;&nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 2.1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 2.2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Page 2.3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div id=&quot;seitenbox_links&quot;&gt;&lt;a&gt;dsf&lt;/a&gt;&lt;/div&gt;&lt;div id=&quot;seitenbox_rechts&quot;&gt;&lt;a&gt;dsf&lt;/a&gt;&lt;/div&gt;&lt;div id=&quot;content&quot; class=&quot;mit_seitenbox&quot;&gt;&lt;a&gt;ahsdahsdhasdhj&lt;/a&gt;&lt;?php#$site=(addslashes($_GET[&#039;action&#039;]));#$result = mysql_query(&quot;SELECT * FROM hp WHERE site=&#039;&quot;.$site.&quot;&#039;&quot;) or die(mysql_error()); #$row = mysql_fetch_array( $result );#echo $row[&#039;content&#039;];?&gt;&lt;/div&gt;&lt;div id=&quot;footer&quot;&gt;&lt;h2&gt;Code by&lt;strong&gt; Patrick Geiger&lt;/strong&gt;&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/PHP]Die style.css sieht so aus:[CODE]@charset &quot;utf-8&quot;;/* CSS Document *//* Jeder Selektor wird hiermit auf 0 gesetzt */* {margin:0;padding:0;}body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font:10px verdana;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#555;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:url(../images/body.png) top repeat-x #333;} #wrapper {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:760px;} #header {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:250px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:url(../images/header.gif)}/* Das ist die Formatierung für eine Überschrift im Header */#header h1 {height:45px;font:250% Trebuchet MS;padding:30px 20px 10px 20px;color:#fff;}/* Hier beginnt die Formatierung für das Navigationsmenü */#nav {margin:0 0 0 0;}#content {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float:inherit;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:1 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:120%;}/* Überschriften im Content stylen */#content h2 {font:150% Trebuchet MS;color:#222;border-bottom:1px solid #eee;}#content h3 {font:140% Arial;color:#222;border-top:1px solid #f6f6f6;border-bottom:1px solid #f6f6f6;padding:5px;}.mit_seitenbox {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0 0 0 200px;} /* Ein paar Selektoren des Contents gesammelt und formatiert *//* ACHTUNG: Line-Height ändern auch hier den Zeilenabstand im gesamten Text!! */#content h1,h2,h3,h4,p,ul,ol {margin:15px 0;line-height:20px;}#seitenbox_links {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float:left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:180px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:0 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:#EBEAEA;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font:100% Verdana;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-right:1px solid #CCC; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0 15px 0 0;}/* Überschriftformatierung für Seitenbox */#seitenbox_links h2 {font:140% Arial;color:#222;border-top:1px solid #f6f6f6;border-bottom:1px solid #f6f6f6;padding:5px;}/* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */#seitenbox_links p {line-height:20px;}#seitenbox_rechts {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float:right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:180px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:0 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:#EBEAEA;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font:100% Verdana;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-right:1px solid #CCC; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0 15px 0 0;}/* Überschriftformatierung für Seitenbox */#seitenbox_rechts h2 {font:140% Arial;color:#222;border-top:1px solid #f6f6f6;border-bottom:1px solid #f6f6f6;padding:5px;}/* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */#seitenbox_rechts p {line-height:20px;}#footer {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:30px -5px -5px -5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding:15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:#f6f6f6;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top:2px solid #eee;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear:left;}/* AB HIER: FORMATIERUNGEN, DIE HTML-TAGS ÜBERSCHREIBEN FÜR TEXT IM CONTENT *//* Zum Zitieren bzw. hier nur für HTML Code verwendet */code {background:#f6f6f6;}/*Tool Tipps*/.tip { border-bottom:1px dotted #000000; cursor:help; }a.tip,a.tip:link,a.tip:visited,a.tip:active { color: #616161; text-decoration: none; position: relative; }a.tip:hover { background: transparent; z-index: 100; }a.tip span { display: none; text-decoration: none; }a.tip:hover span { display: block;position: absolute; top: 40px; left: 0; width: 400px;z-index: 100; color: #2f2f2f; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; padding: 2px 10px; background-color: #ebebeb; text-align: left; border-color: #00F; border-style: solid; border-width: 1px 4px; }[/CODE]Die dropdown.css sieht so aus:[CODE]@charset &quot;utf-8&quot;;/* CSS Document */#navi, #navi ul {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}#navi li {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 9em;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; list-style-type: none;}#navi li ul a {&nbsp; &nbsp; margin-left: 1em;}#navi li ul {&nbsp; &nbsp; left: -9999px;&nbsp; &nbsp; position: absolute;}#navi li:hover ul {&nbsp; &nbsp; left: auto;}&lt;!-- Popup &amp; Whitespace Bugfix für IE7 --&gt;&lt;!--[if lte IE 7]&gt;&lt;style type=&quot;text/css&quot;&gt;#navi a {&nbsp; &nbsp; min-height: 0;}* html #navi a {&nbsp; &nbsp; height: 1px;}#navi li:hover {&nbsp; &nbsp; text-indent: 0;}&lt;/style&gt;&lt;![endif]--&gt;/* Optionale Formatierung */#navi {&nbsp; &nbsp; font-family: Verdana;}/* Hauptmenüpunkte formatieren */#navi li a,#navi li a:link,#navi li a:active,#navi li a:visited {&nbsp; &nbsp; display: block;&nbsp; &nbsp; padding: 5px 10px;&nbsp; &nbsp; color: #000;&nbsp; &nbsp; background-color: #ccc;&nbsp; &nbsp; text-decoration: none;}#navi li a:hover {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; background-color: #999;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }/* untergeordnete Menüpunkte formatieren */#navi li ul a,#navi li ul a:link,#navi li ul a:active,#navi li ul a:visited {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: 1em;&nbsp; &nbsp; padding: 5px 10px;&nbsp; &nbsp; color: #000;&nbsp; &nbsp; background-color: #ddd;&nbsp; &nbsp; text-decoration: none;}#navi li ul a:hover {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; background-color: #000;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }[/CODE]So sieht es im moment aus:Wenn ich die liste(navi) raus mache und irgendein text reinschreib sieht es so aus:Ich hoffe ihr könnt mir weiterhelfen</blockquote>

[QUOTE="mastergeiger, post: 1659886, member: 464183"] Hallo, ich habe ein kleines backend gescriptet mit einem Dropdown menü. Allerdings ist die seitenbox neben dem navi und nicht unter dem navi. Wenn ich statt einer Liste einfach <a>test test bla</a> reinschreibe stimmt alles. da ich das meisten STRG + C gemacht habe und mich nicht wirklich in der CSS Materie auskenne brauche ich eure hilfe! Die index.php sieht folgendermaßen aus: [PHP]  <link type="text/css" rel="stylesheet" href="style/style.css" /> <link type="text/css" rel="stylesheet" href="style/dropdown.css" />  <script src="includes/js/jquery.js" type="text/javascript"></script> <script src="includes/js/jquery.validate.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="header"> <h1>Admin Backend</h1> </div> <div id="nav"> <ul id="navi"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a> <ul> <li><a href="#">Page 1.1</a></li> <li><a href="#">Page 1.2</a></li> <li><a href="#">Page 1.3</a></li> </ul> </li> <li><a href="#">Page 2</a> <ul> <li><a href="#">Page 2.1</a></li> <li><a href="#">Page 2.2</a></li> <li><a href="#">Page 2.3</a></li> </ul> </li> </ul> </div> <div id="seitenbox_links"> <a>dsf</a> </div> <div id="seitenbox_rechts"> <a>dsf</a> </div> <div id="content" class="mit_seitenbox"> <a>ahsdahsdhasdhj</a> <?php #$site=(addslashes($_GET['action'])); #$result = mysql_query("SELECT * FROM hp WHERE site='".$site."'") or die(mysql_error()); #$row = mysql_fetch_array( $result ); #echo $row['content']; ?> </div> <div id="footer"> <h2>Code by Patrick Geiger</h2> </div> </div> </body> </html> [/PHP] Die style.css sieht so aus: [CODE] @charset "utf-8"; /* CSS Document */ /* Jeder Selektor wird hiermit auf 0 gesetzt */ * { margin:0; padding:0; } body { font:10px verdana; color:#555; margin:20px; background:url(../images/body.png) top repeat-x #333; } #wrapper { width:760px; } #header { height:250px; background:url(../images/header.gif) } /* Das ist die Formatierung für eine Überschrift im Header */ #header h1 { height:45px; font:250% Trebuchet MS; padding:30px 20px 10px 20px; color:#fff; } /* Hier beginnt die Formatierung für das Navigationsmenü */ #nav { margin:0 0 0 0; } #content { float:inherit; padding:1 15px; font-size:120%; } /* Überschriften im Content stylen */ #content h2 { font:150% Trebuchet MS; color:#222; border-bottom:1px solid #eee; } #content h3 { font:140% Arial; color:#222; border-top:1px solid #f6f6f6; border-bottom:1px solid #f6f6f6; padding:5px; } .mit_seitenbox { margin:0 0 0 200px; } /* Ein paar Selektoren des Contents gesammelt und formatiert */ /* ACHTUNG: Line-Height ändern auch hier den Zeilenabstand im gesamten Text!! */ #content h1,h2,h3,h4,p,ul,ol { margin:15px 0; line-height:20px; } #seitenbox_links { float:left; width:180px; padding:0 10px; background:#EBEAEA; font:100% Verdana; border-right:1px solid #CCC; margin:0 15px 0 0; } /* Überschriftformatierung für Seitenbox */ #seitenbox_links h2 { font:140% Arial; color:#222; border-top:1px solid #f6f6f6; border-bottom:1px solid #f6f6f6; padding:5px; } /* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */ #seitenbox_links p { line-height:20px; } #seitenbox_rechts { float:right; width:180px; padding:0 10px; background:#EBEAEA; font:100% Verdana; border-right:1px solid #CCC; margin:0 15px 0 0; } /* Überschriftformatierung für Seitenbox */ #seitenbox_rechts h2 { font:140% Arial; color:#222; border-top:1px solid #f6f6f6; border-bottom:1px solid #f6f6f6; padding:5px; } /* Absatzformatierung. ACHTUNG: Line-Height ändert Zeilenabstand der Seitenbox!! */ #seitenbox_rechts p { line-height:20px; } #footer { margin:30px -5px -5px -5px; padding:15px; background:#f6f6f6; border-top:2px solid #eee; clear:left; } /* AB HIER: FORMATIERUNGEN, DIE HTML-TAGS ÜBERSCHREIBEN FÜR TEXT IM CONTENT */ /* Zum Zitieren bzw. hier nur für HTML Code verwendet */ code { background:#f6f6f6; } /*Tool Tipps*/ .tip { border-bottom:1px dotted #000000; cursor:help; } a.tip, a.tip:link, a.tip:visited, a.tip:active { color: #616161; text-decoration: none; position: relative; } a.tip:hover { background: transparent; z-index: 100; } a.tip span { display: none; text-decoration: none; } a.tip:hover span { display: block; position: absolute; top: 40px; left: 0; width: 400px; z-index: 100; color: #2f2f2f; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; padding: 2px 10px; background-color: #ebebeb; text-align: left; border-color: #00F; border-style: solid; border-width: 1px 4px; } [/CODE] Die dropdown.css sieht so aus: [CODE] @charset "utf-8"; /* CSS Document */ #navi, #navi ul { padding: 0; margin: 0; } #navi li { float: left; width: 9em; position: relative; list-style-type: none; } #navi li ul a { margin-left: 1em; } #navi li ul { left: -9999px; position: absolute; } #navi li:hover ul { left: auto; }   /* Optionale Formatierung */ #navi { font-family: Verdana; } /* Hauptmenüpunkte formatieren */ #navi li a, #navi li a:link, #navi li a:active, #navi li a:visited { display: block; padding: 5px 10px; color: #000; background-color: #ccc; text-decoration: none; } #navi li a:hover { color: #fff; background-color: #999; } /* untergeordnete Menüpunkte formatieren */ #navi li ul a, #navi li ul a:link, #navi li ul a:active, #navi li ul a:visited { display: block; margin-left: 1em; padding: 5px 10px; color: #000; background-color: #ddd; text-decoration: none; } #navi li ul a:hover { color: #fff; background-color: #000; } [/CODE] So sieht es im moment aus: Wenn ich die liste(navi) raus mache und irgendein text reinschreib sieht es so aus: Ich hoffe ihr könnt mir weiterhelfen [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?