Menü soll auf gleicher Höhe sein wie Inhalt
0 
molily
Menü soll auf gleicher Höhe sein wie Inhalt
Tja, der Name sagt es schon. Ich möchte gerne, dass das Menü auf der gleichen Höhe wie der Inhalt ist. Also nicht so wie hier: TEST
Der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TITLE</title>
<style type="text/css">
/* Vertikale Navigation */
div#Tmenu {
font-size: 94%;
width: 10em;
padding: 0.8em;
border: 1px solid white;
background-color: #00003d;
}
* html div#Tmenu {
width: 11.3em;
w\idth: 10em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li {
margin-right:1.5em; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-bottom:0;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 0; left: 9.3em;
}
*:first-child+html ul#Navigation li ul {
left: 9em; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin: 0; padding-left: 1.4em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 7em;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
padding: 0.2em 1em;
border: 1px solid #900;
border-left-color: #c96; border-top-color: #c96;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9em;
w\idth: 7em; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
border-color: #c96;
border-left-color: #900; border-top-color: #900;
background-color: #e00;
}
li a#aktuell {
border-right-color: #300; border-bottom-color: #300;
background-color: #900;
}
ul#Navigation li ul span {
border-color: #900; border-left-color: #c96;
color: #900; background-color: white;
}
ul#Navigation li a:active {
color: black; background-color: #f00;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 8.2em;
background: #e00 url(pfeil.gif) no-repeat center right;
}
/* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
* html ul#Navigation li.hoverIE {
margin-right:0; /* reservierten Platz freigeben */
margin-bottom:-1.15em; /* Fehlerkorrektur, ggfls. anpassen */
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li .hoverIE {
width: 10.3em;
w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
</style>
<!--[if IE]>
<script type="text/javascript">
// <![CDATA[
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
// ]]>
</script>
<![endif]-->
</head>
<body bgcolor="#00003d" text="#ff8c00" link="red" alink="green" vlink="green">
<div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Seite 1</a>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 1b</a></li>
<li><a href="#Beispiel">Seite 1c</a></li>
<li><a href="#Beispiel">Seite 1d</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a>
<ul>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
</div><font face="Verdana,Tahoma,Impact"><div style="text-align:center;">Besucherzähler:<img src="http://www.besucherzaehler.org/counter.html?id=27381&c=10" alt="Besucherzähler" border="0">
<br><br><img src="hannesauge.bmp">
<br><br><font size="2">Homepage-Design © 2008 by Vincent Rolfs, Kl. 7e.</div>
</body>
</html>
Ich gebe zu, dass ich ihn kopiert habe (Das war aber legal!), ich habe nämlich keine Ahnung von Javascript.
-
Hallo!
Ich verstehe noch nicht, was du vorhast, und dein Code hilft wenig dabei zu verstehen, was dein Ziel ist, denn Ansätze von dem, was du anscheinend vorhast, sehe ich darin nicht.
Meinst du, dass du das Menü links vom Inhalt positionieren willst, sodass du quasi zwei Spalten hast, die beide oben beginnen? Dann setze dich doch mal mit <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=mehrspaltigen CSS-Layouts> auseinander. Siehe auch CSS-Spaltenlayout. Die entscheidende CSS-Eigenschaft dafür ist http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float.
Mathias
-
Hallo Matthias,
ich meinte es so, dass das Menu und der restliche Inhalt beide auf der gleichen Höhe, d.h. nebeneinander, sind. Aktuell ist es ja so, das das Menü ganz Links ist, dann zwei Leerzeilen folgen und dann der Inhalt kommt.
Danke im voraus
Thor
-