Positionierung: div-container innerhalb Tabelle

Status
Nicht offen für weitere Antworten.
T

topf

Mitglied
Hallo.

Vor kurzem ist mir die Idee gekommen, um Platz zu sparen ein CSS-DropDown Menü einbauen wollte.
Nach mittlerer Beschäftigungszeit mit der Idee der :hover Möglichkeit ist es mir auch gelungen auf primitive Weise ein solches Menü zu erstellen. Mittlerweile klappt es auch ganz gut mit CSS.

Nur, anscheinend fehlt mir die simpelste Theorie: Die Positionierung.

Also,
ich kenn die groben Unterschiede zwischen absolute, relative, fixed und static. Und wie ich damit div-container bsplsweise für eine Webseite positioniere.

Allerdings habe ich jetzt das Problem, dass ich eine Tabelle (<table>) mit unbestimmter Anzahl von Zeilen habe. Und über einem Link in dieser Tabelle soll dieses CSS-DropDown Menü erstellt werden.

Nur, und jetzt das Problem : Zerlegt es mir sofort die Tabelle, und das DD-Menü baut sich in der Tabellenspalte auf. Wie erreiche ich es, dass es sich daneben oder darüber ( im Sinne der z-Achse: davor ) aufbaut. Vielleicht gibt es interessante und besonders hilfreiche Ideen. Finde in diesem Forum nichts, was das behandelt.

Gruß Lars
 
Könntest du den dazugehörigen Quellcode posten, damit man sich ein Bild von der derzeitigen Situation machen kann?
 
Klaro,
also meine CSS-Quelltext aus dem Stylesheet:

HTML: 
#usermenu {
position:relative;
padding: 0px;
border: none;
}

#usermenu a.sub {
display: none; 
text-decoration: none;
}

#usermenu span {
margin: 0px 0px; 
padding: 0px;
border: none;
}

#usermenu:hover {
background: #F2F2F2;
border-top: 1px solid #FFFFFF; 
border-bottom: 1px solid #FFFFFF; 
border: #000000;
}

#usermenu:hover a.sub {
display: block; 
margin: 2px 0px; 
padding: 0px 5px; 
}

#usermenu a.sub:hover {
text-decoration: underline;
}
#usermenu:hover span{
display: block; 
width:150px;
padding: 0px 5px; 
border-top: 1px solid #FFFFFF; 
border-bottom: 1px solid #FFFFFF; 
}

Und hier ist die HTML-Situation :
HTML: 
<table width="700" class="" border="1">
	<tr>
		<td>...</td>
		<td>Kontakt</td>
	</tr>
	<tr>
		<td>...</td>
		<td>
			<div id="usermenu" style="z-index:{$reference.personalId}">
			<span><a href="#">{$reference.profile}</a></span>
			<a href="#" class="sub">Profil anzeigen</a>
			<a href="mail.php?id={$reference.personalId}" class="sub">User per eMail kontaktieren</a>
			</div>
		</td>
	</tr>
</table>

Bitteschön!
 
Hi,

Du solltest Dein Menue absolut positionieren. Um es in der Zelle zu halten, musst Du ein umgebendes relatives Element
haben. TD relativ zu positionieren funktioniert nur im IE. Aus diesem Grund wird ein weiteres Element erstellt (menueHolder),
welches das Menue aufnehmen kann.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
.menueHolder{ position: relative;
              margin: 0;
              padding: 0;}

#usermenu { position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            border: none;}

#usermenu a.sub { display: none;
                  text-decoration: none;}

#usermenu span { margin: 0;
                 padding: 0;
                 border: none;}

#usermenu:hover { background: #F2F2F2;
                  border-top: 1px solid #FFFFFF;
                  border-bottom: 1px solid #FFFFFF;
                  border: #000000;}

#usermenu:hover a.sub { display: block;
                        margin: 2px 0px;
                        padding: 0px 5px;}

#usermenu a.sub:hover { text-decoration: underline;}

#usermenu:hover span{ display: block;
                      width:150px;
                      padding: 0px 5px;
                      border-top: 1px solid #FFFFFF;
                      border-bottom: 1px solid #FFFFFF;}
-->
</style>
</head>
<body>
<table width="700" class="" border="1">
	<tr>
		<td>...</td>
		<td>Kontakt</td>
	</tr>
	<tr>
		<td>...</td>
		<td>
    	<div class="menueHolder">
	      <div id="usermenu" style="z-index: 2">
	        <span><a href="#">{$reference.profile}</a></span>
	        <a href="#" class="sub">Profil anzeigen</a>
	        <a href="mail.php" class="sub">User per eMail kontaktieren</a>
	      </div>
        &nbsp;
      </div>
		</td>
	</tr>
</table>
</body>
</html>
Es muss auch erwähnt werden, dass IEs vor Version 7 die Pseudo-Klasse :hover nur für das A-Tag unterstützen.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück