Probleme mit Div Layout

Status
Nicht offen für weitere Antworten.

Superdok

Erfahrenes Mitglied
Hi,
ich bin gerade dabei eine Homepage zu erstellen. Da ich nun schon allzuoft lesen hab müssen, dass man Tabellen nicht für den Aufabu bneutzen sollte, sondern eher Divs und CSS, hab ich mich auch daran versucht, und zahlreiche Tutorials durchgelsen. Der Aubau der Homepage sollte ungefähr (Achtung: Nur Skizze) aussehen:
http://img107.imageshack.us/my.php?image=aufbau2us2.gif

Oder so: http://neu.itchypoopzkid.de/home.html (diese ist allerings mit Tabellen)

Also hab ich dran gemacht und versucht ein solches Layout mit Dreamweaver zu gestalten. Der Code sieht bisher folgendermaßen aus:
(Anmerkung: Ich hab für einzelne Divs "Abkürzungen" benutzt zu besseren Übersicht: z.B PHR= Platzhalterrechts; HL= Headerlinks ...)
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>

Es klappt eigentlich auch jetzt soweit im FF und IE, außer im Dreamweaver ist der "maincontentrechts" div unterhalb der anderen beiden Divs ("maincontent inhalt/links") divs, anstatt rechts von diesen, Aber solange es im Broweser funktionert kann man dies noch verkraften. Nun zu meinen Fragen:
1.) Da ich bisher eigentlich kaum mit Divs gearbeitet habe, weiß ich nicht, ob alles im Einzelnen stimmt. Später, wenn die homepage fertig ist, soll in den rechten "maincontentinhalt" div ein Iframe. Sobald ich den Iframe allerdings einfüge, verschiebt sich das Layout teilweise, zumindest bei mir. Was kann man daran verbessern Alles
2.) Der Iframe sollte sich später einmal automatisch der Höhe Bildschirm des Betrachters anpassen, d.h. das der Betrachter im Idealfall nur im Iframe scrollen muss und nicht auch noch zusätzlich im Browser. Welchen Code muss ich in meinen jetzigen Code einfügen, damit sich der Iframe ( in der Höhe) an den Bildschirm anpasst?
3.) Da ich der Iframe automatisch dem Inhalt anpasst, sollte sich deshalb auch die geamte Homepage teiweise dem Iframe bzw. dem Bilschirm anpassen, d.h sie soll sich je nach Iframe Höhe zusammenziehen/auseinanderdehnen (natürlich jetzt nicht extrem, aber schon in einem gewissen Maße).
Da ich zu diesem Thema bisher nur gefunden habe, das man die Höhe einfach auf 100% stellt, hab ich dies in dieser Homepage (wo möglich: also im Maincontentbereich, da Header und Footer feste Größen haben) auch umgesetzt. Kann sich mit dem jetzigen Code die Homepage dem Iframe anpassen, oder falls nicht was muss man daran noch verändern?

Das wars "schon". Ich hoffe ihr könnt mir helfen.

Gruß

PS: Das Header ist ein Flashheader

----------------------EDIT:
4.)Was mir gerade auffällt am Layout: Mein Layout besteht ja grob gesagt aus Header, Content und Footer, die sich jeweils noch einmal aufteilen in verschiedene Unterelemente. Header und Footer haben bedingt durch ihren Inhalt eine Feste Höhe/(Breite), der Content aber nicht, da er sich ja in der Höhe verschieben lassen soll. Trotzdem sollte eigentlich wenn ich jetzt z.B etwas Test in den "maincontentrechts" schreibe, alle anderen Divs (vom "maincontent"; also "maincontentlinks" und "maincontentinhalt") auch die gleiche Höhe haben. Grund hierfür ist ja, da "maincontenterechts" und "maincontentlinks" die "auslaufenden" Grafiken haben, die immer die gleiche Höhe haben sollten wie der Inhalt (sonst würde ja auf einmal ein "Loch" im jeweiligen Rand sein.
Wie mach ich also, dass alle Divs von einem übergewordneten divs die gleiche höhe haben(automatisch)?


Soweit ich das bisher gesehen habe, ist es gar nicht möglich, dass die Divs die gleiche Höhe haben (4.). Wäre es in meinem Falls besser, das Layout so zu machen, dass es nur 3 "Hauptdiv" Elemente (Header, content und footer) gibts und in diesen dann mit tabellen gearbeitet wird? Die Tabellen sind ja gleich groß. Trotzdem bräuchte ich hierfür noch den Code für die Bilschirmanpassung des iframes.
 
Zuletzt bearbeitet:
Ja danke für diese Layouts, aber die Seite von mir solte später einen Aufbau wie diese hier haben: http://neu.itchypoopzkid.de/home.html
Also insbesondere diese Grafiken auf der rechten und linken Seite. Dies würde nämlich voll und ganz zum "rockigen" Image dieser Seite passen. Da aber die oben genannte Seite mit Tabellen aufgebaut ist, ich aber gelesen habe, dass man solche nicht mehr für eine Homepage benutzt, dachte ich mir ich mach eine mit Divs. Möglicherweise haben ja die Ersteller der oben genannten Seite absichtlich mit Tabellen gearbeitet, da dies gar nicht mit Divs umzusetzen ist.
Wie kann ich eine solche Seite umsetzten? Mit Divs oder nur mit Tabellen? Mein Vorschlag von oben, mit Divs und Tabellen hat eher nicht geklappt, da die tabbeln trotz fester Breite sich verlängert haben und soagr über die Divs hinaus sind.

Falls es nur mit Tabellen geht, wie gehe ich dann vor? Soll ich die Tabellen dann auch mit CSS formatieren?
Ist es überhaupt möglich, das Tabellen eine feste Breite über CSS bekommen

Außerdem bleibt dann immer noch die Frage mit dem Iframe. Wie löse ich das Problem?
 
Selbstverständlich müssten die empfohlenen Vorlagen noch entsprechend ausgebaut / erweitert werden, aber grundsätzlich bieten sie mit ihrer Technik genau das, wonach du für den iFrame suchst.
 
1.) Sry aber ich komm gearde nicht mir, was du mit deiner Antwort sagen wolltest. Die Designs die du mir geziegt hast arbeiten meines Wissen nach nicht mit Iframes.
Selbst wenn reicht mein Wissen nicht aus, um dies bei mir umzusetzen. Kannst du mir vielleicht nicht einmal einen Code geben?
2.) Das iframe Problem ist nur eins von vielen. Den Iframe gibt es aber erst einmal nur, sobald das Layout fertig ist.
Da du dies noch nicht angesprochen hast, hab ich noch einmal überlegt.
Das Problem liegt ja nur im Maincontent, da dieser keine feste höhe benutzt und Divs nicht die gleiche Höhe annehmen können. Deshalb geht vielleicht folgende Idee:
Ich benutze weiterhin Divs (Code von oben).Allerings benutze ich die beiden Divs vom Maincontent (den rechten, mit den auslaufbildern und den linken, mit den Auslaufbildern) nur als Abstandhalter zum Inhaltsdiv. Dem umgrenzenden div "maincontent" weise ich jetzt den Hintergrund mit den auslaufenden Divs zu (kann sich in y Richtung wiederholen), da sich ja dieser autmatisch mit dem Inhaltsdiv verlängert. Frage hierzu:

- Da ich ja 2 verschiedene auslaufende Bilder habe (für die linke und rechte Seite) gibts 2(falls möglich) Möglichkeiten, diese als Hintergrund für "maincontent" zuzuweisen:

1.)Um die Breite muss ich mir keine Gedanken machen, da diese fest ist. Entweder ich mache jetzt ein komplettes Bild(von rechts nach links) das alle beiden auslaufenden Bilder beinhaltet (mit der Breite des Divs)

oder (falls möglich):

Ich mach 2 verschiedene Bilder (für die rechten und linken Bilder) und weise dem "maincontent" div 2 verschiedene Hintergrundbilder zu (Eines linksbündig und das andere rechtsbündig). ist das möglich.

Lieber wäre mir aber, falls dies möglich ist, das ich meine jetzige Div Konsturktion behalte, aber anstatt den verschiedenen Divs des "maincontent" Tabellen benutze.
Ist es möglich, dass man innerhalb von Divs tabbeln macht? Die Tabellen dürfen aber nicht
aus dem maincontent div heraus gehen, d.h. das Div muss diesen eine Begrezung bieten.
Diesen Tabellen weise ich dann einfach Hintergrundbilder zu und fertig.
Die Tabelle hat natürlich eine feste Breite (die vom dem umgebenden Div). Geht diese Möglichkeit?
 
Zuletzt bearbeitet:
Sry aber ich komm gearde nicht mir, was du mit deiner Antwort sagen wolltest. Die Designs die du mir geziegt hast arbeiten meines Wissen nach nicht mit Iframes.
Man kann aber ohne weiteres darin einen iFrame einbetten und ihn mittels height:100% in der Vertikalen strecken, so dass er die Höhe vom umschliessenden DIV #maincontent übernimmt. In der Tabellenkonstruktion hast du es doch auch auf diese Weise gelöst, nur eben innerhalb eines td-Elements.

Das Problem liegt ja nur im Maincontent, da dieser keine feste höhe benutzt und Divs nicht die gleiche Höhe annehmen können. Deshalb geht vielleicht folgende Idee:
Ich benutze weiterhin Divs (Code von oben).Allerings benutze ich die beiden Divs vom Maincontent (den rechten, mit den auslaufbildern und den linken, mit den Auslaufbildern) nur als Abstandhalter zum Inhaltsdiv. Dem umgrenzenden div "maincontent" weise ich jetzt den Hintergrund mit den auslaufenden Divs zu (kann sich in y Richtung wiederholen), da sich ja dieser autmatisch mit dem Inhaltsdiv verlängert. Frage hierzu:

- Da ich ja 2 verschiedene auslaufende Bilder habe (für die linke und rechte Seite) gibts 2(falls möglich) Möglichkeiten, diese als Hintergrund für "maincontent" zuzuweisen:

1.)Um die Breite muss ich mir keine Gedanken machen, da diese fest ist. Entweder ich mache jetzt ein komplettes Bild(von rechts nach links) das alle beiden auslaufenden Bilder beinhaltet (mit der Breite des Divs)
Genau so kannst du es umsetzen, Stichwort: Fauxcolumns.

Die beiden äußeren "Abstandhalter"-DIVs sind aber überhaupt nicht erforderlich, wenn für das linke DIV #content mit margin-left, und für den rechten iFrame mit margin-right der gewünschte Außenabstand eingerichtet wird.

Der modifizierte Quellcode der Vorlage http://www.cssplay.co.uk/layouts/bodyfix.html lautet dann für's Erste:

Code:
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout </title>
<style type="text/css">
html {
        height:100%;
        max-height:100%;
        padding:0;
        margin:0;
        border:0;
        /* hide overflow:hidden from IE5/Mac */
        /* \*/
        overflow: hidden;
        /* */
        }

body {
        height:100%;
        max-height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
        border:0;
        }

#head {
        position:absolute;
        margin-left:-480px;
        left:50%;
        top:0;
        width:960px;
        min-width:960px;
        height:150px;
        z-index:5;
        }

#maincontent {
        display:block;
        overflow:hidden;
        position:absolute;
        z-index:3;
        top:150px;
        bottom:50px;
        width:960px;
        margin-left:-480px;
        left:50%;
        background:url(pfad/zur/grafik.gif) repeat-y;
        }

* html #maincontent {
        top:0;
        bottom:0;
        height:100%;
        border-top:150px solid #fff;
        border-bottom:50px solid #fff;
        }

#maincontent #content {
        width:242px;
        height:100%;
        float:left;
        display:inline;
        margin-left:59px;
        }

#maincontent iframe {
        width:565px;
        height:100%;
        float:right;
        display:inline;
        margin-right:59px;
        border:none;
        }

#foot {
        position:absolute;
        margin-left:-480px;
        left:50%;
        bottom:0;
        width:960px;
        min-width:960px;
        height:50px;
        z-index:5;
        }
</style>

</head>
<body>

<div id="head">head</div>
<div id="maincontent">
     <div id="content">content</div>
     <iframe src="..." frameborder="0"></iframe>
</div>
<div id="foot">foot</div>

</body>
</html>
 
K sry ich wusste nicht, dass sich der Iframe mit height=100% einem Div anpassen kann, da ich dachte mit dem Iframe verhält es sich genau gleich wie mit divs in einem umgebenden Div. Wenn ich den einzelnen divs in einem großen Div nämlich 100% Höhe gebe, passen sie sich auch nicht dem umgebenden div an. Trotzdem ist mir noch ein wenig unklar, da ich nicht gerade der beste in CSS und Div Sachen bin:

- Wenn ich jetzt dem einen Div vom Maincontent ein Hintergrundbild zuweise, dass alle Grafiken auf einmal enthält, ist dies nicht unklug, da man sonst das ganze Bild auf einmal laden müsste. Problem hierbei ist nämlich, das der Aufabu ungefähr so ausshenen sollte wie hier: http://neu.itchypoopzkid.de/home.html
Auf den Seiten irgendwelche auslaufenden Grafiken, und in jedem der beiden Inhaltsdivs uach noch eine Hintergrundgrafik (in dem rechteren Inhaltsdiv, befindet sich aber der Iframe). D.h. ich müsste für den content div eine Hintergrundgrafik machen, die sowohl die auslaufenden Grafiken enthält als auch die Hintergründe für die beiden Inhaltsdivs.
Würde es nicht gehen, dass ich anstatt den verschieden Divs im Content Tabellen benutze? Oder "bleiben" Tabellen nicht im Div, d.h. gehn sie wenn sie zu größ wären über das Div hinaus?

-zum Iframe: Bei deinem Vorschlag passt sich der Iframe dem Div an. Woher weiß aber jetzt das Div wie groß der Bildschirm ist. Ich hab nochmal gesucht und so etwas gefunden:
http://www.flashforum.de/forum/archive/index.php/t-92137.html

Da wird geschrieben, dass es entweder mit Javascript oder CSS gehn würde:
function iFrameHeight() {
if(document.getElementById && !(document.all)) {
h = document.getElementById('IframeName').contentDocum ent.body.scrollHeight;
document.getElementById('IframeName').style.height = h;
}
else if(document.all) {
h = document.frames('IframeName').document.body.scroll Height;
document.all.content.style.height = h;
}

(kannsst ja dann +px hinzufügen)

Im IFrame-Aufruf dann folgendes hinzufügen:

<iframe onLoad="iFrameHeight();" name="IframeName" id="IframeName" ... usw.

Geht übrigens auch sehr gut mit css: (an alle css-Schlaumeier)


.myiframe {
height:expression(frames("IframeName").document.body.scrollHeight);
}

Leider vesteh ich nicht was ich bei diesem Iframe im Body Teil
<iframe onLoad="iFrameHeight();" name="IframeName" id="IframeName" ... usw.
noch hinzufügen muss. Ich hab es so umgesetzt:
Code:
<iframe onLoad="iFrameHeight();" name="IframeName" id="IframeName"></iframe>
Aber dies funktioniert nicht. Weder mit der CSS Methode noch mit dem Javascript. Kannst du mir vielleicht erklären wie ich dort im einzelnen vorgehn muss?
 
Wie die Seite auszusehen hat, brauchst du nicht in jedem Beitrag zu wiederholen bzw. den Link zur Ausgangsseite zu nennen.

So wie du derzeit für den linken und rechten Inhalt ein seperates Hintergrundbild verwendest, kannst du es auch in diesem Modell machen; eine zusätzliche Tabelle ist also überhaupt nicht notwendig. Es müssen lediglich die äußeren Verlaufsgrafiken zu einer Grafik vereint, und diese, wie von mir im Quellcode gezeigt, im DIV #maincontent senkrecht wiederholt werden.

Das DIV #maincontent ermittelt seine Höhe unabhängig von der Bildschirmgröße automatisch anhand seiner oberen und unteren Positionsangabe. Somit ist hierfür auch nicht Javascript erforderlich, um die Höhe zu ermitteln.

Ich schlage jetzt vor, dass du dich mal daran machst, die modifizierte Vorlage wie gewünscht "auszuschmücken", bevor du hier alles in Frage stellst, was ich dir vorschlage, denn das Konzept erfüllt deine Vorstellungen und funktioniert tadellos.
 
Ich stell das Konzeot keinesfalls in Frage. Das Problem sind nicht nur die Grafiken auf der rechten und linken Seite, sondern auch die Grafik rechts neben der linken Grafik (also die Hintergrundgrafik für meinen linken Inhaltsdiv (Ich hab ja 2 auf der "Homeseite": Ein rechter Div für News und den Div rechts neben dran für den Iframe). Soll ich diese Grafiken zusammen mit den auslaufenden Grafiken dann auch zu einer verbinden

Wie du dir das vorstellst ist mir auch klar, aber, korrigier mich bitte wenn ich falsch liege, ist es nicht so, dass die Betracher der Seite dann das komplette Hinterundbild laden müssen. Eigentlich läd ja ein einzelnes Bild langsamer als viele kleine oder?
Deshalb auch mein Vorschlag mit den Tabellen (falls das überhaupt geht: Tabellen in Div)

Dadurch das ich auch noch nicht super viel Ahnung von CSS und Divs habe, verstehe ich nicht, wie das Konzept von dir oben funktioniert. Ziel des Anpassens ist ja, das die Betrachter der Seite nur im Iframe scrollen müssen und nicht zusätzlich noch im Browser.

Aber ich setz mich jetzt mal ran und schau wie das mit deinem Konzept funktionieren soll.

EDIT: Ich hab mir gerade das Design angeschaut und es funktionier eigentlich genauso wie ichs wollte, außer das er mir den Footer wenn ich das Broserfenster kleiner mache immer mit schiebt, bis irgendwann der footer über dem Header ist und sobald ich in den Footer was Schreibe verschwindet der maincontent
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.
Zurück