CSS Entwicklung

Prerequisits:

Arbeitsumgebung: auf einem Bildschirm den HTML- und CSS-Editor offen, auf dem zweiten Bildschirm oder bei großen Monitoren am gleichen Bildschirm den Browser offen. Sobald eine Änderung im CSS-Editor abgespeichert wird, wird die Änderung am Browser angezeigt.



Entwicklung des Grundlayouts

HTML -Grundstruktur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title></title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div id="page">
 <div id="header">Header</div>
 <div id="menu">Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>
Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>Menüpunkte<br>

</div>

 <div id="content"><div id="action">Call To Action</div>Content
orem 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.
asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>
asdf<br>
<br> 

</div>
 <div id="footer">Footer</div>
</div>
<div id="fixed">Fixed Area</div>
</div>

</body>
</html>



CSS

body{
  border:solid 1px red;
  min-height:100%; 
  margin:25px 200px 5px 200px;
}
div#page {
  border:1px solid purple;
  padding:5px;
  text-align:left;
  position:relative;
}


div#header {
  border:2px solid red;
  height:30px;
}
div#menu {
  border:2px solid green;
  width:150px;
  float:left;
  margin:10px 0 10px 5px;
  height:500px;
}
div#content {
  border:2px solid blue;
  margin:10px 0px 10px 175px;
  min-height:500px;
   
}

div#action {
  position:relative;
  float:right; 
  top:0; 
  border:2px solid green;
  width:150px;
  margin:0;
  height:500px;
  }
div#footer {
  border:2px solid red;
  height:30px;
}
div#fixed {
  position:fixed; 
  top:0;
  right:0;
  bottom:0;
  border:2px solid pink; 
  width:200px;
  }