✔ CSS-Positionierung

Status
Nicht offen für weitere Antworten.
psx hat gesagt.:
leider verschiebt sich der Inhalt der Seite nach unten, wenn das Menü mit position:relative gemacht wird (nur beim öffnen des menüs)....
Zum Vergrößern anklicken....
Das liegt nicht an der relativen Positionierung, sondern an der CSS-Eigenschaft display: none bzw. display: block, die mit dem Script und den Event-Handler onmouseover / onmouseout für das Submenü #dropdown getauscht werden.

Grundsätzlich gilt: die CSS-Eigenschaft display regelt die Anzeigeart von Elementen.

Mit der Angabe none wird das Element (= Submenü) nicht angezeigt und kein Platzhalter reserviert, womit der nachfolgende Inhalt 'nach oben rutscht', mit der Angabe block wird das Element angezeigt und eine neue Zeile im Textfluss erzeugt, womit sich der nachfolgende Inhalt 'nach unten verschiebt'.

Siehe auch: selfHTML / CSS / Positionierung und Anzeige von Elementen / display

Wenn du dies vermeiden willst, solltest du mein zweites Demo verwenden, in dem das Script die CSS-Eigenschaft visibility (= Anzeige von Elementen) steuert, und der nachfolgende Inhalt nicht nach unten / oben verschoben wird.

Siehe auch: selfHTML / CSS / Positionierung und Anzeige von Elementen / visibility
 
Es liegt schon an der relativen Postitionierung, mit der absoluten ist das nämlich nicht passiert. ICh werds jetzt aber mal mit visibility versuchen...
 
Wie ich dir schon in meiner vorvorletzten Antwort geschrieben habe, funktioniert die absolute Positionierung der DIVs in einer Tabelle nicht, da sich die absoluten Positionsangaben left:5px und top:-10px am BODY (= Browserfenster-Rand) ausrichten.


[ editpost 12:57 ] Zum Beweis poste ich dir deine Seite, in der ich das DIV #dropdown zu Demonstrationszwecken absolut positioniert habe:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript">
<!--
function ShowHide(id, display) {
    obj = document.getElementsByTagName("div");
    obj[id].style.display = display;
}
//-->
</script>

<style type="text/css">
div#dropdown {
        background: Gray;
        color: White;
        height: 100px;
        position: absolute;
        display: none;
        width: 140px;
        text-align: left;
        top: -10px;
        left: 5px;
        filter: alpha(opacity=90);
        -moz-opacity: 0.9;
        opacity: 0.9;
}
</style>
</head>

<body>
<center>
<table border='1' cellpadding='0' cellspacing='0' width='800'><tr><td>

<div class="navi">
<a href="#" id="btn1" onmouseover="ShowHide('dropdown','block');" onmouseout="ShowHide('dropdown','none');">dropdown</a>
<a href="<?=$LINK2;?>" id="btn2"></a>
<a href="<?=$LINK3;?>" id="btn3"></a>
<a href="<?=$LINK4;?>" id="btn4"></a>
<a href="<?=$LINK5;?>" id="btn5"></a>
</div>

</td>
</tr></table>

<table width='800' border='1' cellpadding='0' cellspacing='0'><tr>
<td valign='top' class="content">

<!-- Test Dropdown -->
<div id="dropdown" onmouseover="ShowHide('dropdown','block');" onmouseout="ShowHide('dropdown','none');">
<a> Menüpunkt</a><br>
<a> Menüpunkt</a><br>
<a> Menüpunkt</a><br>
</div>

Content...

</td>
</tr>
</table>

</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Ja ich weiß dass das nicht funktioniert. Aber bei absolute wird der drunterstehende Inhalt nicht verschoben - nur das wollte ich damit sagen. Das ist ja das ganze Problem:
- Mit position:absolute wird das Menü immer woanders angezeigt nur nicht dort wo es soll
- Mit position:relative wird es dort angezeigt wo es hingehört, jedoch verschiebt sich der Inhalt drunter...

Wenn ichs mit visibility versuche, geht garnix mehr....
 
Vor einer Woche habe ich dir zwei gebrauchsfertige Lösungsansätze gezeigt, wie du ein Dropdown-Menu in einer Tabelle realisieren könntest, und bei beiden Varianten darauf hingewiesen, wie sich der nachfolgende Inhalt beim Einblenden der Submenüs verhält :(


[ editpost 08:31 ] Hier mein modifizierter 'copy+paste Source-Code', basierend auf deinem Source-Posting vom 13.05.2005, in dem der nachfolgende Inhalt beim Einblenden der Submenüs nicht verschoben wird:


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>DropdownMenu</title>
<script type="text/javascript">
<!--
function ShowHide(id, visibility) {
    obj = document.getElementsByTagName("div");
    obj[id].style.visibility = visibility;
}
//-->
</script>

<style type="text/css">
body
{
text-align: center;
}

table.top
{
margin: 0 auto;
width: 800px;
text-align: left;
}

table.content
{
margin: 0 auto;
width: 800px;
margin-top: -100px;
text-align: left;
}

div#dropdown1, div#dropdown2, div#dropdown3, div#dropdown4, div#dropdown5
{
position: relative;
visibility: hidden;
float: left;
top: -2px;
width: 140px;
height: 100px;
background: gray;
color: white;
text-align: left;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

div#dropdown1
{
left: 5px;
}

div#dropdown2
{
left: -40px;
}

div#dropdown3
{
left: -85px;
}

div#dropdown4
{
left: -130px;
}

div#dropdown5
{
left: -175px;
}
</style>
</head>

<body>

<table class="top" border='0' cellpadding='0' cellspacing='0'>
 <tr>
  <td>

   <div class="navi">

      <a href="#" id="btn1" onmouseover="ShowHide('dropdown1','visible');" onmouseout="ShowHide('dropdown1','hidden');">dropdown1</a>
         <div id="dropdown1" onmouseover="ShowHide('dropdown1','visible');" onmouseout="ShowHide('dropdown1','hidden');">
          <a> Menüpunkt 1.1</a><br>
          <a> Menüpunkt 1.2</a><br>
          <a> Menüpunkt 1.3</a><br>
         </div>

      <a href="<?=$LINK2;?>" id="btn2" onmouseover="ShowHide('dropdown2','visible');" onmouseout="ShowHide('dropdown2','hidden');">dropdown2</a>
         <div id="dropdown2" onmouseover="ShowHide('dropdown2','visible');" onmouseout="ShowHide('dropdown2','hidden');">
          <a> Menüpunkt 2.1</a><br>
          <a> Menüpunkt 2.2</a><br>
          <a> Menüpunkt 2.3</a><br>
         </div>

      <a href="<?=$LINK3;?>" id="btn3" onmouseover="ShowHide('dropdown3','visible');" onmouseout="ShowHide('dropdown3','hidden');">dropdown3</a>
         <div id="dropdown3" onmouseover="ShowHide('dropdown3','visible');" onmouseout="ShowHide('dropdown3','hidden');">
          <a> Menüpunkt 3.1</a><br>
          <a> Menüpunkt 3.2</a><br>
          <a> Menüpunkt 3.3</a><br>
         </div>

      <a href="<?=$LINK4;?>" id="btn4" onmouseover="ShowHide('dropdown4','visible');" onmouseout="ShowHide('dropdown4','hidden');">dropdown4</a>
         <div id="dropdown4" onmouseover="ShowHide('dropdown4','visible');" onmouseout="ShowHide('dropdown4','hidden');">
          <a> Menüpunkt 4.1</a><br>
          <a> Menüpunkt 4.2</a><br>
          <a> Menüpunkt 4.3</a><br>
         </div>

      <a href="<?=$LINK5;?>" id="btn5" onmouseover="ShowHide('dropdown5','visible');" onmouseout="ShowHide('dropdown5','hidden');">dropdown5</a>
        <div id="dropdown5" onmouseover="ShowHide('dropdown5','visible');" onmouseout="ShowHide('dropdown5','hidden');">
         <a> Menüpunkt 5.1</a><br>
         <a> Menüpunkt 5.2</a><br>
         <a> Menüpunkt 5.3</a><br>
        </div>

    </div>

  </td>
 </tr>
</table>

<table class="content" border='0' cellpadding='0' cellspacing='0'>
 <tr>
  <td valign='top' class="content">

   Content...

  </td>
 </tr>
</table>

</body>
</html>

[ editpost 14:17 ] Anmerkung zum CSS-Code: meine Angaben (= px-Werte) für die linke Position der fünf Sub-DIVs musst du noch an deine Seitenverhältnisse anpassen, da ich die wahre Dimension (= Länge / Zeichenlänge / Weitenangabe) deiner einzelnen Links #btn1, #btn2, #btn3, #btn4, #btn5 nicht kenne, und somit auch nicht ihre tatsächliche Position innerhalb des horizontalen Hauptmenüs.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück