Fireball: CSS-Layout

Beitrag lesen

Vielen Dank für deine Antwort!
Also umgesetzt, also meine Seite sieht so aus:
index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Startseite</title>  
  
<!-- META-Daten -->  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<!-- Styles -->  
  <link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">  
</head>  
  
<body >  
  
  
<div id="Seite">  
  
<!-- Kopf -->  
<div id="kopf">  
<img src="grafiken/logo.gif" width="180px" height="135" align="left" alt="Unser Logo" id="logo" >  
<h1 id="titel">Meine erste Seite</h1>  
</div>  
<!-- Kopf Ende -->  
  
  
<!-- "Zweite Zeile" -->  
<div id="Darunter">  
  
<h2>Navigation</h2>  
<ul id="navi">  
  
  
<li class="nav">Navi1</li>  
<li>Navi2</li>  
</ul>  
  
<div id="Inhalt">  
  
  
</div>  
  
</div>  
  
  
<!-- Ende "Zweite Zeile" -->  
<div id="fuss">  
© Fireball  
  
</div>  
  
  
  
</div>  
  
</body>  
  
  
</html>

und darstellung.css:

body              {  
                 color: black; background-color: #C0C0C0;  
                 font-size: 105%;  
                 font-family: Arial,Helvetica,sans-serif;  
  
                 text-align: center;  /* Zentrierung im Internet Explorer */  
                 }  
  
div#Seite        {  
                 text-align: left;    /* Seiteninhalt wieder links ausrichten */  
                 margin: 1% auto;      /* standardkonforme horizontale Zentrierung */  
                 width: 95%;  
                 height: 95.2%;  
                 padding: 0px;  
                 background-color: #ffffff ;  
                 border: 2px ridge black;  
                 }  
  
logo             {  
                margin: 0 0;  
  
  
                 }  
  
h1#titel         {  
  
                 position:relative;  
                 top:0;  
                 left:0;  
                 padding-top:0em;  
                 margin: 0 0;  
                 text-align:center;  
                 font-family: 'Courier New', monospace;  
                 font-weight:normal;  
                  background-color: #FFFF00;  
                   height: 135px;  
                 }  
  
  
div#Darunter     {  
                 position:relative;  
                 top:0px;  
                 left:0px;  
                 padding: 0;  
                 margin: 0 0;  
                 text-align:justify;  
  
                 }  
  
ul#navi          {  
                 background-color:#C0C0C0;  
                 list-style-type:none;  
                 padding: 10px;  
                 margin-top: 5;  
                 margin-bottom: 5px;  
                 margin-left: 3px;  
                 margin-right: 3px;  
                 width: 157px;  
                 color: #000000;  
  
  
  
                 }  
  
li#nav:hover         {  
                 background-color:#FFFF00;  
                 }  
  
div#fuss         {  
                 background-color: #FFFFFF;  
                 font-size: 67%;  
                 width:93.5%;  
                 margin-top: 5;  
                 margin-bottom: 5;  
                 margin-left: 3;  
                 margin-right: 3;  
                 text-align: center;  
                 border: 1px dashed black;  
                 position:absolute;  
                 bottom:4.5%;  
                 }  
  
strong           {  
                 font-weight:bold;  
                 }  
li#nav           {  
                 color: #000000;  
  
                 }  
  
a#nav            {  
                 text-decoration: none;  
                 color: #000000;  
                 }  
br#abs-ocss      {  
                 visibility:hidden;  
                 }  
  
  
  

Doch es treten verschiedene Probleme auf:
1.   In Firefox wird mein Logo gar nicht angezeigt (Firefox 3.5.6) (IM Internet Explorer dagegen schon
2.   Ich bekomme beim Validieren folgende Meldung:
»»Error  Line 27, Column 63: Attribute "ALIGN" is not a valid attribute. »»Did you mean "align"?
»»
»»…f" width="180px" height="135" align="left" alt="Unser logo"
»»
»»You have used the attribute named above in your document, but the »»document type you are using does not support that attribute for this »»element. This error is often caused by incorrect use of the "Strict" »»document type with a document that uses frames (e.g. you must use the »»"Transitional" document type to get the "target" attribute), or by using »»vendor proprietary extensions such as "marginheight" (this is usually »»fixed by using CSS to achieve the desired effect instead).
»»
»»This error may also result if the element itself is not supported in the »»document type you are using, as an undefined element will have no »»supported attributes; in this case, see the element-undefined error »»message for further information.

Viele Grüße
Fireball