✔ Arbeiten ohne Frames mit einem Hintergrundbild 590*650px

Status
Nicht offen für weitere Antworten.
So, und damit es hier voran geht, habe ich mal den Quellcode (HTML + CSS) etwas überarbeitet ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>dflab.de - David Floegel's Creative Labs</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="wrapper">
        <div class="head"></div>
        <div class="bla">
             <div class="leftCol">
                  <div class="menuh">&nbsp;Menu</div>
                       <a href="?section=news" class="menu">&nbsp;News</a>
                       <a href="?section=archive" class="menu">&nbsp;Newsarchiv</a>
                       <a href="?section=about" class="menu">&nbsp;About me</a>
                       <a href="?section=links" class="menu">&nbsp;Links</a>
                       <a href="?section=referenzen" class="menu">&nbsp;Referenzen</a>
                       <a href="?section=music" class="menu">&nbsp;Music</a>
                       <a href="?section=gaestebuch" class="menu">&nbsp;Gaestebuch</a>
                       <a href="?section=kontakt" class="menu">&nbsp;Kontakt</a>
             </div>
             <div class="content">
                  <div class="header">&nbsp;News</div>
                  <div class="inhalt">
                       <p>Hey</p>   
                  </div>
             </div>
             <div class="clear">&nbsp;</div>
        </div>
        <div class="foot"></div>
</div>
</body>
</html>
style.css
Code: 
body {
font-family: arial, sans-serif;
font-size: 10px;
}

.wrapper {
 width: 590px;
 margin: 0 auto;
}

.head {
 height: 175px;
 background: url(images/kopf.gif);
 width: 590px;
}

.bla {
 background: url(images/body.gif) repeat-y; /* Hintergrundgrafik in der Vertikalen wiederholen */
 width: 590px;
}

.leftCol {
 margin-left: 18px !important; /* Für nicht-IE-Browser */
 margin-left: 9px; /* Für IE */
 width: 120px;
 float: left;
}

.content {
 width: 345px;
 margin-left: 165px;
}

.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss im Dokument her */
 clear: left;
 margin: 0;
 padding: 0;
 height: 0;
 line-height: 0;
 font-size: 1px;
}

.foot {
 height: 34px;
 background: url(images/footer.gif);
 width: 590px;
 margin:0px;
 padding:0px;
}

.menu {
 background-color:transparent;
 display:block;
 text-decoration:none;
 color:black;
}
.menu:hover {
 background: url(images/menu.jpg);
 display:block;
 color:black;
 text-decoration:none;
}
.menuh {
 background: url(images/menu.jpg);
 display:block;
 color:black;
 text-decoration:none;
}

.header {
 background: url(images/header.jpg);
}

.inhalt {
 margin-left:3px;
}

.inhalt p {
margin: 0;
padding: 2px;
}
Und wenn Du Dich in die Formatierungssprache CSS einliest, dann hilft Dir das zukünftig sehr wohl theoretisch, als auch praktisch weiter.
 
Kein Problem, gern geschehen ;)

Heute Mittag hatte ich während meiner Mittagspause nicht die Zeit, um mich damit in aller Ruhe zu befassen, aber seit 16:00 Uhr ist ja Feierabend :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück