Patty: Div zum Layouten 'missbrauchen'?

Beitrag lesen

SELF-Forum

Div zum Layouten 'missbrauchen'?

Patty
– Informationen zu den Bewertungsregeln

Hallo,

ich hab einige Forums(archiv)einträge zum Thema CSS und XHTML gelesen um mich erstmal schlau zu machen. Der Tenor war: Layout gehört ins CSS! So weit so gut.

Mein Ziel ist ein Menu, wie es durch den unten stehenden Code dargestellt wird. Dabei soll alles eine relative Größe haben und die Proportionen erhalten bleiben, wenn der Anwender am Browser die Textgröße ändert.

Der div im div dient dabei "lediglich" als Zierstreifen, deshalb auch das Konstrukt, damit ich den zweiten div und das ul zueinander positionieren kann.

Geht das eleganter unter der Prämisse, das das Layout mitzoomen soll?

Danke für jeden Denkanstoß und Hinweis!

LG
Patty

<!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">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
		<title>Test</title>  
		<style type="text/css">  
			HTML  {  
				position: absolute;  
				top: 0;  
				left: 0;  
				margin: 0;  
				padding: 0;  
				font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;  
				font-size: 0.8em;  
				font-weight: normal;  
				width: 100%;	  
			}  
			BODY  {  
				position: absolute;  
				top: 0;  
				left: 0;  
				width: 100%;  
				margin: 0;  
				padding: 0;	  
				background-color: #FFFFFF;  
			}  
			#nav1  {  
				position: relative;  
				height: 5.5em;  
				width: 100%;  
				background-color: #EFEFEF;  
				display: block;  
				overflow: visible;  
				margin: 0;  
				padding: 0;	  
			}  
			#nav1 div {  
				position: absolute;  
				top: 1.5em;  
				left: 0;  
				height: 2em;  
				width: 100%;  
				background-color: #FF0000;  
				display: block;  
				margin: 0;  
				padding: 0;	  
			}  
			#nav1 ul  {  
				position: absolute;  
				top: 1em;  
				left: 3em;  
				background-color: #4444FF;  
				list-style: none;  
				margin: 0;  
				padding: 0;	  
			}  
			#nav1 ul li {				  
				display: inline;  
				float: left; 	  
				padding: 1em;	  
				white-space: nowrap;  
			}  
		</style>  
	</head>  
	<body>  
		<div id="nav1">			  
			<div></div>  
			<ul>  
				<!-- verboten... <div style="background-color: #00CCAA">xyz</div> -->  
				<li>Menuitem 1</li>  
				<li>Menuitem 2</li>  
			</ul>			  
		</div>			  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln