suit: Stylesheet abhängig von Fensterbreite

Beitrag lesen

SELF-Forum

Stylesheet abhängig von Fensterbreite

suit
– Informationen zu den Bewertungsregeln

%? Wieso dieses und inwiefern?

das seltsame beispiel im ausgangsposting ist extrem simpel umzusetzen, ist nur auf die schnelle zusammengeschustert und nur getestet unter firefox 2 - sollte aber bis auf den ie6 keine probleme machen (da sind leider ein paar hacks notwendig)
das ding ist natürlich nicht aus flexibles layout zu betrachten da es sich an der vorgabe des heise beispiels im ausgangsposting richtet:

linke und rechte spalte sind fix breit, die mittlere flexibel bis zu einer minimalen und maximalen breite - wenn fenster zu schmal, dann rutscht die rechte spalte drunter - wenn noch schmaler die mittlere auch

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <title>Titel</title>  
  <style type="text/css">  
   #container {  
    width: 100%;  
   }  
   #col0 {  
    float: left;  
    width: 200px;  
    background: blue;  
   }  
  
   #col1 {  
    float: left;  
    width: 60%;  
    min-width: 320px;  
    max-width: 800px;  
    background: green;  
   }  
  
   #col2 {  
    float: left;  
    width: 200px;  
    background: yellow;  
   }  
  </style>  
 </head>  
 <body>  
  <div id="container">  
   <div id="col0">blah<br />blah<br />blah<br />blah<br />blah<br />blah</div>  
   <div id="col1">„Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>  
   <div id="col2">blah<br />blah<br />blah<br />blah<br />blah</div>  
  </div>  
 </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln