✔ CSS-Positionierung

Status
Nicht offen für weitere Antworten.
P

psx

Grünschnabel
Hi!

Ich habe eine Website, bei der der Content mit Hilfe von Tabellen in der mitte Zentriert und mit fester Breite steht. Links und rechts davon sind Ränder die je jach Größe des Browserfensters unterschidelich groß sind.

Nun habe ich in der Tabelle mit dem Content ganz oben ein Menü. Wenn man dort auf einen Menüpunkt klickt, soll drunter ein Untermenü ausklappen. ICh dachte dabe an eine DIV-Box die mit diesplay:block sichtbar gemacht wird bei lick auf den Menüpunkt. Soweit so gut. Jedoch wie kann ich diese Box genau unter dem Menüpunkt positionieren?

Beispiel: http://www.p-schwarz.de/position.gif (hier z.B. unter dem Hauptmenüpunkt "Friends").

Habe folgendes, eigenartige Wirrwar zusammengeschrieben, was meiner Meinung nach nicht tun dürfte. Aber es geht im Firefox, jedoch im IE nicht.

CSS:
Code: 
div.dropdown {
	background: Gray;
	color: White;
	height: 100px;
	position: absolute;
	display: block;
	width: 140px;
	text-align: left;
	top: 110px;
	margin-left: 71px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}

HTML:

HTML: 
<!-- Test Dropdown -->
<div class="dropdown" align="center">
<p>Test<br>
laber, sülz, ...</p>
</div>

Kennt jemand vielleicht einen einfachen Weg, das zu realisieren? Ich komm gerade nicht drauf... Am Besten wäre CSS welches in die meisten aktuellen Browsern funktioniert...
 
Danke für die Links!

Aber das Dropdownmenü ist nicht das Hauptrproblem vielmehr die Positionierung, dass das Dropdownmenü dort angezeigt wird wo es soll. Aber vielleicht kann ich was aus den Beispielen entnehmen....
 
Das deine Konstruktion nicht im Internet Explorer funktioniert, wird wohl daran liegen, dass der Internet Explorer die :hover-Pseodoklasse nur auf a-Elemente interpretiert – mal wieder eine der vielen Eigenarten des Internet Explorers. Daher wirst du auf eine zusätzliche JavaScript-Lösung zurückgreifen müssen.
Einige von Michael vorgeschlagenen Verweise sprechen diesen Aspekt an, z. B. der Artikel „Suckerfish Dropdowns“. Dort wird die Lösung vorgeschlagen, die CSS-Variante für die heutigen Web-Standards unterstützenden Browser anzuwenden; die anderen bekommen JavaScript, damit es funktioniert.

Weitere Informationen findest du auch in folgenden Themen:
 
Ich komm nicht mal bis zum eigentlcihen Dropdown. das problem ist, dass ich da mit <div>-Container machen wollte. Es klappt alles nur die werden bei jedem Browser woanders platziert....
 
Ein bischen mehr Seitenquelltext, als die zuletzt gezeigten Code-Schippsel, wäre schon hilfreicher.

Deiner Beschreibung (Tabelle als Seitenlayout) und dem CSS-Code zufolge, vermute ich, dass du in einer Tabellenzelle die DIVs absolut positionieren willst, was aber nicht funktionieren wird, weil sich in diesem Fall (DIV in TD eingebettet) die absolute Positionierung dieser DIVs auf das <body> -Element bezieht! Lösung: eine relative Positionierung.

Und wie Gumbo schon andeutete, benötigst du für den IE eine Script-Funktion, die das Einblenden der DIVs steuert, da das mit :hover nicht funktioniert!

Weisst du eigentlich, was mit bzw. in der Tabelle geschieht, wenn ein Sub-DIV mit der CSS-Eigenschaft display: block eingeblendet wird? Der darunterliegende / nachfolgende Tabellen-Inhalt wird, entsprechend der Sub-DIV-Höhe, nach unten verschoben.


Variante 1: Javascript tauscht die Werte none / block für display - nachfolgender Inhalt wird nach unten / oben verschoben

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>

<style type="text/css">
<!--
#m1, #m2
{
width: 138px;
border: 1px solid gray;
}

#m1_sub, #m2_sub
{
position:relative;
left: 0;
top: 0;
width: 140px;
height: 100px;
display: none;
background: Gray;
color: White;
text-align: left;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
-->
</style>

<script type="text/javascript">
<!--
function ShowHide(id, display) {
    obj = document.getElementsByTagName("div");
    obj[id].style.display = display;
}
//-->
</script>

</head>
<body>

<table border="1" cellpadding="0">
 <tr>
  <td valign="top">
   <div id="m1" onmouseover="ShowHide('m1_sub','block');" onmouseout="ShowHide('m1_sub','none');">menu1</div>
   <div id="m1_sub">sublayer1</div>
   </td>
   <td valign="top">
   <div id="m2" onmouseover="ShowHide('m2_sub','block');" onmouseout="ShowHide('m2_sub','none');">menu2</div>
   <div id="m2_sub">sublayer2</div>
   </td>
 </tr>
 <tr>
  <td colspan="2">nachfolgender Inhalt</td>
 </tr>
</table>

</body>
</html>

Variante 2: Javascript steuert mittels visibility die Anzeige bzw. Nicht-Anzeige der Sub-DIVs - nachfolgender Inhalt wird nicht verschoben

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>

<style type="text/css">
<!--
#m1, #m2
{
width: 138px;
border: 1px solid gray;
}

#m1_sub, #m2_sub
{
position:relative;
left: 0;
top: 0;
width: 140px;
height: 100px;
visibility: hidden;
background: Gray;
color: White;
text-align: left;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
-->
</style>

<script type="text/javascript">
<!--
function ShowHide(id, visibility) {
    obj = document.getElementsByTagName("div");
    obj[id].style.visibility = visibility;
}
//-->
</script>

</head>
<body>

<table border="1" cellpadding="0">
<tr>
 <td>
  <div id="m1" onmouseover="ShowHide('m1_sub','visible');" onmouseout="ShowHide('m1_sub','hidden');">menu1</div>
   <div id="m1_sub">sublayer1</div>
  </td>
  <td>
  <div id="m2" onmouseover="ShowHide('m2_sub','visible');" onmouseout="ShowHide('m2_sub','hidden');">menu2</div>
   <div id="m2_sub">sublayer2</div>
   </td>
 </tr>
 <tr>
  <td colspan="2">nachfolgender Inhalt</td>
 </tr>
</table>

</body>
</html>
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
 
Zuletzt bearbeitet von einem Moderator:
Danke für die Antworten. Ich habs jetzt annähernd so gemacht, nur leider verschiebt sich der Inhalt der Seite nach unten, wenn das Menü mit position:relative gemacht wird (nur beim öffnen des menüs)....
 
Zuletzt bearbeitet:
psx hat gesagt.:
Ich habs jetzt annähernd so gemacht, nur 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....
Zeig bitte mal deinen Quelltext, denn hellsehen können wir hier nicht ;-]
 
Stimmt. Ich werds mal versuchen....

Also: CSS folgendes, das relevant ist:
Code: 
div#dropdown {
	background: Gray;
	color: White;
	height: 100px;
	position: relative;
	display: none;
	width: 140px;
	text-align: left;
	top: -10px;
	left: 5px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}

Und im HTML-Code:
HTML: 
<html>
<head>
<script type="text/javascript">
<!--
function ShowHide(id, display) {
    obj = document.getElementsByTagName("div");
    obj[id].style.display = display;
}
//-->
</script>
</head>

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

<div class="navi">
<a href="#" id="btn1" onmouseover="ShowHide('dropdown','block');" onmouseout="ShowHide('dropdown','none');"></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='0' 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>

Ich hoffe das hilft weiter...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück