XieLong: Eigenes Layout - Tabellen VS Divs

Beitrag lesen

SELF-Forum

Eigenes Layout - Tabellen VS Divs

XieLong
– Informationen zu den Bewertungsregeln

Irgendwie steh ich wieder auf dem Schlauch... meine Untermenüs tauchen jeweils immer im ersten Feld statt in ihrem Feld auf O.o

So wie es aussieht wird position:absolute für die Untermenüs in Bezug auf den Body ausgeführt - statt für das übergeordnete Listenelement (welches ich extra mit position:relative versehen habe. Trotzdem funktioniert das so nicht - warum? Bzw. wie funktionierts richtig?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
	<head>  
		<title>3x2-Layout</title>  
		<style type="text/css">/*<![CDATA[*/
~~~~~~css
  
		html, body {  
			margin: 0;  
			padding: 0;  
			height:100%;  
		}  
		#tiles {  
			width: 100%;  
			height:100%;  
			list-style: none;  
			margin: 0;  
			padding: 0;  
		}  
		#tiles li {  
			display: inline-table;  
			width: 33.33%;  
			height: 50%;  
			float: left;  
			margin: 0;  
			padding: 0;  
			overflow: hidden;  
			position: relative;  
			top: 0px; left: 0px;  
		}  
		#tiles a {  
			display: table-cell;  
			width: 100%;  
			height: 100%;  
			text-align: center;  
			text-decoration: none;  
			color: inherit;  
			vertical-align: middle;  
			border: 5px solid black;  
			background: #88ff88;  
		}  
		#tiles a:focus,  
		#tiles a:hover,  
		#tiles a:active {  
			border: 1px solid black;  
			background: #ff8888;  
		}  
		  
		#tiles li ul {  
			width:33.33%;  
			height:50%;  
			position: absolute;  
			top: 0px; left: 0px;  
			margin: 0px; padding: 0px;  
			background-color:#000000;  
			display:none;  
		}  
		  
		#tiles li:focus ul,  
		#tiles li:hover ul,  
		#tiles li:active ul {  
			display:block;  
		}  
		  
		#tiles li ul li{  
			width: 50%;  
		}
~~~~~~html
  
		/*]]>*/</style>  
	</head>  
	<body>  
		<ul id="tiles">  
			<li><a href="#" title="Status anzeigen">[Status]</a>  
				<ul>  
					<li><a href="#" >Profil</a></li>  
					<li><a href="#" >Bearbeiten</a></li>  
					<li><a href="#" >Ausloggen</a></li>  
				</ul>  
			</li>  
			<li><a href="#" title="Erstellen">Erstellen</a>  
				<ul>  
					<li><a href="#" >&Ouml;ffentlich</a></li>  
					<li><a href="#" >Privat</a></li>  
					<li><a href="#" >Gesch&uuml;tzt</a></li>  
					<li><a href="#" >Tempor&auml;r</a></li>  
				</ul>  
			</li>  
			<li><a href="#" title="Anschauen">Anschauen</a>  
				<ul>  
					<li><a href="#" >Gallerie</a></li>  
					<li><a href="#" >Eigene</a></li>  
					<li><a href="#" >Gruppen</a></li>  
					<li><a href="#" >Regeln</a></li>  
				</ul>  
			</li>  
			<li><a href="#" title="Laden">Laden</a></li>  
			<li><a href="#" title="Regeln">Forum</a></li>  
  
			<li><a href="#" title="Hilfe">?</a>  
				<ul>  
					<li><a href="#" >Hilfe</a></li>  
					<li><a href="#" >Projekt</a></li>  
					<li><a href="#" >Mitarbeiter</a></li>  
				</ul>  
			</li>  
		</ul>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln