CSS Layout

Doktor · 13 Dezember 2007

So hi, ich habs allein versucht, umzusetzen was ich vorhabe, komme aber im Moment nicht weiter und frage deshalb euch.
Ich hab vor ein Layout mit Divs und CSS zu gestalten, da man ja Tabellen nicht benutzen sollte. Leider hab ich bisher leider noch nie mit Divs gearbeitet und hab deswegen relativ wenig Ahnung in dem Umgang.
Das Layout soll volgenedermaßen aussehen:

Eigentlich ist darauf alles beschrieben, außer das der "MeinContent später einmal aus einem Iframe bestehen soll:
1.)der soll sich später einmal selbstständig in der Höhe dem Bildschirm anpassen . Wie mach ich sowas? In CSS wäre e mir am liebsten falls das gehn würde, falls nicht geht auch erstazweise mit javascript.

1.1)Wenn dieser Iframe (also der Inhalt) sich anpasst, wie muss ich dann das layout der Homepage gestalten, damit sich die Divs (z.B der vom Maincontent) auch automatisch dem anpassen und die ganze Hoepage somit in der Höhe teilweise (in begrenzten Maße) veränderbar ist??

EDIT: -----CODE Unten-----

Doktor · 14 Dezember 2007

So ich hab jetzt zahlreiche Tutorials durchwühlt und hab jetzt das Layout so wie ich wollte.(die Höhen/Breitenangaben sind erfunden, da dies noch nicht genau feststeht)

Allerdings weiß ich noch nicht (wie oben schon gefragt):
1.) Sich ein Iframe dem Bildschirm anpassen kann? Java?? Oder besser noch CSS?
2.) Ob mein jetziger Aufabu sich dem überhaupt dann mitanpasst (dem Iframe), oder wenn nicht, was ich am CSS Teil des Codes noch verändern muss?
Ziel ist es, das sich die Homepage später einmal je nach Bildschirmauflösung dem Bildschirm anpasst (in der Höhe) => man muss im idealfall nur im Iframe scrollen und nicht im Browser selbst

So hier jetzt mein Code:
Anmerkungen dazu:
- Ich hab für die verschiedenen Bereiche zur besseren Übersicht Kürzel verwendet, z.B Maincontent=MC; Headerleft=HL; Platzhalterrechts=PHR ...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#container {
    height: 100%;
    width: 960px;
    margin: auto;
}
#header {
    height: 150px;
    width: 100%;
    float: left;
}
#headerleft {
    text-align: left;
    vertical-align: top;
    float: left;
    height: 150px;
    width: 30px;
}
#headerflash {
    float: left;
    height: 150px;
    width: 900px;
}
#headerright {
    float: right;
    height: 150px;
    width: 30px;
}
#mainContent {
    text-align: left;
    height: 100%;
    width: 960px;
    float: left;
}
#mainContentleft {
    float: left;
    height: 100%;
    width: 40px;
}
#maincontentInhalt {
    float: left;
    height: 100%;
    width: 880px;
}
#maincontentright {
    float: right;
    height: 100%;
    width: 40px;
    vertical-align: top;
}
#footer {
    height: 50px;
    width: 960px;
    float: left;
}
#footerleft {
    height: 50px;
    width: 40px;
    float: left;
}
#footermiddle {
    height: 50px;
    width: 880px;
    float: left;
}
#footerright {
    float: right;
    height: 50px;
    width: 40px;
}
#Inhalthead {
    vertical-align: top;
    float: left;
    height: 30px;
    width: 100%;
}
#Abschlussrechts {
    float: right;
    height: 100%;
    width: 20px;
}
#Platzhalterrechts {
    float: left;
    height: 100%;
    width: 20px;
}
#Abschlusslinks {
    float: left;
    height: 100%;
    width: 20px;
}
#Platzhalterlinks {
    float: right;
    height: 100%;
    width: 20px;
}
#Inhaltleft {
    float: left;
    height: 100%;
    width: 40%;
}
#Inhaltright {
    float: right;
    height: 100%;
    width: 60%;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <div id="headerleft">HL</div>
    <div id="headerflash">HF</div>
    <div id="headerright">HR</div>
  </div>
  <!--Ende header-->
  <div id="mainContent">
    <div id="mainContentleft">
      <div id="Abschlusslinks">AL</div>
      <div id="Platzhalterlinks">PHL</div>
    </div>
    <div id="maincontentInhalt">
      <div id="Inhalthead">IH</div>
      <div id="Inhaltleft"></div>
      <div id="Inhaltright">IR</div>
    </div>
    <div id="maincontentright">
      <div id="Platzhalterrechts">PHR</div>
      <div id="Abschlussrechts">AR</div>
    </div>
    <!--Ende maincontentright-->
  </div>
  <!--Ende maincontent-->
  <div id="footer">
    <div id="footerleft">FL</div>
    <div id="footermiddle">FM</div>
    <div id="footerright">FRR</div>
  </div>
  <!--Ende footer-->
</div>
<!--Ende container-->
</body>
</html>

EDIT: Ich weiß nicht warum, aber das ganze Design besonders der "maincontentright"(in dem sich die beiden rechten "rand" Divs) verschiebt sich. Meistens verschiebt sich der "maincontent right" unter die beiden Inhaltsdivs, obwohl maincontent right "float:right" als CSS benutzt.

CSS Layout

Doktor

Neues Mitglied

Doktor

Neues Mitglied

Neueste Beiträge