Dieter: min- und max-width Verständnisproblem

SELF-Forum

min- und max-width Verständnisproblem

Dieter
– Informationen zu den Bewertungsregeln

Hallo,

ich bastle jetzt schon seit mehreren Tagen daran, eine Layout hinzubekommen das auf einer Mindest- und Maximalbreite basiert.

Da das ganze auch für die etwas ältern Browser funktionieren soll, wollte ich das workaround von Stu Nicholls nutzen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >  
<head>  
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />  
<title>Test</title>  
<style type="text/css">  
.width {width:50%; min-width:800px; margin:0 auto;}  
* html .minwidth {border-left:800px solid #fff; position:relative; float:left; z-index:1;}  
* html .container {margin-left:-800px; position:relative; float:left; z-index:2; text-align:left;}  
</style>  
</head>  
<body>  
<div class="width">  
	<div class="minwidth">  
		<div class="container">  
		#MEIN SEITENCONTENT#  
		</div>  
	</div>  
</div>  
</body>  
</html>

Dieses funktioniert auch sehr gut, aber wie bekomme ich jetzt auch die maximale Breite hin ?
Als "Vorbild" nehme ich die Seite vom deutschem  Anwaltverein, da ich es theoretisch genauso hinbekommen möchte, d.h. eine Mindestbreite von 800, eine maximale Breite von 1200, wobei die Box rechts (oben wo auch das Logo ist) immer 200 Pixel breit sein soll (nur der Content links ändert ja die Breite innerhalb der festgelegten Grenzen).

Gruss
Dieter

PS: ich bin ein absoluter CSS-Noob und versuche damit zu lernen, deshalb bringt mir es nichts den Code z.B. nur zu kopieren, denn damit würde ich ihn ja nicht verstehen...

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. min- und max-width Verständnisproblem

    suit Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Dieses funktioniert auch sehr gut, aber wie bekomme ich jetzt auch die maximale Breite hin ?

    Ich würde hier zu Expressions greifen - alle anderen Browser außer dem IE6 sind ohnehin in der lage entsprechend zu arbeiten.

    Für min-width sieht das so aus:
    width: expression(document.body.clientWidth < 961 ? '960px' : 'auto');

    Anstatt der 100% kann man natürlich eine weitere Bedingung einbauen die dann max-width ersetzt

    Zusammengebaut sieht das dann so aus:

    width: expression(document.body.clientWidth < 961 ? '960px' : (document.body.clientWidth > 1679 ? '1680px' : 'auto'));

    Das entspricht somit min-width 960px und max-width 1680px.

    Wie man das ganze nur dem IE6 vorsetzt (Star-HTML-Hack) weißt du ja offenbar schon.

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. min- und max-width Verständnisproblem

      Kai345 Homepage des Autors
      – Informationen zu den Bewertungsregeln

      [latex]Mae  govannen![/latex]

      Dieses funktioniert auch sehr gut, aber wie bekomme ich jetzt auch die maximale Breite hin ?

      Ich würde hier zu Expressions greifen -

      Ja, aber…

      Zusammengebaut sieht das dann so aus:

      width: expression(document.body.clientWidth < 961 ? '960px' : (document.body.clientWidth > 1679 ? '1680px' : 'auto'));

      …das hat Nachteile

      Cü,

      Kai

      --
      ~~~ ken SENT ME ~~~
      Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
      in Richtung "Mess up the Web".(suit)
      SelfHTML-Forum-Stylesheet
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln