[HTML] Menüausrichtung

Dubhead

Cadet 2nd Year
Registriert
Okt. 2004
Beiträge
28
HTML:
<div id="h1" style="left:50; top:50; width:100; height:25;z-index:2; visibility: visible">
<a href="#" onmouseover="menu(1)">Menu 1</a>
</div>

<div id="m1" style="left:50; top:75; width:100; height:100; z-index:3; visibility: hidden" >
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h2" style="left:150; top:50; width:100; height:25; z-index:4; visibility: visible">
<a href="#" onmouseover="menu(2)">Menu 2</a></div>

<div id="m2" style="left:150; top:75; width:100; height:100; z-index:5; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h3" style="left:250; top:50; width:100; height:25; z-index:6">
<a href="#" onmouseover="menu(3)">Menu 3</a>
</div>

<div id="m3" style="left:250; top:75; width:100; height:100; z-index:7; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>


wie funzt das, dass die menüs nebeneinander sind? schnall das ganze net...

www.dancecore.de/media/xl/site.php


Greetz
Dubi
 
Zuletzt bearbeitet von einem Moderator:
Re: Menüausrichtung

Probiers mal jeweils mit

position:absolute;

in der Style-Angabe.


/edit
Hab grad mal rumprobiert; hier würde

position:relative;

wohl besser passen. Musst dann aber noch die Werte für top und left anpassen.
 
Zuletzt bearbeitet:
Re: Menüausrichtung

Kann man nicht einfach float: left nehmen? (ok, wenn man das Browserfenster sehr klein macht wirds übel)

P.S.@Dubhead
Warum benutzt du überhaupt CSS, wenn du die Anweisung doch wieder wie normale HTML-Befehle behandelst? Hast du das nur gemacht, um dein problem besser darzustellen?
 
ne, sorry..das relative geht irgendwie nicht...willd dass die dann nebeneinander sind...allerdings sind die menüs weiterhin untereinander...
könnte das jemand von euch evtl. umcoden und dann hier posten?

@BurningStar4:
für die site.php werde ich eine css verwenden, um dann die farben schnell abändern zu können!
ich include die headnavi.html einfach in die site.php
 
Probiers hiermit

HTML:
<div id="h1" style="float:left; margin-left:50px; margin-top:25px; width:100px;">
  <a href="#" onmouseover="menu(1)">Menu 1</a>
  <div id="m1" style="margin-top:10px; visibility:hidden">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
  </div>
</div>

<div id="h2" style="float:left; margin-left:50px; margin-top:25px; width:100px;">
  <a href="#" onmouseover="menu(2)">Menu 2</a>
  <div id="m2" style="margin-top:10px; visibility:hidden">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
  </div>
</div>

<div id="h3" style="float:left; margin-left:50px; margin-top:25px; width:100px;">
  <a href="#" onmouseover="menu(3)">Menu 3</a>
  <div id="m3" style="margin-top:10px; visibility:hidden">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
    </div>
</div>

Allerdings solltest du wirklich mal deinen Quelltext entrümpeln. Warum schreibst du alle paar Zeilen ein <html> und <body>-Tag dazwischen? Dann könntest du, wie BurningStar4 schrieb, alle Formatanweisungen effektiv in ein Stylesheet auslagern. So sind jetzt die Formatierungen für alle drei Navigationspunkte identisch, du musst sie im Bedarfsfall hier aber dreimal abändern.
 
Zuletzt bearbeitet:
Hier nochmal aufgeteilt:

HTML:
<style type="text/css">
.haupt {
  float:left;
  margin-left:50px;
  margin-top:25px;
  width:100px;
}
.menu {
  margin-top:10px;
  visibility:hidden;
}
</style>
und
HTML:
<div class="haupt">
  <a href="#" onmouseover="menu(1)">Menu 1</a>
  <div class="menu">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
  </div>
</div>

<div class="haupt">
  <a href="#" onmouseover="menu(2)">Menu 2</a>
  <div class="menu">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
  </div>
</div>

<div class="haupt">
  <a href="#" onmouseover="menu(3)">Menu 3</a>
  <div class="menu">
    <a href="#">Punkt 1</a><br />
    <a href="#">Punkt 2</a><br />
    <a href="#">Punkt 3</a><br />
    <a href="#">Punkt 4</a>
  </div>
</div>
 
Zuletzt bearbeitet:
Zurück
Oben