nicht angemeldet
Layoutproblem mit ausklappbaren JS-Menü
0 
Gunnar Bittersmann
0
0
Layoutproblem mit ausklappbaren JS-Menü
Hallo,
ich hab ein kleines Problem mit dem Layout einer Webseite. Das Layout ist zwar schon fast fertig, allerdings hat es noch einen kleinen Schönheitsfehler, den ich nicht beseitigt bekomme. Der Fehler tritt bei einem ausklappbaren JS-Menü insofern auf, dass es sich nicht auf die volle Seitenbreite ausdehnt. Ich hab versucht, dass mit den CSS position Attribut zu lösen, was in Verbindung mit den anderen Elementen nicht geklappt hat, da sich diese dann immer verschoben haben.
Könnte sich das mal jemand angucken und mir sagen, wie ich das lösen könnte?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css"><!--
body {
margin: 20px;
}
div.site {
width: 1024px;
border: 1px solid;
background: aqua;
margin-left: auto;
margin-right: auto;
}
div.leftMenu {
border: 1px solid;
width: 100px;
height: 300px;
position: absolute;
}
div.top {
border: 1px solid;
height: 100px;
margin-bottom: 20px;
}
div.content {
border: 1px solid;
background-color: green;
margin-left: 120px;
}
div.foot {
border: 1px solid;
background-color: gray;
margin-top: 30px;
}
div.middle {
position: relative;
width: 100%;
}
div.topMenu {
z-index: 3;
position: absolute;
background-color: red;
}
div.topMenu li {
width: 140px;
float: left;
}
div.topMenu a:hover {
background-color: gray;
}
div.topMenu a {
border: 1px solid #888;
background-color: graytext;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #000;
}
ul#smenu1, ul#smenu2 {
display: none;
width: 140px;
float: left;
}
ul#smenu1 a, ul#smenu2 a {
padding-top: 2px;
border-top: 0px;
}
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
-->
</style>
<script type="text/javascript"><!--
function displayList(id) {
with (document) {
if (getElementById) {
getElementById(id).style.display = "block";
} else if (all) {
all[id].style.display = "block";
} else {
layers[id].display = "block";
}
}
}
function hideList(id) {
with (document) {
if (getElementById) {
getElementById(id).style.display = "none";
} else if (all) {
all[id].style.display = "none";
} else {
layers[id].display = "none";
}
}
}//-->
</script>
</head>
<body>
<div class="site">
<div class="top">
<h1>MySite</h1>
<div class="topMenu">
<ul>
<li><a href="#" onmouseover="displayList('smenu1')" onmouseout="hideList('smenu1')">Home</a>
<ul id="smenu1" onmouseover="displayList('smenu1')" onmouseout="hideList('smenu1')">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#" onmouseover="displayList('smenu2')" onmouseout="hideList('smenu2')">Something</a>
<ul id="smenu2" onmouseover="displayList('smenu2')" onmouseout="hideList('smenu2')">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="middle">
<div class="leftMenu">
<ul class="navigation">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div class="content">
<h2>Text Text Text Text Text</h2>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<br /><br /><br /><br /><br /><br /><br /><br />
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<br /><br /><br /><br /><br /><br /><br /><br />
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
<div class="foot">Text Text Text Text Text Text</div>
</div>
</body>
</html>
-
@@Tartos:
nuqneH
Das Layout ist zwar schon fast fertig, allerdings hat es noch einen kleinen Schönheitsfehler, den ich nicht beseitigt bekomme.
Nein, es hat noch einen großen Fehler, der nichts mit Schönheit zu tun hat: Ohne JavaScript klappt gar nichts aus; deine Site ist unbenutzbar. Sorge dafür, dass sie auch ohne JavaScript voll funktionstüchtig ist!
Es gibt etliche Besucher deiner Seiten, bei denen kein JavaScript ausgeführt wird. Die Alt-Trinker unter ihnen willst du sicher nicht vergraulen, oder?
Vielleicht möchtest du auf JavaScript an der Stelle verzichten und <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=dynamische CSS-Navigation für moderne Browser> einsetzen? Oder ein Stu Nicholls’ CSS-only-Menu verwenden?
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Hi,
Nein, es hat noch einen großen Fehler, der nichts mit Schönheit zu tun hat: Ohne JavaScript klappt gar nichts aus; deine Site ist unbenutzbar.
Wieso? Einfach auch die Styles ausschalten, dann kann man das Menü wunderbar benutzen. Hartnäckigen Javascript-Verweigerer ist die Optik vermutlich eh wurscht.
Gruesse, Joachim
--
Am Ende wird alles gut.-
@@Joachim:
nuqneH
Wieso? Einfach auch die Styles ausschalten, dann kann man das Menü wunderbar benutzen. Hartnäckigen Javascript-Verweigerer ist die Optik vermutlich eh wurscht.
Die Optik ist ihnen schon Wurst, aber Styles schalten sie dennoch nicht aus. Was für proseccoschlüfende Jünglinge mit 'display: none' versteckt ist, beachten auch Alt-Trinker nicht.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Hallo Gunnar!
Was für proseccoschlüfende Jünglinge mit 'display: none' versteckt ist, beachten auch Alt-Trinker nicht.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
Diblom [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?-
Hi,
ein interessanter Versuch mit einem interessanten Ergebniss.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
-
Abend,
@Joachim
dein Vorschlag mit der relativen Positionierung des top-Divs und der maximalen Ausdehnung des Menüs hat bestens funktioniert. Danke dir!Das mit den dynamischen CSS-Menüs schau ich mir mal noch an. Allerdings wollte ich sowieso noch mehr JS- und vor allem Ajax-Funktionen auf der Website nutzen, weshalb die Lösung mit CSS mir nicht unbedingt weiterhilft.
@Gunnar Bittersmann
Dein Einwand kein JS nutzen zu sollen mag berechtigt sein, ich denke aber, dass ein Großteil der Internetnutzer JS auf ihrem Browser sowieso aktiviert haben bzw. wenn nicht, dass sie dann wissen wie sie es aktivieren können. Außerdem ziele ich mit der Website sowieso ein Computeraffineres Publikum an, weshalb es mir eigentlich egal ist wenn alle anderen nicht auf die Site kommen...-
Hi,
Dein Einwand kein JS nutzen zu sollen mag berechtigt sein, ich denke aber, [...]
Du denkst Unsinn.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Du denkst Unsinn.
Laut WebHits haben nahezu 100% der User dort JS aktiviert. Außerdem verwenden noch viele den IE6 - das CSS-Ausklappmenü würde also nicht in Frage kommen.
Statistiken sind zwar nicht die Welt, allerdings ist die schon mehr als deutlich.
-
Hi,
Laut WebHits haben nahezu 100% der User dort JS aktiviert. Außerdem verwenden noch viele den IE6 - das CSS-Ausklappmenü würde also nicht in Frage kommen.
Auf die einen, die dein Menü nicht nutzen können, Rücksicht nehmen zu wollen, auf die anderen aber nicht - das ist unlogisch.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
-
-
Hi,
Du denkst Unsinn.
Du postest Datenmüll. Ein wenig gehaltvoller dürfen Deine Gegenargumente schon sein.
In einer Zeit, in der u.a. Google sich anschickt, einen javascriptoptimierten Browser zur zentralen Schnittstelle für jede Art von Webapplikation zu machen erscheint mir Deine Einstellung irgendwie nicht ganz zeitgemäss.Gruesse, Joachim
--
Am Ende wird alles gut.
-
-
-
-
-
Hi,
Der Fehler tritt bei einem ausklappbaren JS-Menü insofern auf, dass es sich nicht auf die volle Seitenbreite ausdehnt.
vielleicht hilft dieses:
hier das:
div.top {
border: 1px solid;
height: 100px;
margin-bottom: 20px;
position: relative;
}hier das:
div.topMenu {
z-index: 3;
position: absolute;
background-color: red;
width: 100%;
height: 28px;
overflow: visible;
}und in der Tat lassen sich solche Menüs rein mit Css bauen - allerdings nicht für ie6.
Gruesse, Joachim
--
Am Ende wird alles gut.
