nicht angemeldet
Fragen/Probleme mit DropDown-Menü (CSS/JS)
Nabend Leute,
ich wollte anhand dieser [url=http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm]Seite[/url] mir selber beibringen wie man ein DropDown Menü erstellt, allerdings habe ich noch gewisse Schwierigkeiten.
Meine Vorkentnisse beziehen sich auf die HTML-Grundkentnisse.
Nun habe ich mir den Quelltext der Seite angeschaut und kopiert um dran rum zu spielen.
Hier mal mein bisheriger Code :
---------------------------------------------------------------------
[quote]
<html>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: bg.gif;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 9;
left: 300;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 437px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 3px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>
<body background="bg.gif">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">General</dt>
<dd id="smenu1">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Projekte</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Bla</a></li>
<li><a href="#">Blub</a></li>
<li><a href="#">Bla</a></li>
<li><a href="#">Blub</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="site">
<h1>Willkommen auf meiner Seite !!!</h1>
<p>Hier steht dann der normale Text.</p>
<p>Raphael GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://tutorials.alsacreations.com/deroulant">Explanations</a></p>
</div>
</body>
</html>
[/quote]
---------------------------------------------------------------------
Der Teil der Seite wo sich der Kasten mit dem Text "Willkommen auf meiner Seite !!!" befindet, ist dynamisch, passt sich also der Textlänge an.
Wo und wie kann ich es abändern, damit er sich eben nicht der Textlänge anpasst sondern eine vordefinierte Größe hat ?
Wo und wie kann ich den Platz zwischen den Menübuttons einstellen ?
Wo und wie kann ich die größe der Buttons in der Navigationsleiste verändern ?
Das sind eigentlich meine Hauptprobleme, der Rest wie Farben, Fonts, etc. sind ja selbsterklärend.
mfg Razer
-
Hi Razer,
Wo und wie kann ich es abändern, damit er sich eben nicht der Textlänge anpasst sondern eine vordefinierte Größe hat ?
Den <li> oder den <a> eine feste Breite in em oder px geben
Wo und wie kann ich den Platz zwischen den Menübuttons einstellen ?
Mit margin Angaben für die <li>
Wo und wie kann ich die größe der Buttons in der Navigationsleiste verändern ?
Was denn für Buttons? Meinst du die Links?
Problem an deinem Menü ist, dass User ohne Javascript die Links niemals werden sehen können. Das sollte man bei JS Menüs immer vermeiden oder gleich eine Lösung ganz ohne JS nehmen. Guck z.B. hier: http://barrierefrei.e-workers.de/workshops/tricks/menues.php
Gruß
Antipitch-
Lieber Antipitch,
Guck z.B. hier: http://barrierefrei.e-workers.de/workshops/tricks/menues.php
noch besser (weil semantischerer Code) ist <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=das SELFHTML-Kapitel zu CSS-basierten Navigationsleisten>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
du hast Recht (wobei ich sagen muss, dass mir die ganzen hacks in dem Code nicht gefallen. Ich könnte mir vorstellen, dass der ein oder andere Anfänger sich damit ganz schön schwer tut).
Gruß
AntipitchPS: Sag mal in Ellwangen, was ist man da, Schwabe? Franke? Was anderes?
-
Liebe(r) Antipitch,
PS: Sag mal in Ellwangen, was ist man da, Schwabe? Franke? Was anderes?
da ist man (Wahl-)Schwabe. Das Gebiet nennt sich Ost-Alb. Oder auch mundartlich "schwäbisch Sibirien".
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-