Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 23.06.2003, 12:51
ulle ulle ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Es ist eine gute Idee, die Breite des Layots auf 760px zu begrenzen, da 1. die meissten Leute mit 800x600 surfen und 2. das Layout nicht so gestreckt wird falls mal jemand mit 1280x1024 surft.
Eine schlechte Idee

Generell sollte der Besucher einer Website doch selbst entscheiden in welcher Auflösung er Surft.

Sprechen wir doch von Client-Unabhänig; soweit so gut - sicher sollte man natürlich eine Mindestauflösung ( 800x600 ) berücksichtigen.

Aus diesem Grund sieht CSS2 ja auch die Werte MAX-WIDTH und MIN-WIDTH vor. Leider kann die der IE6 noch nicht.

Deshalb mein Vorschlag:

Code:
<!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><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">	<!--
	html,body {
		background-color: #FFFFFF; /* Hintergrungfarbe zur Kontrolle */
		color: #000000;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 0.9em;
		margin: 0px;
		padding: 0px;		
	}

	#nav {
		width: 195px;
		background-color: #FF9900;
		float: left;
	}
	
	#minimumrest { background-color: #00FF00; /* Hintergrungfarbe nur zur Kontrolle */
		width: 100%; /* Prozentual vom Eltern-Element (#rest); d.h. volle verbleibende Breite; für IE */
		height: 4px; /* 4px nur zur Kontrolle ; besser 1px weil sowieso nicht sichtbar */
		border: 0px;
	}
	#rest {
		background-color: #0099FF;
		float: left;
		max-width: 75%; /* 75% von 780px = 585px; damit wird die 800x600 ordentlich Angezeigt */
		min-width: 585px;
	}
	
	.box {
		border: 1px solid #000000;
		margin: 5px;
		padding: 8px;
	}
	
	-->
</style>
</head>

<body><div id="nav">

<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&
</div>


</div><div id="rest">


<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&

&
&
</div>
<div class="box">Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </div>


[img]x.gif[/img]</div></body></html>


Die 2 Container die das Layout in NAV und Rest unterteilen sollten in jedem Fall ohne Border, Padding und Margin definiert werden; Da ja nach dem BOX-Modell genau diese Werte zu den Width-Angaben addiert werden und dann ist Essi-sch(-g) mit 100%........
__________________
</ulle>
Mit Zitat antworten