span/div verschiebt Layout der nächsten Zeile

Status
Nicht offen für weitere Antworten.
T

Tim C.

Erfahrenes Mitglied
Hi,
Ich habe hier auf der Basis von gourauds Tutorial ein RRollOut Menü gebastelt, allerdings mit einer Unterkategorie mehr und insgesamt etwas Problematischer aufgeteilt, aber das war übehaupt nicht das Problem.
Das Problem besteht darin, dass wenn ich dem div bzw span Tag der Unterkategorie via CSS eine feste Breite gebe, damit ich sie mittelst margin-left einrücken kann - ohne feste Breite funktioniert das nicht - dann verschiebt sich der nächste Menüeintrag nach rechts, optisch gesehen an die rechte Kante des divs, obwohl der div regulär geschlossen ist.

Hier das Beispiel als Bild. Links regulär ohne Breite und Einrückung, rechts mit:
Wie man sieht, ist in der rechten Version 'Projektbereich C' ein wenig nach rechts eingerückt, so wie es sein soll, verschiebt aber den nächsten Hauptpunkt Veranstaltungen nach rechts.

Frage: Wie bekomme ich das weg ?
 

Anhänge

  • einrückproblem.gif
    einrückproblem.gif
    1,6 KB · Aufrufe: 757
Ich kann dein Problem nicht ganz nachvollziehen.
Hab mal so ein Menü nachgebaut, und bei mir treten die Probleme nicht auf: (das kann man übrigens mit beliebig vielen Unterkategorien benutzen)
PHP: 
<html>
<head>
<style type="text/css">
div {
  width: 150px;
}
</style>
<script type="text/javascript">
var mstat = new Array();

function menu( mid, mdepht) {
    if (mstat[mdepht] == undefined) {
        mstat[mdepht] = "";
    }
    if (mstat[mdepht] != "" && mstat[mdepht] != mid) {
        window.document.getElementById(mstat[mdepht]).style.display = "none";
    }
    if (mstat[mdepht] != mid) {
        window.document.getElementById(mid).style.display = "block";
        window.document.getElementById(mid).style.paddingLeft = mdepht * 10;
        mstat[mdepht] = mid;
    } else {
        window.document.getElementById(mid).style.display = "none";
        mstat[mdepht] = "";
    }
}
</script>
</head>
<body>

<a href="" onClick="menu('m1', 1);return false;">Menupunkt 1</a><br>
<div id="m1" style="display:none;">
    <a href="" onClick="menu('mu1', 2);return false;">Unterpunkt 1</a><br>
    <div id="mu1" style="display:none;">
        <a href="">bla 1</a><br>
        <a href="">bla 2</a>
    </div>
    <a href="sd">bla 3</a>
</div>
<a href="" onClick="menu('m2', 1);return false;">Menupunkt 2</a>
<div id="m2" style="display:none;">
    <a href="" onClick="menu('mu2', 2);return false;">Unterpunkt 2</a><br>
    <div id="mu2" style="display:none;">
        <a href="">bla 1</a><br>
        <a href="">bla 2</a><br>
    </div>
    <a href="sd">bla 3</a>
</div>

</body>
</html>
 
Ich poste morgen, wenn ich wieder auf der Arbeit bin, mal die entsprechenden Code Bereiche. Kann auch sein, dass ich unsauberes HTML fabriziert habe, obwohl ich eigentlich dachte, die Zeiten wären vorbei :rolleyes:
 
*hmpf*

Weiss der Geier wieso, aber wenn ich der Tabellenzelle, in der der span ist, auch noch eine feste Breite gebe passiert nichts ... aber ich seh schon, da sind noch nich alle Probleme aus der Welt. Ich muss bestimmt nochmal vorbei schauen.
 
Hallo habe es ausprobiert aber es funktioniert nich warum ?

Könnt ihr mir helfen ?


HTML: 
<style type="text/css"> 

div { 

width: 150px; 

} 

</style> 

<script type="text/javascript"> 

var mstat = new Array(); 

function menu( mid, mdepht) { 

if (mstat[mdepht] == undefined) { 

mstat[mdepht] = ""; 

} 

if (mstat[mdepht] != "" && mstat[mdepht] != mid) { 

window.document.getElementById(mstat[mdepht]).style.display = "none"; 

} 

if (mstat[mdepht] != mid) { 

window.document.getElementById(mid).style.display = "block"; 

window.document.getElementById(mid).style.paddingLeft = mdepht * 10; 

mstat[mdepht] = mid; 

} else { 

window.document.getElementById(mid).style.display = "none"; 

mstat[mdepht] = ""; 

} 

} 

</script> 

</head> 

<body> 

<a href="" onClick="menu('m1', 1);return false;"><a href="Einsatzabteilung.htm">

<img border="0" id="img72" src="Button/button154.jpg" height="22" width="120" alt="Einsatzabteilung" onmouseover="FP_swapImg(1,0,/*id*/'img72',/*url*/'Button/button139.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img72',/*url*/'Button/button154.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img72',/*url*/'Button/button140.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img72',/*url*/'Button/button139.jpg')" fp-style="fp-btn: Metal Capsule 1; fp-bgcolor: #0000FF; fp-proportional: 0; fp-orig: 0" fp-title="Einsatzabteilung"></a></p>

<p style="margin-top: 2px; margin-bottom: 2px">

</a><br> 

<div id="m1" style="display:none;"> 

<a href="" onClick="menu('mu1', 2);return false;">Unterpunkt 1</a><br> 

<div id="mu1" style="display:none;"> 

<a href="">bla 1</a><br> 

<a href="">bla 2</a> 

</div> 

<a href="sd">bla 3</a> 

</div> 

<a href="" onClick="menu('m2', 1);return false;">Menupunkt 2</a> 

<div id="m2" style="display:none;"> 

<a href="" onClick="menu('mu2', 2);return false;">Unterpunkt 2</a><br> 

<div id="mu2" style="display:none;"> 

<a href="">bla 1</a><br> 

<a href="">bla 2</a><br> 

</div> 

<a href="sd">bla 3</a> 

</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück