dynamische Anpassung von divs an Fenstergröße

stega

Erfahrenes Mitglied
Hey,

ich hab ein Problem, an dem ich jetzt den ganzen Tag saß und verzweifle.

Ich habe folgende Plattform: http://kitsky.kreawi.de - die ist aus verschiedenen divs aufgebaut.

Jetzt gibt es das Problem, dass ich die divs alle mit fester Größe definiert habe - aber wenn man einen kleinen Bildschirm (netbook o.ä.) hat, dann wird das Div mit dem Inhalt nach unten verzogen.

Deswegen wollte ich das jetzt alles dynamisch machen.

Ich scheitere an folgenden Dingen:
a) das Header und Footer im IE dynamisch anpassen zu lassen. Der IE kann ja kein min-width oder max-width. mit width:expression hab ich aber keine dynamische Anpassung erreicht.... WIe muss ich das denn definieren, dass er das dynamisch bis zu einem min von 800 und einem max von 990 anpasst?

b) wie passe ich den Inhalts-Div an den Inhalt an? Klar, ich hab es mit width: auto; versucht. Ging auch soweit gut, bis ich dann auf die Unterseiten (z.B: Information) bin und dort den Inhalt als iframe mit width=100% einblenden lassen.
Dann macht mir Firefox nen Strich durch die Rechnung und macht das div-Teil nicht mehr groß, sondern mickrig klein. Wie kann ich denn sagen, dass es breit bleiben soll?

SO, das wären jetzt mal die dringensten Probleme.

Hier noch der Code aus der css-Datei:

HTML:
/* Das div geht über den ganzen Inhalt */
#main_div {
	padding: 20px;
	background-color: #FFFFFF;
	border: 0px solid black;
        margin: 0 auto;
         z-index:1;
	height: 100%;
}

/* dieses Div beinhaltet die linke Navigationsleiste */
#left_div {
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	float: left;
	width: 185px;
	border: 0px solid black;
	}

/* dieses div liegt rechts davon und soll das content-div beinhalten */
#right_div {
	background-color: #FFFFFF;
	border: 0px;
	margin-bottom: 5px;
	min-width: auto;
	float: left;
	min-height: 200px;
	width: auto;
}

/* das content div liegt dann im rechten div und soll sich eben dynamisch anpassen */
#content_div {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	padding: 10px;
	max-width: 790px;
	min-width: 600px;
	float: left;
	min-height: 200px;
       font-family: Tahoma;
       font-size: 10pt;
       width: auto;
	overflow: hidden;
	
}

#header_div {
	background: #547FAA;
	padding: 0px 5px 15px 5px;
	margin: 0px 0px 5px 0px;
	/*width: 990px;*/
	border: 1px solid #000000;
	display: run-in;
	height: 130px;	
	max-width: 990px;
	min-width: 800px;
	width: auto;
	width:expression(document.body.clientWidth < 800? "800px": "auto" && 
		               document.body.clientWidth > 800? "990px": "auto");

}

#footer_div {
	background: #547FAA;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 5px 0px;
	/*width: 990px;*/
	overflow: hidden;
	clear: both;
	border: 1px solid #000000;
	font-size: 8pt;
	color: black;
	text-align: right;
	max-width: 990px;
	min-width: 800px;
	width: auto;
	width:expression(document.body.clientWidth < 800? "800px": "auto" && 
		               document.body.clientWidth > 600? "990px": "auto");
}

Vielen Dank für eure Hilfe!

liebe Grüße
 
Hi,

wonach du suchst, nennt sich Liquid Layout, und beruht auf relativen Maßen.

Die hilfreiche Mindestbreite min-width:1000px muß für den umschliessenden Block #main_div deklariert werden, damit der Block #content_div beim Herunterskalieren der Fenstergröße nicht umbricht.

Wenn du dein HTML-Dokument den Browsern dann noch standardkonform übergibst, interpretieren aus der IE-Familie der IE7 und IE8 sehr wohl die min-width-Eigenschaft. Und für den betagten IE6 gibt's ie7-js :)

mfg Maik
 
Kann ich dann meine style.css nicht einfach anpassen irgendwie? So ganz umbauen wäre eigentl. nur ne Notlösung.

Das Problem ist, dass die Navigation links dauerhaft die Größe behalten soll und nur rechts sich alles anpassen darf. Und dann natürlich noch das Problem, dass das iframe mit drin hängt..... :(
 
Vielleicht ist dir ja schon hiermit geholfen, damit #content_div beim Verkleinern des Viewports nicht mehr nach unten umgebrochen wird:
Code:
#main_div {
background-color:#FFFFFF;
border:0 solid black;
float:none;
height:100%;
margin:0 auto;
padding:20px;
z-index:1;
min-width:1000px;
}


Und damit diese Regelerweiterung vom IE (7 + 8) interpretiert wird, mußt du die rotmarkierten Zeilen:
Code:
<table></table>


<!--<link rel="stylesheet" href="style.css" type="text/css">//-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
gegen diese tauschen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>


Für den IE6, der min-width nicht unterstützt, notierst du diese Zeilen im Dokumentheader:
HTML:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->


mfg Maik
 
hey,

ja das mit dem <table> und so hab ich hier lokal bereits entdeckt und getauscht. War ein kleiner Fehler ;)

ich versteh aber deinen Ansatz nicht: wenn du dem main_div eine minimale Breite von 1000px gibts, sprengt das nicht den Bildschirm dann total? Also sagen wir mit nem Netbook bei 768er Auflösung wrdeman dann ins Leere scrollen müssen? Oder?

Ich werd heute Nachmittag die Sache aber trotzdem mal probieren....
 
Mit der Mindestbreite für den umschliessenden Block #main_div, die sich hier aus der Breite des Headers und Footers ergibt (990px+2*5px), wird lediglich verhindert, dass beim Unterschreiten dieses Maß in der Fensterbreite der DIV-Block #content_div nicht nach unten umgebrochen wird.

Ins Leere würde man hierbei nicht scrollen, sondern die übrigen 232px der Seite erblicken.

Wenn dies aber so nicht erwünscht ist, muß das Stylesheet dahingehend überarbeitet werden, damit abgesehen vom linken Spaltenblock alle übrigen keine feste Breitenangabe mehr besitzen.

Was deine berechtigten Bedenken bzgl. des iFrames betrifft: Da auf dem Server offensichtlich PHP zum Einsatz kommt, liesse sich sein Inhalt mittels [phpf]include[/phpf] direkt im DIV-Block #content_div einbinden, und macht ihn überflüssig.

Aber Achtung: Beim Includen in ein bestehendes Hauptdokument nicht das vollständige HTML-Gerüst der Seite verwenden, sondern nur, was sich zwischen "<body>...</body>" befindet.

mfg Maik
 
hey,

danke für deine Hilfe!

das mit den weiteren 232px bedeutet ja aber, dass es ein weißes Bild gibt, was rechts neben dem Inhalt noch ewig weitergeht. Und wenn ich dann ne kleine Auflösung nehe, dann seh ich ewig nur weiß nach rechts scrollend.... Das will ich vermeiden.

Mit der variablen Variante wäre mir schon mehr geholfen. Ich will Header und Footer, sowie das content_div (innerhalb des rechts_div) dynamisch machen und zwischen min. und max. je nach Bildschirm variiert sehen.

Das Problem mit dem includen der iframes is das, dass ich die Sache als Templates habe und da nur der Inhalt in das content-div geladen wird. Damit ich aber die Formularverarbeitung in der Plattform einfacher habe, habe ich iframes gewählt....

Gibts dafür keine Chance, dass man die sowohl bei FF als auch IE breit bekommt und dynamisch angepasst hat? Entweder es klappte in FF oder in IE - aber nie gleichzeitig :(

wäre nett, wenn du mir weiterhin mit deinen tollen Hilfestellungen auf die Sprüunge helfen kannst, so wird das noch was ;)

grüßle
 
Ich hab da mal ein kleines Beispiel für dich gestrickt :)

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-10-29">
<title>tutorials.de | demo_stega</title>

<style type="text/css">
#wrapper {
width:100%;
min-width:700px;
max-width:1000px;
border:1px solid #000;
}
#header {
height:90px;
background:#eee;
}
#leftCol {
width:200px;
float:left;
}
#rightCol {
margin-left:200px;
}
iframe {
width:100%;
min-width:500px;
max-width:800px;
}
#footer {
clear:left;
height:50px;
background:#eee;
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="leftCol">leftCol</div>
     <div id="rightCol">
          <iframe src="http://google.de"></iframe>
     </div>
     <div id="footer">footer</div>
</div>

</body>
</html>


mfg Maik
 
das sieht als Code schonmal sehr interessant aus. Ich werde es heute Abend testen und dann mich hier nochmal melden!

Danke dir für den Moment ganz herzlich!
 
so da bin ich wieder.

Ich hab jetzt deinen Vorschlag soweit umgesetzt und habe noch 2 Probleme, die aufgetaucht sind - vllt kannst du mir ja da genauso schnell und perfekt weiterhelfen.

Also Nummer 1 betrifft wieder den IE:
Sobald ich aus dem content_div das float:left; rausnehme, macht mir der IE folgendes: er legt das div hinter die linke Navigation und schreibt rechts davon mit dem text los. Es fehlt im rechten Div also die linke "Border"-Begrenzung, die man dann, wenn man auf den längeren Seiten nach unten scrollt unten aus dem Navi-Teil rauskommen sieht.


Screenshot: http://img5.imagebanana.com/view/tvfgxcm/screen_1.jpg

Wie kann ich denn den Fehler im IE ausbügeln?

css-Snippets:
Code:
#main_div {
       width:100%;
       min-width:700px;
       max-width:1000px;
	background-color: #FFFFFF;
	border: 0px solid black;
       margin: 0 auto;
         z-index:1;
	height: 100%;
}

#left_div {
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 5px;
	background-color: #FFFFFF;
	float: left;
	width: 185px;
	border: 0px solid black;
	}

#right_div {
	background-color: #FFFFFF;
	border: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	min-height: 200px;

}

#content_div {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	padding: 10px;
	min-height: 200px;
        font-family: Tahoma;
        font-size: 10pt;
	overflow: hidden;

Header und Footer sind top - danke!

Nummer 2 is folgende:
wenn sich der User einloggt, kommt er zu einem Fenster, wo er Kurse buchen kann. So, das sieht normalerweise so aus:

http://img5.imagebanana.com/view/m5t7eqq/screen_2.jpg

Das css-Snippet dazu ist (alle divs befinden sich weiterhin im Ober-Div "right_div")
Code:
/* Das is das obere, wo die Erklärung drin steht */
#buchung_div_header {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	padding: 5px;
	float: left;
	max-width:  800px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 3px;
	min-height: 80px;
}

/* das is dann das div darunter der linken Seite, die den Kalender enthält */
#buchung_div_left {
	margin-top: 3px;
	margin-right: 0px;
	background-color: #FFFFFF;
	float: left;
	width: 160px;
}

/* das is darunter dann die rechte Seite, die die Übersichten enthält */
#buchung_div_right {
	margin-top: 3px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	border:0px solid black;
	float: left;
	width: 640px;
	min-height:150px;
}

/* das is dasdiv rechts mit den Suchoptionen */
#buchung_div_right_suche {
	background-color: #ffffff;
	padding: 3px;
	border: 1px solid #000000;
	width: 100%;
	float: left;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 50px;
}

/* da wird die Liste drin angezeigt */
#buchung_div_right_ergebnis {
	background-color: #ffffff;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid #000000;
	width: 100%;
	float: left;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 50px;

}

/* das is die Buttonbox drunter */
#buchung_div_right_buttonbox {
	background-color: #ffffff;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid #000000;
	width: 100%;
	float: left;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 25px;

}

Wie bekomme ich die jetzt noch dynamisch angepasst?
Erste Idee war, die width komplett rauszulöschen. Dann isses aber klitzeklein. Außerdem rutschen dann die Boxen, die unten rechtsseitig untereinander stehen sollen nebeneinander. Und bei Verkleinerung des Fensters rutscht der Kalender dann neben den oberen Banner, der über beide unteren divs gehen soll - und der wiederrum rutscht nach unten und wird nicht kleiner.

Kannst du mir da noch kurz helfen - dann hätte ich das Problem endlich gelöst.

Wäre superlieb von dir,

vielen Dank!

grüßle
 

Neue Beiträge

Zurück