nicht angemeldet
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