dynamische Anpassung von divs an Fenstergröße @ tutorials.de: Tutorials, Forum & Hilfe

stega · 28.10.09 21:46

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-Code:

/* 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

Maik · 28.10.09 21:49

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

stega · 28.10.09 22:18

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

Maik · 29.10.09 05:34

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;
[b]min-width:1000px;[/b]
}

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

Code :

[color=red]<table></table>
 
 
<!--<link rel="stylesheet" href="style.css" type="text/css">//-->
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/color]
<html>

gegen diese tauschen:

Code :

1
2
3

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

Für den IE6, der min-width nicht unterstützt, notierst du diese Zeilen im Dokumentheader:

HTML-Code:

<!--[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

stega · 29.10.09 09:31

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

Maik · 29.10.09 10:52

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 include() 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

stega · 29.10.09 16:36

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

Maik · 29.10.09 16:52

Ich hab da mal ein kleines Beispiel für dich gestrickt

HTML-Code:

<!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

stega · 29.10.09 16:54

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!

stega · 29.10.09 19:49

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

Maik · 29.10.09 19:58

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

stega · 29.10.09 20:33

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

Maik · 29.10.09 21:54

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

stega · 29.10.09 22:46

ok, ich hab das jetzt mal auf meinen Server geladen : http://is.gd/4Hy6i

wenn du dir das mit FF anschaust klappt alles - mit dem IE aber leider nicht

da siehts gar nicht gut aus

Maik · 30.10.09 05:46

Code :

[COLOR="Red"]<!--<link rel="stylesheet" href="style.css" type="text/css">//-->
[/COLOR]
<!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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dynamische <Divs> => Dynamische Ereignisse!?

2 DIVs nebeneinander innerhalb eines Haupt-DIVs

Anpassung eines Bildes an Fenstergröße

Dynamische Homepagelänge, und flexible Fenstergröße

dynamische Höhe von divs

Stichworte

E-Mail:

Abonnieren Abbestellen