Grafik-Werkstatt - Beispiel 4

Beispiel 4

Hier der gleiche Aufbau wie im Beispiel 2, jedoch ohne Abstände zwischen den Feldern.

Die Linie zwischen Seiteninhalt und rechter Box ist ein Hintergrundbild.
Das Hintergrundbild hat im CSS-Code #content_container { bekommen.
Es ist das Feld, das Seiteninhalt (#content) und Box (#sidebar_container) als Inhalt hat.

Die Grafikadresse kann im CSS-Code entfernt werden, wenn die Linie nicht gewünscht wird.

/* Nullformatierung für alle Browser */
* { padding: 0px; margin: 0px; }

/* Werbung mittig */
table[height="102"] {margin:auto;}

/* Hintergrund hinter Design */
body {
  background-color: #eee;
  background-image:  none;
  font-family: arial;
  font-size: 14px;
  color: #000000; }

/* Design-Container */
#container {
  width: 992px;
  margin: 10px auto 0px auto;
  overflow: hidden;
  background-color: #FFFFFF;  }

/* Headerfeld 990 x 150 */
#header_container {
   width: 990px;
   height: 150px;
   background-color: #FFFFFF;
   background-image: url(HIER GRAFIKADRESSE);
   border: 1px solid #c9c9c9;
   border-radius: 20px 20px 0px 0px; }

/* Titel über Homepage */
h1#header {display:none;}

/* Feld der Navigation */
#nav_container {
  width: 990px;
  overflow: hidden;
  background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg2.png) repeat-x;
  border-right:1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9; }

/* Titel über Navigation entfernt */
#nav_heading {display: none; }

/* Aufzählungspunkte in Navi entfernt */
ul#nav {list-style-type: none; }

/* Navi-Buttons */
li.nav_element {
  float: left; 
  border-right:1px solid #c9c9c9;
  }

/* Linktexte in Navigation */
li.nav_element a {
  display: block;
  font-size: 15px;
  color: black;
  width: auto;
  height: 30px;
  line-height: 30px;
  padding: 5px 15px 5px 15px;
  text-decoration: none; 
  background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg2.png) repeat-x;}

/* Hover Navi-Button */
li.nav_element a:hover  {
  color: #FFFFFF; 
  background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg11.png) repeat-x;}

/* aktuell besuchte Seite */
li.checked_menu a {
  color: white;
  background: url(https://img.webme.com/pic/g/grafik-werkstatt/bg9.png) repeat-x;}

/* Zweites Headerfeld entfernt mit */
#pre_content {display:none; }

/* Feld um Inhalt und Box */
#content_container {
  width: 990px;
  overflow:hidden;
  background: url(https://img.webme.com/pic/g/grafik-werkstatt/trennlinie.jpg) repeat-y;
  border-right:1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9; }

/* Seiteninhalt */
#content {
  float:left;
  width: 660px;
  min-height: 200px;
  padding: 20px;
  background:  none;
  overflow: hidden; }

/* Titel Seiteninhalt + Titel über Box entfernt mit */
h2#title , #sidebar_heading {display:none;}

/* Link im Seiteninhalt */
#content a {color: #000080; }

/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }

/* Rechte Box */
#sidebar_container {
  float: right;
  width: 240px;
  padding: 20px;
  min-height: 200px;
  overflow: hidden; }

/* Werbetext UNTER dem Design */
#webme_footer_textlink_dont_hide {
  display:block;
  width: 500px;
  margin: 50px auto;
  color: #454545!important;
  background: none!important; }

/* Feld unter dem Design */
#footer {
  width: 950px;
  padding: 20px;
  margin: auto;
  overflow: hidden;
  background:  none #FFFFFF;
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  border-left:1px solid #c9c9c9;
  border-radius: 0px 0px 12px 12px; }

/* Linktexte im Footer */
#footer a {
  display:block;
  margin-left:20px;
  float: right;
  color: #000000;
  text-decoration: none;
  font-size: 14px; }

/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}

Im Feld "Text UNTER Design" fügen wir den Footer ein:

<div id="footer">
Heute [visits] Besucher
<a href="/Impressum.htm">Impressum</a>
<a href="/Kontakt.htm">Kontakt</a>

</div>