+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: Dropdown-Menue - Text wird nach unten verschoben (/showthread.php?tid=30353)
Dropdown-Menue - Text wird nach unten verschoben - Doris - 18.04.2010
Hallo ihr Spezialisten
,ich kämpfe schon seit einer Woche mit einem aufklappbaren Menue. Es sieht nun auch so aus, wie ich das gerne hätte.
Leider wird jetzt, wenn das Menue aufklappt, der Inhaltstext der Seite nach unten verschoben. Da hab ich doch irgendwo einen Fehler in meiner CSS-Datei und finde ihn nicht :stinkig::stinkig:
Wär lieb, wenn mal jemand drübergucken könnte
Code:
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: #666666;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #666666;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #ffcd37;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 94px;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #ffcd37;
border-width: 1px 0;
}
li#first {
border-left-width: 1.6em;
}
li#last {
border-right-width: 1.6em;
}
li ul {
display: none;
position: relative;
font-weight: normal;
background: #white;
padding: 0.5em 0 1em 0;
border-right: solid 1px #ffcd37;
border-left: solid 1px #ffcd37;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}Das Javascript dazu:
Zitat:startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Liebe Grüße
Doris
Dropdown-Menue - Text wird nach unten verschoben - Unkraut - 18.04.2010
Ob das der Grund ist?
li ul {
display: none;
position: relative;
font-weight: normal;
background: #white;
padding: 0.5em 0 1em 0;
border-right: solid 1px #ffcd37;
border-left: solid 1px #ffcd37;
Freundliche Grüße vom Unkraut
Dropdown-Menue - Text wird nach unten verschoben - Doris - 18.04.2010
Danke, dass Du Dir das angeschaut hast.
Leider besteht das Problem nach wie vor.
LG Doris
Dropdown-Menue - Text wird nach unten verschoben - Helmut - 18.04.2010
...
hier mal reinschauen, Menüs u.a. ohne Ende http://www.cssplay.co.uk/menus/
Cu Helmut
Dropdown-Menue - Text wird nach unten verschoben - Doris - 19.04.2010
Danke Helmut, auf der Seite war ich schon. Wollte eigentlich selbst was erstellen
. Hatte gehofft, dass der Fehler für Euch gleich sichtbar ist. Dann such ich mir eben doch was "Fertiges".Lieben Dank an alle!
Doris
Dropdown-Menue - Text wird nach unten verschoben - Unkraut - 19.04.2010
Hall Doris,
ich finde, html und css gehören zusammen. Nur aus css kann ich wenig ersehen. (Weiß nicht, wie es den anderen geht.) Spendiere uns doch einfach das html dazu.
Freundliche Grüße vom Unkraut
Dropdown-Menue - Text wird nach unten verschoben - Doris - 19.04.2010
Ich spendiere :lol::lol::lol:
Zitat:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta name="author" content="Besitzer">
<link rel="stylesheet" type="text/css" href="cssmenue.css" />
<script type="text/javascript" src="jsmenue.js"></script>
</head>
<body>
<div id="content">
<ul id="nav">
<li id="first">
<div><a href="">Portal</a></div>
</li>
<li>
<div><a href="">Unternehmen</a></div>
<ul>
<li><a href="">Leitgedanken</a></li>
<li><a href="">Standorte</a></li>
<li><a href="">Unser Team</a></li>
<li><a href="">Verbundene Unternehmen</a></li>
</ul>
</li>
<li>
<div><a href="">Produkte</a></div>
<ul>
<li><a href="">Produkt-programm</a></li>
<li><a href="">Versorgung Gas/Wasser</a></li>
<li><a href="">Entsorgung</a></li>
<li><a href="">Industrie</a></li>
<li><a href="">regenerative Energien</a></li>
</ul>
</li>
<li>
<div><a href="">Private Label</a></div>
</li>
<li>
<div><a href="">Partner</a></div>
<ul>
<li><a href="">Lieferanten</a></li>
<li><a href="">Kunden</a></li>
</ul>
</li>
<li>
<div><a href="">Katalog</a></div>
</li>
<li>
<div><a href="">Service</a></div>
<ul>
<li><a href="">......</a></li>
<li><a href="">......</a></li>
</ul>
</li>
<li>
<div><a href="">Archiv</a></div>
</li>
<li>
<div><a href="">Kontakt</a></div>
</li>
<li id="last">
<div><a href="">Impressum</a></div>
</li>
</ul>
</div>
<div id="content">
test test test test test
</div>
</body>
</html>
Dropdown-Menue - Text wird nach unten verschoben - Unkraut - 20.04.2010
Hallo Doris,
uihi, uihi, uihi!. Deinem Menu fehlt die Stringenz, es geht ziemlich wild durcheinander.
Eine Seite darf nicht 2 x <div id="content"> enthalten.
Zwischen <li></li> darf kein div stehen (es sei denn, in CSS3 funktioniert es jetzt??)
So ein paar <ul> </ul> sind vergessen, u.s. w. u.s. w.
Unser Prm hat ein sehr schönes Beispiel geschrieben, dass eigentlich nur im Aussehen Deinem Geschmack angepasst werden muss.
http://www.ohne-css.gehts-gar.net/0066.php
Oder eben doch Helmuts Link folgen.
Freundliche Grüße vom Unkraut
Dropdown-Menue - Text wird nach unten verschoben - Doris - 20.04.2010
Ich sag nie wieder was gegen Unkraut ;-)
Danke, dass Du Dir die Mühe gemacht hast und danke für den Link. Du wirst lachen, aber genau die Seite hab ich heute mittag auch gefunden und bin schon am Anpassen :lol:
LG Doris