Supportnet / Forum / Webseiten/HTML
menü im link waagerecht machen!!
Frage
hi
ich hab ne problem: ich hab das menü im link in eine .txt-datei kopiert, meine links in s menü eingebaut, die in eine .html-datei gemacht und festgestellt, dass das menü senkrecht auf der webseite ist (so wie hier die Anordnung der verschiedenen kategorienen). Ich möchte das menü aber nich senkrecht sonder in einer linie waagrecht haben.
[url]http://www.css4you.de/trickkiste/tr00025.html[/url]
Was muss ich ändern, damit das eintritt. Bitte als im html-code angeben (nach möglichkeit die ziele vor und nach dem geänderten eintrag miteingeben)
Vielen Dank für die Hilfe
Antwort 1 von rfb
display:blockAntwort 2 von ipod_updater
bei mir haut das nich hin - das menü is immernoch im block. probiers doch auch mal aus mit reinkopieren. was soll ich machen??
Antwort 3 von rfb
was ncoh stört ist
width:160pxAntwort 4 von 007
Hi, vielleicht gefällt dir dieses Menü besser. Kannst es ja deinen Geschmack entsprechend noch anpassen.
<!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN>
<html>
<head>
<META HTTP-EQUIV=Expires CONTENT=Tue, 01 Jan 1980 1:00:00 GMT>
<META HTTP-EQUIV=Pragma CONTENT=no-cache>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<title>Foldoutmenue Horizontal powered by javarea.de</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}
div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
div.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
-->
</style></head>
<body>
<div class="menu">
<ul><li><a onmouseover="montre(´smenu1´);" onmouseout="cache(´smenu1´);" href="">Menu 1</a> <ul style="display: none;" id="smenu1" onmouseover="montre(´smenu1´);" onmouseout="cache(´smenu1´);">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu2´);" onmouseout="cache(´smenu2´);" href="">Menu 2</a><ul id="smenu2" onmouseover="montre(´smenu2´);" onmouseout="cache(´smenu2´);">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu3´);" onmouseout="cache(´smenu3´);" href="">Menu 3</a><ul id="smenu3" onmouseover="montre(´smenu3´);" onmouseout="cache(´smenu3´);">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu4´);" onmouseout="cache(´smenu4´);" href="">Menu 4</a><ul id="smenu4" onmouseover="montre(´smenu4´);" onmouseout="cache(´smenu4´);">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul></li>
</ul>
</div>
</body></html>
</body>
</html>
<!DOCTYPE HTML PUBLIC -//IETF//DTD HTML//EN>
<html>
<head>
<META HTTP-EQUIV=Expires CONTENT=Tue, 01 Jan 1980 1:00:00 GMT>
<META HTTP-EQUIV=Pragma CONTENT=no-cache>
<meta http-equiv=Content-Type content=text/html; charset=windows-1252>
<title>Foldoutmenue Horizontal powered by javarea.de</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}
div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
div.menu a:hover {
background: #ccc;
border: 1px solid gray;
}
#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
-->
</style></head>
<body>
<div class="menu">
<ul><li><a onmouseover="montre(´smenu1´);" onmouseout="cache(´smenu1´);" href="">Menu 1</a> <ul style="display: none;" id="smenu1" onmouseover="montre(´smenu1´);" onmouseout="cache(´smenu1´);">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu2´);" onmouseout="cache(´smenu2´);" href="">Menu 2</a><ul id="smenu2" onmouseover="montre(´smenu2´);" onmouseout="cache(´smenu2´);">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu3´);" onmouseout="cache(´smenu3´);" href="">Menu 3</a><ul id="smenu3" onmouseover="montre(´smenu3´);" onmouseout="cache(´smenu3´);">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul></li>
<li><a onmouseover="montre(´smenu4´);" onmouseout="cache(´smenu4´);" href="">Menu 4</a><ul id="smenu4" onmouseover="montre(´smenu4´);" onmouseout="cache(´smenu4´);">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul></li>
</ul>
</div>
</body></html>
</body>
</html>
Antwort 5 von rfb
@007:
der Quelltext enthält 2 doctypes, 2 head-Bereiche und schließt 2mal body und html.
Das ist doch wohl ein bisschen viel? Jedenfalls ist es nicht valide!
der Quelltext enthält 2 doctypes, 2 head-Bereiche und schließt 2mal body und html.
Das ist doch wohl ein bisschen viel? Jedenfalls ist es nicht valide!
Antwort 6 von 007
@rfb
Für den Inhalt bin ich nicht zuständig. Ich habe den Code nur kopiert.
Für den Inhalt bin ich nicht zuständig. Ich habe den Code nur kopiert.
Antwort 7 von rfb
Zitat:
Ich habe den Code nur kopiert.
dann fehlt die Quellenangabe, denn auch sowas unterliegt dem Urheberrecht.Ich habe den Code nur kopiert.