Avion: Zwei float-Elemente sowie ein Bild in der Mitte. Ich oder IE!

Beitrag lesen

HILFE:
1. Gott sei dank gibt es SelfHTML und euch ;)

Habe folgendes vor:

SO SOLL ES IN ETWA AUSSEHEN

Das ist so das ungefähre Layout am Anfang. (das Bild und der Text sind nur Platzhalter. ;))

Auf den folgenden Seiten soll sich der Contentbereich nach unten verlängern (kann ruhig fix sein...) und kleine thumbnailbilder enthalten, die dann das große Bild in der Mitte laden. Dazu hat mir ein Freund auch schon ein Skript geschrieben.

So in Etwa....

Mein Problem:

Bitte mit Internet Explorer öffnen

nutze IE 6 und Firefox 3.

Firefox stellt es korrekt dar. IE. nicht.

habe vor ca vier Tagen+Nächten angefangen mich mit HTML und CSS intensiev zu beschäftigen!
Habe so ziemlich jede css Seite die ich finden konnte bei euch durchforstet.
Template von hier gezogen und mich inspirieren lassen:
Intensievstation
Und natürlich im Netz gestöbert.

Bin jetzt um 4:42 Uhr am Ende und muss es fertig bekommen.
Da kommt ihr in's Spiel:

Hier einmal die CSS Datei:

  
  
/* ---------- CSS für Ideas unlimited ---------- by: xxx  
Farben: creme:#faf4e6 rot:#e2483c hellblau:#758a9d mittelblau:#507798------*/  
  
/* ---------- Hintergrund tile... ---------- */  
body {  
 background-image:url(files/tile_bg01.jpg);  
 font-size: 15px;  
 font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;  
 color:#564b47;  
 padding:0;  
 margin:0;  
}  
  
a {color: #e2483c;}  
a:visited {color:#507798;}  
a:hover {color: #e2483c;}  
a:active { color:#758a9d;}  
  
  
/* ---------- header ist nicht mit im Container drin... ---------- */  
#header {  
 position: relative; top:150px;  
 width: 960px;  
 height:100px;  
 margin: 0 auto;  
 border: 2px solid #545252;  
 background-image:Url(files/title_hd.jpg);  
 background-color: #faf4e6;  
 background-repeat: no-repeat;  
 background-position: center;  
 }  
  
  
/* ---------- der Container gibt dem layout seinen Rahmen ---------- */  
#container {  
  position: relative; top:150px;  
 padding: 0px;  
 margin: 0 auto;  
 width: 960px;  
 max-height:320px;  
 background-color: #c0c0c0;  
 border: solid #545252;  
 border-width:0px 2px 0px 2px;  
}  
  
/* ---------- Inhalt ---------- */  
#content {  
  
 margin: 0 auto;  
 padding: 0px;  
 width: 460px;  
 height:320px;  
 text-align: center;  
 background-color: #faf4e6;  
}  
  
  
/* ---------- navigavtions ---------- */  
#left {  
 float:left;  
 padding: 0px;  
 height:320px;  
 width: 250px;  
 text-align: center;  
 position: left;  
 background-color: #e2483c;  
 border-right:2px solid #545252;  
}  
  
#right {  
 float:Right;  
 padding: 0px;  
 height:320px;  
 width: 250px;  
 text-align: center;  
 background-color: #e2483c;  
 border-left:2px solid #545252;  
}  
  
  
/* ---------- footer ------------ */  
#footer {  
 clear:both;  
 width: 960px;  
 margin: 0px auto;  
 padding: 5px 0px 5px;  
 text-align: center;  
 color:#758a9d;  
 background-color: #faf4e6;  
 border: solid #545252;  
 border-width: 2px 0px 2px;  
}  
  
/* --- Versuch am footer ---  
div#footer p{  
 padding: 5px 0px 5px;  
}  
*/  

Und Hier die HTML Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  
<html>  
  
  <head >  
    <title>  
     Welcome to: Ideas unlimited!  
  </title>  
  
  <link type="text/css" href="style.css" rel="stylesheet" media="screen" />  
  
  </head>  
  
  
  
  <body>  
  
 <div id="header">  
  </div>  
  
  <div id="container">  
  
   <div id="left">  
    Text links  
   </div>  
  
    <div id="right">  
    Text rechts  
   </div>  
  
   <div id="content">  
    Text plus Fotos usw...  
    </div>  
   <div id="footer">  
     <P><a href="xxx">E-Mail schreiben</a></p>  
     <p>Ideas Unlimited - xxx</p>  
     <p>xxx</p>  
    </div>  
 </div>  
  
  
  
  
  
  
  
  
  
  
</html>  
  
  

"xxx" habe so manches entfernt aus Gründen des Datenschutzes und der fiesen Suchmaschienbots...

Könnt ihr mir hier helfen?
MFG:
Avion

PS: auf eine gute Zeit ;)

Achtung: Es ist ein rein privates Projekt, nicht kommerziell. Nur um falsche Hintergedanken auszuschließen...