[CSS] Min-height

[Ramasha]

Beste,

Ik dacht laat ik mijn CSS probleem eens hier posten.
Wat is er aan de hand?
Zoals jullie weten pakt IE min-height niet. Met wat gegoogle heb ik daar een work-around voor gevonden:

code:

position : absolute;
min-height : 479px;
height : auto !important;
height : 479px;

Nu ben ik er al weer achter dat mijn min-height nog niet eens werkt.

Ik heb een container div:

code:

 width: 926px;
 height : 746px;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 text-align: left;

met daarin mijn content_content div. Zie ook 1ste code block. Hoe krijg ik het nu zo werkend dat IE + FF beide de content box zover uitrekken als nodig is? (max-height is niet persee nodig).

Wie heeft het verlossende antwoord en helpt mij een stap verder op CSS gebied?

Met vriendelijke groet,

[Not Pingu]

height in IE is hetzelfde als min-height volgens de specs.
Ik doe altijd het volgende, hoewel dit een hack is en in de toekomst (IE7) tot problemen zou kunnen leiden:

Cascading Stylesheet:

_height: 479px; /* met de underscore ervoor parsed IE de waarde, FF niet */
min-height: 479px; /* FF neemt dit mee, IE kent min-height niet */

[Verwijderd]

Je element neemt geen ruimte in omdat je hem uit de flow hebt gehaald (met position: absolute;). Dan wordt er gewoon geen rekening met de grootte en/of positie gehouden.

Oplossing: dus geen position: absolute; gebruiken in dit geval.

@Gunp01nt: conditional comments

[ Voor 7% gewijzigd door Verwijderd op 17-02-2006 18:58 ]

[Ramasha]

Verwijderd schreef op vrijdag 17 februari 2006 @ 18:58:
Je element neemt geen ruimte in omdat je hem uit de flow hebt gehaald (met position: absolute;). Dan wordt er gewoon geen rekening met de grootte en/of positie gehouden.

Oplossing: dus geen position: absolute; gebruiken in dit geval.

@Gunp01nt: conditional comments

Als ik geen absolute gebruik, dan schiet mijn div helemaal naar de linkerbovenhoek en dat moet ik niet hebben. Is het niet mogelijk om height: auto; op 1 of andere manier te gebruiken?

Mij is het iig nog niet gelukt.

[JHS]

IE behandelt height in principe als min-height, dus met een css als

Cascading Stylesheet:

div.class {
  height: 497px; /* IE en FF nemen eerst deze, maar IE behandelt deze als min-height */
  min-height: 497px; /* Alleen FF neemt deze over */
}

zou het moeten werken. Je hebt als ik het goed begrijp nu een content_content div in een content container div. Door nu position: absolute; te doen gaat die content_content div uit de flow, waardoor content_content geen invloed meer heeft op de content div, waardoor die niet meer uitrekt.

edit:

Verwijderd schreef op vrijdag 17 februari 2006 @ 18:58:
@Gunp01nt: conditional comments

In principe lijkt me die hack helemaal niet nodig .

Ramasha schreef op vrijdag 17 februari 2006 @ 19:06:
[...]Als ik geen absolute gebruik, dan schiet mijn div helemaal naar de linkerbovenhoek en dat moet ik niet hebben.

Zorg ervoor dat je positionering dan op een normale relatieve manier plaatsvindt .

[ Voor 34% gewijzigd door JHS op 17-02-2006 19:24 ]

[Verwijderd]

JHS schreef op vrijdag 17 februari 2006 @ 19:16:

In principe lijkt me die hack helemaal niet nodig .

In dit geval helpt het allemaal niks. Maar als je een hack gebruikt, gebruik dan conditional comments, zodat er alleen "gehackt" wordt in de Internet Explorer versies waarvan je weet wat de gevolgen zullen zijn.

Zorg ervoor dat je positionering dan op een normale relatieve manier plaatsvindt .

De normale manier is statisch, niet relatief.

div#class

Om verwarring te voorkomen: het is div.class of div#id.

[Ramasha]

Jah idd ik heb het zo opgebouwd:

Container [
--Divs---
content_border {
}
content_content {
}
]

Die container hoeft niet mee te rekken. Desnoods gaat content_border&content 'daar over heen'. Ik begrijp alleen uit jullie verhaal dat dat dus Niet mogelijk is?

[Verwijderd]

Ramasha schreef op vrijdag 17 februari 2006 @ 19:22:

Die container hoeft niet mee te rekken. Desnoods gaat content_border&content 'daar over heen'. Ik begrijp alleen uit jullie verhaal dat dat dus Niet mogelijk is?

Je hoort mij niet zeggen dat het überhaupt niet mogelijk is. Maar het is in elk geval niet mogelijk als die divs absoluut gepositioneerd zijn.

[ Voor 4% gewijzigd door Verwijderd op 17-02-2006 19:25 ]

[Ramasha]

Hoop dat iemand weet hoe dit op te lossen valt ... ben via google nog op weinig nuttigs gestuit. Ik blijf zoeken.

[JHS]

Verwijderd schreef op vrijdag 17 februari 2006 @ 19:23:
[...] In dit geval helpt het allemaal niks. Maar als je een hack gebruikt, gebruik dan conditional comments, zodat er alleen "gehackt" wordt in de Internet Explorer versies waarvan je weet wat de gevolgen zullen zijn.

Zeer eensch.

[...] De normale manier is statisch, niet relatief.

Ja, maar als je de box op een andere plek zou willen hebben moet je hem verplaatsen, dat kan m.b.v. margins, maar ook met top/left/etc., wat een relatieve manier is om dingen te verplaatsen. Dat position initial: static is, wil niet zeggen dat je als je radicale veranderingen aan de positionering wil dat margins ook de juiste of normale manier is. Ik geef toe dat het waarschijnlijk wel de meestgebruikte is, en in die zin de normale .

[...] Om verwarring te voorkomen: het is div.class of div#id.

Oeps, dom foutje .

Ramasha: Ik begrijp eerlijkgezegd niet (meer) wat je nu precies wilt. Wil je een oprekkende content box hebben die de container om zich heen níét beinvloed, of moet juist ook de container die erom heen zit oprekken?. Waarom wil je hem absoluut positioneren en niet static / relative? Wat is het probleem met de code die wij hebben gegeven?

Als je een div in een container div wil waarbij alleen de inner div oprekt:

HTML:

<div id="container">
  <div id="content">Content</div>
</div>

Cascading Stylesheet:

div#containter {
  /* positionerings- en opmaakzooi */
}
div#content {
  /* positionerings- en opmaakzooi, non-absoluut */
  height: 400px
  min-height: 400px;
}

Als je wil dat de container div níét meerekt: zorg ervoor dat je div#content absoluut positioneert (binnen div#container, visueel gezien). Height en min-height werken daar op dezelfde manier .

En zou je codeblokken en indenting willen gebruiken bij dingen als de pseudocode die je hierboven gaf ? Dat leest prettiger namelijk.

[Ramasha]

Mijn Bedoeling:
De content en border box oprekken zodat hij groot genoeg is voor de content. De rest van de pagina moet gewoon blijven staan zoals hij staat.

Nieuw idee:
Ik heb zitten denken en ben tot het volgende gekomen.
Als ik nu een div maak met de naam content_content_pos en daarin de content_border & content_content div's indoe. Ik positioneer content_content_pos dan absoluut maar de 2 content_* div's positioneer ik relatief. Kan ik dan gebruik maken van min-height en andere aanverwanten?

JHS zegt het in feiten al, maar ik wil beetje zekerheid.

[ Voor 8% gewijzigd door Ramasha op 17-02-2006 19:50 ]

[JHS]

Als ik het goed begrijp is content_content_pos dan een container div voor de andere twee. En ja, dat kan dan op die manier, zie hierboven .

[Ramasha]

JHS schreef op vrijdag 17 februari 2006 @ 19:50:
Als ik het goed begrijp is content_content_pos dan een container div voor de andere twee. En ja, dat kan dan op die manier, zie hierboven .

Goed begrepen ... ok dan heb ik jouw ook goed begrepen.

Plan omgezet in realiteit:

Cascading Stylesheet:

    #content_content_pos {
        position : absolute; 
        top : 156px; 
        width : 476px; 
        left : 225px;
        height : 479px;
    }
        #content_border {
            position : relative; 
            top : 0px; 
            width : 476px; 
            left : 0px;
            _height : 479px;
            min-height : 479px;
            border: 1px solid #d2d2d2;
            background-color:#FFFFFF;
        }
        #content_content {
            font-family: Arial;
            font-style: normal;
            font-size: 12px;
            position : relative;
            text-align:left; 
            top : 0px; 
            width : 473px; 
            left : 0px;
            _height : 478px;
            min-height : 478px;
        }

Wat is nu (weer) het probleem.

Ik krijg nu idd me layout. Alleen aan de onderkant verschijnt nu de text. dat is niet de bedoeling.

HTML:

    <!-- CONTENT -->    
    <div id="content_content_pos">
        <div id="content_border">
        </div>
        <div id="content_content">
        <!--- Hier de Code -->
        </div>
    </div>
    <!-- CONTENT -->

En een voorbeeldje:

[ Voor 66% gewijzigd door Ramasha op 17-02-2006 20:07 ]

[Ramasha]

Probleem is opgelost. Ik moest de content_content div in de content_border div stoppen