✔ dynamische Anpassung von divs an Fenstergröße

Zum ersten Problem: #right_div fehlt der entsprechende linke Außenabstand - vergleich hierzu bitte in meinem Beispiel die Regel für #rightCol.

Wie du in der "Kursbuchung-Seite" den Block #buchung_div_right neben dem Kalender nun mit einer variablen Breite ausstattest, hab ich dir in meinem Beispiel anhand von #rightCol gezeigt.

mfg Maik
 
hey,

danke für deine schnelle Antwort. Also ich hab jetzt anhand deiner Daten in FF alles hinbekommen.

Siehe: http://img5.imagebanana.com/view/2hihyt2d/screen_1.jpg

ABER: als ich dann den InternetExplorer aufgemacht hab, hab ich meinen Augen nicht getraut:
http://img5.imagebanana.com/view/qxzxd56k/screen_2.jpg

Zum einen ignoriert er völlig die min- und max-width Werte (generell bei Footer und header).

Zum Anderen verzieht er das Formular wie im Bild angegeben.

Ich hab die css jetzt so geändert gehabt:

Code: 
// Hier blieb alles gleich
#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-right: 0px;
	margin-bottom: 5px;
	min-height: 200px;

}

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


// hier sind die Buchungs-divs

#buchung_div_header {
	background-color: #FFFFFF;
	border: 1px solid #000000;
	padding: 5px;
	margin-left: 190px;
	max-width: 800px;
	min-width: 610px;
	margin-top: 0px;
	margin-bottom: 5px;
}

#buchung_div_left {
	margin-top: 3px;
	margin-right: 0px;
	background-color: #FFFFFF;
	float: left;
	width: 160px;
}

#buchung_div_right {
	margin-top: 5px;
	margin-left: 180px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	border:0px solid black;
       min-width: 450px;
	min-height: 150 px;
}

#buchung_div_right_suche {
	background-color: #ffffff;
	padding: 3px;
	border: 1px solid #000000;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 50px;
	margin-left: 170px;
	margin-top:5px;
	min-width: 450px;
}

#buchung_div_right_ergebnis {
	background-color: #ffffff;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid #000000;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 50px;
	margin-left: 170px;
        min-width: 450px;

}

#buchung_div_right_buttonbox {
	background-color: #ffffff;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid #000000;
	font-family: Tahoma;
	font-size: 10pt;
	min-height: 25px;
	margin-left: 170px;
	min-width: 450px;

}

//footer und header:
#header_div {
	background: #547FAA;
	padding: 0px 5px 15px 5px;
	margin: 0px 0px 5px 0px;
	border: 1px solid #000000;
	display: run-in;
	height: 130px;	
	min-width: 800px;
}

#footer_div {
	background: #547FAA;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 5px 0px;
	overflow: hidden;
	border: 1px solid #000000;
	font-size: 8pt;
	color: black;
	text-align: right;
	clear:left;
	height: 30px;
   min-width: 800px;

}

und in die Dateien hab ich deinen "If"-Befehl eingefügt.

Würde mich sehr freuen, wenn du mir nochmal helfen würdest. Danke und schönen Abend dir schonmal!

grüßle
 
Was hälst du davon, zur Abwechslung mal deine Aktivitäten in deiner eingangs verlinkten Seite zu aktualisieren, anstatt blos auf irgendwelche Screeshots zu verlinken?

In meinem Beispiel ignoriert die IE-Familie (6 - 8) die min-width und max-width-Angaben überhaupt nicht, lediglich der IE6 belässt es beim Skalieren der Fenstergröße bei der Maximalbreite. Grundsätzlich weiß er aber dank "ie7-js" mit min-width umzugehen. Liegt dann wohl an der Kombination beider Angaben.

Auf der anderen Seite, wenn sich da alles innerhalb von #right_div abspielt, benötigt beispielsweise #buchung_div_header überhaupt keine Angabe zur Mindest- und Maximalbreite, denn ein Block-Element nimmt ohne jegliche Angabe zu seiner Breite automatisch den Raum in der Breite ein, dem ihm sein Elternelement zur Verfügung stellt.

Gleiches gilt in diesem Zusammenhang auch für #header_div und #footer_div, deren Breite sich in meinem Beispiel (#header u. #footer) automatisch dem umschliessenden Block #wrapper angleicht.

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

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


... führt immer noch oder wieder dazu, dass die IE-Familie in den unvorteilhaften "Quirksmodus" schaltet.

mfg Maik
 
danke - jetzt klappts. Ich dachte weil das auskommentiert ist, passt das. Jetzt geht alles. Toll :)

vielen vielen dank für deine Geduld mit mir!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück