Mein erster css Versuch Was ist falsch?

AlexHPS · 15.04.2010

Hallo ich versuche mich erstmals alleine an CSS, ich würde gerne wissen was falsch ist und warum mir nichts angezeigt wird. ich will das als Schablone haben um eine HP für alle Auflösungen zu erstellen und dieses in alle Seiten einbauen, damit ich danach nur im css code nur die Werte ändern muss bei den einzelnen Seiten die ich einrichte.
aber das ist meine Sorge ich möchte nur wissen was am script falsch ist und warum es nichts anzeigt.
Danke erst mal
Alex

Code:

<html>

<head>
<style type="text/css">
#rahmen {
            position: absolute; 
            left: 0; 
            top: 0; 
            width: 800px; 
            height: 600px; 
            background-image:url('kram/gross/images/hintegrund.jpg'); 
            background-repeat:no-repeat; 
            background-attachment:fixed;
            z-index: 1
         }

#banner {

            position: absolute 
            left: 0; 
            top: 0; 
            width: 800px; 
            height: 110px; 
            z-index: 2
          }
        
#links {

            position: absolute; 
            left: 0; 
            top: 110; 
            width: 200px; 
            height: 600px;
            z-index: 3
            }
#mitte {
            position: absolute; 
            left: 200; 
            top: 110; 
            width: 400px; 
            height: 600px; 
            overflow:scroll;
            overflow-x:hidden;
            background-image: url('kram/gross/images/schrifthintergrung.gif');
            z-index: 4
         }
#rechts {
            position: absolute; 
            left: 600; 
            top: 110; 
            width: 200px; 
            height: 600px;
            z-index: 5
            }
</head>

<body style="
    overflow:hidden; 
    text-align: center" 
    topmargin="0" 
    leftmargin="0" 
    rightmargin="0" 
    bottommargin="0">

<div id="Rahmen">
    <div id="banner">Banner</div>        
    <div id="links">Links</div>
    <div id="mitte">Mitte</div>
    <div id="rechts">Rechs</div>
</div>

</body>

</html>

developr · 15.04.2010

Erstelle eine Datei style.css und schreibe dort deine CSS Angaben rein.

Code:

#rahmen {
            position: absolute; 
            left: 0; 
            top: 0; 
            width: 800px; 
            height: 600px; 
            background-image:url('kram/gross/images/hintegrund.jpg'); 
            background-repeat:no-repeat; 
            background-attachment:fixed;
            z-index: 1
         }

#banner {

            position: absolute 
            left: 0; 
            top: 0; 
            width: 800px; 
            height: 110px; 
            z-index: 2
          }
        
#links {

            position: absolute; 
            left: 0; 
            top: 110; 
            width: 200px; 
            height: 600px;
            z-index: 3
            }
#mitte {
            position: absolute; 
            left: 200; 
            top: 110; 
            width: 400px; 
            height: 600px; 
            overflow:scroll;
            overflow-x:hidden;
            background-image: url('kram/gross/images/schrifthintergrung.gif');
            z-index: 4
         }
#rechts {
            position: absolute; 
            left: 600; 
            top: 110; 
            width: 200px; 
            height: 600px;
            z-index: 5
            }

Nun bindest du diese Datei in den Header deiner HTML-Seiten ein.

HTML:

<link rel="stylesheet" type="text/css" href="http://www.deineseite.de/style.css" />

Fertig =).

Übrigens funktioniert deine Variante nicht, weil du den Style-Tag nicht geschlossen hast (</style>).