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 ...)
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.
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: