Falsche Positionierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
ausprobieren
bild
cursor
dank
datei
display
einstellung
fehler
hilfe
http
image
intern extern kalender
position
problem
quellcode
stunden
tip
url
vorstellen
-
Hallo. Ich habe ein Dropdownmenu gemacht. Soweit passt alles. Doch leider wird der Button UNTERHALB des Div Navi angezeigt.
Hier mein HTML Quellcode:
<div id=\"navi\">
<dl class=\"dropdown\">
<dt id=\"one-ddheader\" onmouseover=\"ddMenu(\'one\',1)\" onmouseout=\"ddMenu(\'one\',-1)\">Datei</dt>
<dd id=\"one-ddcontent\" onmouseover=\"cancelHide(\'one\')\" onmouseout=\"ddMenu(\'one\',-1)\">
<li><a href=\"#\">Speichern</a></li>
<li><a href=\"#\">Suchen</a></li>
</dd>
</dl>
<dl class=\"dropdown\">
<dt id=\"two-ddheader\" onmouseover=\"ddMenu(\'two\',1)\" onmouseout=\"ddMenu(\'two\',-1)\">Gehe zu </dt>
<dd id=\"two-ddcontent\" onmouseover=\"cancelHide(\'two\')\" onmouseout=\"ddMenu(\'two\',-1)\">
<li><a href=\"#\" class=\"underline\">Archiv</a></li>
<li><a href=\"#\" class=\"underline\">Intern</a></li>
<li><a href=\"#\" class=\"underline\">Extern</a></li>
<li><a href=\"#\" class=\"underline\">Kalender</a></li>
<li><a href=\"#\" class=\"underline\">Mitarbeiter</a></li>
</dd>
</dl>
<dl class=\"dropdown\">
<dt id=\"three-ddheader\" onmouseover=\"ddMenu(\'three\',1)\" onmouseout=\"ddMenu(\'three\',-1)\">Hilfe </dt>
<dd id=\"three-ddcontent\" onmouseover=\"cancelHide(\'three\')\" onmouseout=\"ddMenu(\'three\',-1)\">
<li><a href=\"#\" class=\"underline\">Einstellungen</a></li>
<li><a href=\"#\" class=\"underline\">Updates</a></li>
<li><a href=\"#\" class=\"underline\">Impressum</a></li>
</dd>
</dl>
</div>
Hier mein CSS File:
#navi
{
height:24px;
width:1200px;
background-image: url(images/menubg.jpg);
}
.dropdown {float:left; }
.dropdown dt { font-weight:bold; cursor:pointer; background:url(images/menubg.jpg); height:24px; width:90px;}
.dropdown dt:hover {background:url(images/menubg2.jpg)}
.dropdown dd {position:absolute; overflow:hidden; display:none; background:url(images/menubg.jpg); opacity:0; height:24px;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; color:#333; text-decoration:none; height:24px; background:url(../images/menubg.jpg); }
.dropdown a:hover {background:url(images/menubg2.jpg);}
(es sieht ungefähr so aus:)
........................................................
Datei Gehe zu Hilfe.....................................
Ich hatte diesen Fehler so ähnlich bereits schoneinmal. Es wird auch über dem Div noch ein abstand von ca. 10 px angezeigt. Sieht echt dumm aus. Ich hoffe jemand hat einen Tipp für mich. Danke. Ich hab doch nirgendwo diese höhe... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Könntest du bitte mal den Link posten, ich kann mir das Problem nicht so ganz vorstellen. Das könnte auch helfen das Problem zu lösen, dann kann man bisschen mit Firebug ausprobieren.
LG -
ich glaub er meint eher den link zu der eigentlichen Seite, weil er sich das ganze mit Firebug anschauen und ein bisschen rumprobieren will, und das ist mit einem Bild schwer^^
-
mhm, dann muss ich das noch nachholen (hatte es natürlich nicht online...)
Edit: so, hier der Link
http://raubritta.lima-city.de/Admin/templates/admin.php
Beitrag geändert: 29.7.2008 23:16:34 von raubritta -
Also, ich damit müsste es gehn:
Setze mal bei der Klasse .dropdown {margin: 0px;}
Damit sollte es funktionieren. Grundlegend würde ich versuche, mal am Anfang der CSS Datei mit * {margin: 0px; padding: 0px;} zu arbeiten. Somit bekommt jedes Element diese Zuweisung. Wenn du das gemacht hast, sollte sich auch das Hoverzeug direkt untendrunter öffnen und nicht nach rechts verschoben.
LG
Edit: Ja am einfachsten ist es, wenn du am Anfang mal * {margin: 0px;} machst. Somit löst du sehr viele Probleme. Und weil ich gerade etwas Zeit hatte, empfehle ich bei #navi statt der genauen Pixelangabe \"width: 100\" hinzuschreiben. Wenn mir noch was auffällt gibts noch en Edit;)
Beitrag geändert: 30.7.2008 0:24:57 von werktags -
enn du am Anfang mal * {margin: 0px;}
Danke das war es. Ich habe die ganze zeit nur mit margin-top: 0px; rumprobiert. Keine Ahnung, warum das nicht funktioniert hat.
Vielen Dank. Problem gelöst -
Das nervige ist ja, dass IE und Firefox wenn man margin nicht festlegt, beide das etwas anders auslegen. Dadurch kommts andauern dazu, dass es im einem Browser geht und im anderen nicht. Dann sitzt man mehrere Stunden davor und muss den Fehler suchen und findet ihn natürlich nicht.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
