zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Höhe dynamisch anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 04.01.2012, 14:49
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

ich meine das div, das in deinem Bild die Bezeichnung hauptcontainer hat. Diesem div musst du ein Hintergrundbild geben.

gruß,
take
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 04.01.2012, 14:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 12
vaults befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ja das ist doch super, dass sollte machbar sein.
Was sollte das für ein Bild sein, muss ich auf etwas achten wie Länge, Höhe, es könnte ja theoretisch auch eine transparente png oder gif Datei sein.
Arbeite ich dann weiterhin mit Wrapperklassen bzw. was muss sonst noch getan werden?

LG,
Alex
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 04.01.2012, 14:59
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von vaults Beitrag anzeigen
es könnte ja theoretisch auch eine transparente png oder gif Datei sein.
Nein. Du hast Faux Columns nicht verstanden. Das Längere der beiden inneren divs bestimmt die Länge des äußeren divs und damit die Länge des Hintergrundbilds, das auch hinter dem kürzeren inneren div dargestellt wird. Somit entsteht die Illusion die divs wären gleich lang. Ausführliche Erklärung hier.

gruß,
take
Mit Zitat antworten
  #14 (permalink)  
Alt 04.01.2012, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 12
vaults befindet sich auf einem aufstrebenden Ast
Standard

Jetzt habe ich das Prinzip verstanden, dann kann ich damit tatsächlich leider nicht arbeiten.
Der Hintergrund der DIVs soll transparent sein, wichtig bzw. entscheident sind lediglich die Rahmen.
Mit Zitat antworten
  #15 (permalink)  
Alt 04.01.2012, 15:10
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von vaults Beitrag anzeigen
Der Hintergrund der DIVs soll transparent sein, wichtig bzw. entscheident sind lediglich die Rahmen.
Wenn du CSS3 einsetzen kannst, kann man das über multiple backgrounds lösen (Polyfill für IE<9). Ein Bild für den Rahmen links eins für rechts. In der Mitte ist es dann Transparent. Aber normalerweise solltest du doch auch ein png benutzen können, das in der Mitte transparent ist, oder?

gruß,
take
Mit Zitat antworten
  #16 (permalink)  
Alt 04.01.2012, 15:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 12
vaults befindet sich auf einem aufstrebenden Ast
Standard

Für den Hauptcontainer geht das nicht, denn die beiden innen-liegenden haben Margings usw, dazu müsste ich das pixelgenau wissen und es wäre nicht dynamisch.

Wenn ich den Hauptcontainer auf fest 200px Höhe definiere, passt er beide innenliegenden Container auch korrekt an.
Lediglich wenn ich den Hauptcontainer auf 100% setze klappt es nicht.
Mit Zitat antworten
  #17 (permalink)  
Alt 04.01.2012, 15:19
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von vaults Beitrag anzeigen
Lediglich wenn ich den Hauptcontainer auf 100% setze klappt es nicht.
Bei height:100% immer die Frage stellen: 100% von was? Hat das Elternelement keine Höhe (height: auto) hat eine 100%-Höhe nicht den gewünschten Effekt.

gruß,
take
Mit Zitat antworten
  #18 (permalink)  
Alt 04.01.2012, 16:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.01.2012
Beiträge: 12
vaults befindet sich auf einem aufstrebenden Ast
Standard

Moin,

also ich habe es auch noch einmal mit JavaScript versucht, hatte gedacht man könnte die Größe des DIV Containers ermitteln und statisch übergeben, klappt leider auch nicht.

Grund: Für 100% Größe gibt JavaScript "100" wieder
Mit Zitat antworten
  #19 (permalink)  
Alt 04.01.2012, 16:18
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Moin,

Zitat:
Zitat von vaults Beitrag anzeigen
Grund: Für 100% Größe gibt JavaScript "100" wieder
Dann machst du was falsch. Du suchst wahrscheinlich offsetHeight.

gruß,
take
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 04.01.2012, 21:53
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo vaults,

mach das mal so in etwa:

HTML-Code:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>box</title>

<style type="text/css" media="screen">
/* CSS Reset Start */
html, body, div, p { 
   margin: 0; padding: 0; 
}
html {
   height: 101%;
}
body {
   background-color: #E4E6D6;
   color: #000;
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; 
}
/* Aussenbox Container */
#page {
   border: 2px solid #000;
   margin: 1em auto;
   text-align: left; 
   width: 880px;
}
/* Bereich Container */
.container {
   background-color: #fff;
   color: #000;
   overflow: hidden; 
   width: 100%;
}
/* Wrapper für rechte u linke Spalte */
.wrapper {
   background-color: #fff;
   color: #000;
   display: inline; /* Anweisung für IE 5 6 */
   float: left; 
   width: auto;  background-color: white;
}
/* rechte Spalte */
.right {
   background-color: #f5deb3;
   border: 5px solid #72653c;
   color: #000;
   float: left;
   margin: 20px 20px 0px 10px;
   width: 400px;
}
/* linke Spalte */
.left {
   background-color: #ffe135;
   border: 5px solid #72653c;
   color: #000;
   display: inline; /* Anweisung für IE 5 6 */
   float: left;
   margin: 20px 10px 0px 20px;
   width: 400px;
}
/* Anweisung für gleich hohe Spalten */
.wrapper, .right, .left {
   margin-bottom: -16000px;
   padding-bottom: 16000px;
}
#page-footer {
   background-color: #fff;
   color: silver;
   clear: both;
   height: 25px;
}
#page-footer p {
   border-top: 5px solid #72653c;
   width: 410px;
   float: left;
   margin-left: 20px;
}
</style>

</head>
<body>

<div id="page">
<div class="container">
<div class="wrapper">

<!-- Start linke box -->
<div class="left"> 
left... Er hörte leise Schritte
</div>
<!-- geschlossen -->

<!-- Start recht box -->
<div class="right">
Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel. Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel.
</div>
<!-- geschlossen -->

</div> <!-- wrapper geschlossen -->
</div> <!-- Ende InnenContainer der die Spalten zusammen haelt -->

<!-- Start Footer -->
<div id="page-footer"> 
<p>Box.1</p> <p>Box.2</p>
</div>
<!-- Ende Footer -->

</div> <!-- Page AussenContainer geschlossen -->

</body>
</html>
Teste selber nochmal bitte.

Anhang 4458
___________
Gruß,
Roland

Geändert von K.Roland (03.06.2012 um 12:43 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div zentrieren (Höhe und Breite dynamisch) capricorn CSS 2 26.02.2010 13:47
IE div höhe und overflow tintifax CSS 1 06.08.2008 13:38
DIV höhe an Eltern DIV auto anpassen tabtwo CSS 18 18.07.2008 15:26
div höhe an anderen anpassen Jache84 CSS 4 13.02.2007 15:14
höhe eines div tag an ein anderes anpassen ffr CSS 4 09.12.2003 17:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:33 Uhr.