✔ Probleme mit Div Layout

Status
Nicht offen für weitere Antworten.
Sry wahrscheinlich geh ich dir schon auf die Nerven, aber das ich die Hintergrundgrafik vom Iframe nicht verbinden muss ist mir klar, da dieser ja 100% höhe hat, aber die Hintegrundgrafik vom anderen Maincontent soll ja auch genauso lang sein wie das gesamte maincontent div. Und weiter oben wurde ja gesagt, das ein Div in einem anderen Div nicht 100% höhe haben kann.

Falls dus nicht gelesen hats in meinem vorherigen Post unter Edit: das Konzept von die hat irgendwie den Wurm oder bei mir funktinierts nicht. Der Iframe funktioniert sehr schön, aber
im IE seh ich nur den maincontent (ohne Iframe)
im FF schiebts bei mir den Footer immer mit der Seite mit(was bis zu einem gewissen Punkt ja auch sein soll, aber irgdnwann liegt der footer über dem Header)

Edit: Wenn ich dein Konzept mit einer Hitergrundgrafik für den Header versehe, und ich geh in den Firefox und zieh das Browserfenster nach links (also mach es waagrecht kleiner) dann verschwindet der ganze Inhalt irgendwo im Nichts ganz links, anstatt das die Divs irgendwann links stehn bleiben.
 
Zuletzt bearbeitet:
Entschuldigung für die falschen anschuldigungen. Ich hab gerade dem "#content" ein Hintergrund zugewiesen und es geht im Browser dann auch wie sein soll ganz runter, obwohl ich nicht verstehe warum.

Jetzt gibts nur noch folgende Probleme:
- Im IE kommt bei mir ein Fehler wenn ich die Datei öffne: "...Datei /Test.htm... konte nicht gefunden werden" (gelöst: mein Fehler :) )
- Der content Div ist nicht bündig mit dem Iframe (gelöst: Breite war zu gering)
- Der Content div hat keinen automatischen Textumbruch, d.h der Inhalt schwebt rechts neben dem Content div wenn man zu viel hinschreibt.
-und das Problem mit dem ganz hoch schieben des Footers
-und das die Seite wenn man den Browser waagrecht verkleinert im Nichts verschwindet

EDIT: Ah ich seh gearde: In der Vorlage ist es ja gleich. Kann man das vielleicht noch irgendwie ändern? Wenigstens, dass die Seite nicht links verschwindet, sondern sobald der rand der Seite an dem Broserrand angestoßen ist, soll sie stehn bleiben. Genauso wie hier (sry für den Link nochmal): http://www.itchypoopzkid.de

Das sich der Footer hochschiebt hat sogar seine Vorteile, da unten im Footer bei mir nochmal das Menü ist, falls es noch Leute gibt, die kein Flash Player installiert haben
Aber das die Seite verschwindet ist relativ ungünstig, da Betracher, deren Bildschirm zu klein ist bzw. die Auflöung zu gerung ist nur einen Teil der Seite sehen, da nicht einmal ein waagrechter Scrollbalken auftaucht.


zu sehen (Grafiken nur zum Test) hier: http://projektpfinz.pr.ohost.de/Test/TEST.html
 
Zuletzt bearbeitet:
Kann man ;)

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;*/ /* auskommentiert = deaktiviert */
        /* */
        }

body {
        height:100%;
        max-height:100%;
        /*overflow:hidden;*/ /* auskommentiert = deaktiviert */
        padding:0;
        margin:0;
        border:0;
        text-align:center;
        }

#wrap {
        width:960px;
        position:relative;
        margin:0 auto;
        height:100%;
        text-align:left;
        }

#head {
        position:absolute;
        /*margin-left:-480px;*/ /* auskommentiert = deaktiviert */
        left:0;
        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;*/ /* auskommentiert = deaktiviert */
        left:0;
        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;
        background:#ccc;
        }

#maincontent iframe {
        width:565px;
        height:100%;
        float:right;
        display:inline;
        margin-right:59px;
        border:1px solid #000;
        overflow-x:hidden;
        }

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

</head>
<body>

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

</body>
</html>
 
Danke Maik so hab ich mir das gedacht. Aber was noch störend ist, ist der fehlenden Textumbruch im content div (siehe http://projektpfinz.pr.ohost.de/Test/Test2.html), da ja da später mal was stehen soll.
Außerdem ist mir aufgefallen, dass ein senkreter Scrollbalken im Broser fehlt, wenn das Fenster bei geringen Auflösungen oder bei zu kleinem Ausschnitt angeschaut wird, d.h. dass dann der Inhalt des content Divs ganz unten einfach abgeschnitten wird und man durch den fehlenden Scollbalken (bei zu kleinem Fenster) keine Möglichkeit hat, diesen "sichtbar" zu machen. Ist das auch nur eine Regel im CSS Teil oder komplexer das umzusetzen? Denn eigentlich sollte ja eine Homepage für eine breite Masse an Leuten bestimmt sein mit unterschiedlichen Auflösungen.

Nur nebenbei: Ich sitz schon die ganze Zeit an dem CSS teil und versuche rauszufinden, welche Werte man ändern muss um die Breite der beiden auslaufenden Grafiken zu verkleinern (also die Breite des content und iframes breiter zu machen). Jedesmal wenn ich versuche ein margin Wert oder die Breite der Content Divs zu ändern verschiebt das Layout. Also ich versteh den CSS Teil nicht ganz, da eigentlich bei jeder Regel ein "#maincontent" steht. Reicht das nicht nur einmal? z.B "#maincontent iframe" usw.
 
Solange die Zeichenkette kein Leerzeichen besitzt, hat der Browser auch keinen Anhaltspunkt, wo er einen Zeilenumbruch vornehmen soll.

Dass da kein vertikaler Scrollbalken erscheint, hängt einfach damit zusammen, dass der mittlere Teil in der Höhe variabel ist, und sich dieses Element beim Verkleinern des Fensters in der Vertikalen "zusammenstauchen" lässt.

Was du den beiden Elementen an Breite dazugibst, muß bei ihrem Außenabstand abgezogen werden, und umgekehrt.

Bei #maincontent #content und #maincontent iframe handelt es sich um Selektoren für Nachfahren, d.h. die Regeln gelten nur für die nachfolgend genannten Elemente, die sich in dem Element mit der ID #maincontent befinden.
 
K den Rand kann ich jetzt auch verändren. Content Textumbruch ist auch klar (gar nicht drangedacht).

Bei http://neu.itchypoopzkid.de/home.html ist der mittlere Teil doch auch variabel und ein Scrollbalken erscheint auch. Weil ohne diesen Scrollbalken auf der Seite wird diese ja bei zu kleinen Auflösungen unbrauchbar und man dürfte nie bis ganz nach unten schreiben.
Welche Möglichkeiten gibt es, das ein Scollbalken erscheint?
-Min. Höhe des mittleren Teils vergeben (Wie?), denn dann hätte der Browser ja eine "Höhenangabe"(wenn auch variabel)?
-Vielleicht außerhalb des kompletten Divs ein Bild hinmachen oder irgendwas hinschreiben, damit der Browser ganz unten was hat zum hinscrollen?( hat auch Itchypoopzkid: ganz unten ist da so ein komisches graues Bild) :
habs gerade ausprobiert, aber der Maincontent verschwindet trotzdem, deshalb wäre eine Min Höhe trotzdem notwendig(hoffentlich geht das)


-verhindern, dass es den Footer immer automatisch mit hoch schiebt, d.h Footer bleibtz unterhalb des meincontent Divs, aber maincontent Div kann sich in gewissem maße zusammenziehen (wie bei Itchypoopzkid) => gleicher effekt wie beim 2. Vorschlag (vielleicht, hoffentlich)
-mehr fällt mir nicht ein, aber der Scrollbalken wäre meiner Meiner Meinung nach aber extrem wichtig, da ich als Betracher keine Lust hätte mir einen Weg zu suchen um an die unterste Inhalte zu kommen(wenn man weiß das da welche sein sollten)? Im Notfall auch so wie bei Itchypoopzkid: Der Scrollbalken erscheint dauerhaft.
 
Zuletzt bearbeitet:
Dann musst du eben das linke DIV mit einem Scrollbalken ausstatten, so wie den iFrame, damit darin der Inhalt gescrollt werden kann, wenn das Browserfenster verkleinert wird.
 
Jo auch eine Möglichkeit, hab auch grad noch gesucht: min-height vergeben für den "#wrap" und es funktioniert so wie ichs wollte :) Juhu

Test: http://projektpfinz.pr.ohost.de/Test/Test2.html

Noch eine letze Frage, dann hör ich auf dich zu nerven:
Auf http://www.Itchpoopzkid.de befinden sich unten links verschiedene Logos, die sich wenn man das Browserfenster verkleinert mit hoch schieben, bis sie an der anderen Tabelle anstoßen. Wie macht man so etwas (Bitte mit Beispiel, damits such ich verstehe :) )? Dies wäre nämlich für meinen Zweck sehr gut, da ich diese homepage auch mit diversen Logos bestattet sein wird.

DANKE!!

Edit: Achso falls du dich fragen solltest, was mir dieses min hight bringt: Je nach Inhalt des linken Inhaltsdivs, kann man diese dann theoretisch verändern :)?
 
Zuletzt bearbeitet:
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;
        text-align:center;
        }
#wrap {
        width:960px;
        position:relative;
        margin:0 auto;
        height:100%;
        text-align:left;
}
#head {
        position:absolute;
        left:0;
        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:100px;
        width:960px;
        left:0;
        background:url(pfad/zur/grafik.gif) repeat-y;
        }

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

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

#maincontent iframe {
        width:565px;
        height:100%;
        float:right;
        display:inline;
        margin-right:59px;
        border:1px solid #000;
        overflow-x:hidden;
        }

#logo {
        position:absolute;
        bottom:50px;
        left:0;
        width:960px;
        height:50px;
        background:#ddd;
        z-index:5;
        }

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

</head>
<body>

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

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück