[HTML] Menüausrichtung

Dubhead

Cadet 2nd Year
Dabei seit
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 von einem Moderator bearbeitet:

PuppetMaster

Admiral
Dabei seit
Sep. 2001
Beiträge
8.220
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:

sverebom

Vice Admiral
Dabei seit
Aug. 2004
Beiträge
6.200
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?
 

Dubhead

Cadet 2nd Year
Ersteller dieses Themas
Dabei seit
Okt. 2004
Beiträge
28
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
 

PuppetMaster

Admiral
Dabei seit
Sep. 2001
Beiträge
8.220
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:

PuppetMaster

Admiral
Dabei seit
Sep. 2001
Beiträge
8.220
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:
Top