[css] invloed op hoogte

[Verwijderd]

Situatie:

Een element wat 100% hoogte moet pakken, maar met een marge van 10px. Het w3 boxmodel gooit roet in het eten.

Namelijk, de hoogte is meer als 100% bij het gebruik van margin:10px;

#box{
position:relative;
height:100%;
margin:10px;
}

Namelijk, de hoogte is meer als 100% bij het gebruik van padding:10px; op een wrapper, welke alsnog een hoogte van 100% krijgt gedefinieerd anders krijgt het element erin ook niet de volledige 100% hoogte.

#box{
position:relative;
height:100%;
padding:10px;
}
#box div{
position:relative;
height:100%;
}

Ook de body is niet anders, en ook daar zorgt een padding icm 100% height voor een overflow.

De enige manieren om dit op te lossen, zijn:

1) top:10px; en bottom:10px te gebruiken. Maar dit wordt niet crossbrowser ondersteund.
2) het boxmodel voor Mozilla aan te passen naar een padding-box, zodat de padding niet meer wordt opgeteld bij de 100% height, en IE6 op quirks te plaatsen zodat het IE boxmodel wordt gebruikt overeenkomstig met padding-box.

Die laatste is een beetje jammer, daar je extensions moet gaan gebruiken, quirks mode nog daar gelaten.

Zijn er toch mogelijkheden anders dan deze om controle te krijgen over een element vullende hoogte met marge of padding?

[mullah]

misschien negatieve padding?

dus margin: 10px; padding -10px;

maar dan ga je ook meteen weer een browser/box-model moeras in

[BtM909]

mullah schreef op 19 september 2004 @ 21:33:
misschien negatieve padding?

dus margin: 10px; padding -10px;

maar dan ga je ook meteen weer een browser/box-model moeras in

Ik dacht eerder aan de padding in te stellen op je parent element?

[Verwijderd]

'-moz-box-sizing' is gebaseerd op een (door Opera, MacIE en wellicht Safari ondersteunde) CSS3 property, 'box-sizing'. Dus als je die gebruikt, je zet <!-- foo --> voor de DOCTYPE, ben je klaar.

Negatieve 'padding' is niet mogelijk, trouwens.

[Verwijderd]

BtM909 schreef op 19 september 2004 @ 21:36:
[...]

Ik dacht eerder aan de padding in te stellen op je parent element?

En dat parent element moet natuurlijk ook een height van 100% krijgen om het element daarin de ruimte te geven. Resultaat is dat het parent element ook te groot wordt.

Maar ik heb wel vaker dit soort zaken. Stel je bijvoorbeeld de Outlook balk voor die je personal folders, etc. in een treeview toont. Deze is 100% hoog. Maar, nu wil ik een functie aanroepen om te zoeken, deze wil ik daarboven tonen. Dan krijg je dus 2 elementen onder elkaar. Het 1ste element 20px hoog met daarin een zoek input, en daaronder dezelfde treeview alleen iets korter. Eventjes een margin-top:20px zetten lukt niet, want die wordt opgeteld bij die 100% hoogte, met als gevolg dat je treeview parent element uit beeld loopt.

Met een relative div in de breedte is het heel normaal dat je een margin-left kunt zetten en dat de width gewoon in beeld blijft alleen dan de beschikbare ruimte. In de hoogte is er echt verdomd lastig te controleren.

[Verwijderd]

Verwijderd schreef op 19 september 2004 @ 21:42:
'-moz-box-sizing' is gebaseerd op een (door Opera, MacIE en wellicht Safari ondersteunde) CSS3 property, 'box-sizing'. Dus als je die gebruikt, je zet <!-- foo --> voor de DOCTYPE, ben je klaar.

Negatieve 'padding' is niet mogelijk, trouwens.

Maar stel bijvoorbeeld een situatie voor, ik heb een element 100% hoog, 250px breed, absolute gepositioneerd op 0px top en left. Nu wil ik boven dit element een element tonen van 20px hoog, dit betekend dat het onderliggende element 20px margin top krijgt, of de top wordt gewijzigd naar 20px.

Beide oplossingen resulteren in een element wat uit beeld loopt. Ongeacht marges of padding.

[ Voor 6% gewijzigd door Verwijderd op 19-09-2004 21:46 ]

[Verwijderd]

Ik zie niet in waarom dat het geval zou zijn. Maar je hebt gelijk dat 'box-sizing' geen opties heeft voor 'margin'.

Een 'padding-top' van 20px gebruiken is niet mogelijk, begrijp ik? Als enige opties zou ik dan nog zien een beetje scripten en hopen dat het W3C een 'calc()' value erdoor ramt aangezien het een enorm "gekloot" is op dit moment.

[Verwijderd]

Ik zal wel ff een krabbeltje maken.. dat maakt het wat overzichtelijker. Het punt is dat er geen mogelijkheden zijn om een element ruimtevullend te maken in de hoogte, net zoals dat wel het geval is met een relative div in de breedte.

Als je margin of wat dan ook toevoegt, dan valt het element buiten de canvas. Ik zocht een manier om het element zelf de ruimte welke overblijft te laten innemen.

Wat wel helpt is een wrapper om 1, met een padding top, en 1 relative positioneren ipv absolute. Maar dan heb je voor bijv. Mozilla alsnog de padding-box nodig om die padding-top niet op te tellen bij de 100% hoogte van de wrapper. Al met al gewoon kut

Min of meer is de vraagstelling ook, hoe krijg ik het voor elkaar om een element 100% hoog te laten worden, met de mogelijkheid om marges en paddings vertical te gebruiken zonder dat het element uit beeld verdwijnt, of uberhaupt te lang wordt.

[ Voor 111% gewijzigd door Verwijderd op 19-09-2004 23:09 ]

[mullah]

dan moet je dus elementen gaan nesten?
dus 3 binnen in 1 zetten, inplaats van onafhankelijk ervan.

ik roep gewoon maar dingen die als eerste in mij opkomen hoor (ook die negatieve padding) en heb het dus niet getest of nagekeken of het ook kan

Oh, zie net dat je inderdaad geen zin had in nesten...

[ Voor 10% gewijzigd door mullah op 20-09-2004 00:15 . Reden: moet beter lezen.. grrr.. ]

[mullah]

en een scriptoplossing? iets als

code:

<script type="text/javascript">
function getStyleProperty (id, styleProp) {
    var x = document.getElementById(id);
    if (window.getComputedStyle) {
        var y = window.getComputedStyle(x,null).getPropertyValue(styleProp);
    }
    else if (x.currentStyle) {
        var y = eval('x.currentStyle.' + styleProp + '.value');
    }
    return y;
}

function setStyleProperty (id, style, value) {
    if (document.getElementById) {
        eval("document.getElementById(id).style."+style+" = \"" + value + "\"");
    }
    else {
        if (document.layers) {
            document.layers[id].style = value;
        }
        else {
            if (document.all) {
                eval("document.all." + id + ".style."+style+" = \"" + value + "\"");
            }
        }
    }
}

var newheight = getStyleProperty ("1", "height") - 20;
setStyleProperty ("1", "height", newheight);
</script>

zou dat kunnen werken

Je moet vermoedelijk de waarde van newheight nog wat crossbrowserproof maken, omdat er meestal een string met "px" wordt gegeven door getStyleProperty

scriptjes met dank aan http://www.quirksmode.org/

[drm]

Het meest eenvoudige lijkt mij wat BtM909 al zegt: een wrappertje om '1' heen die de padding ter hoogte van '3' heeft aan de bovenkant. En nou ga je vast vertellen dat '3' geen vaste hoogte heeft ...

In dat geval zou ik toch gewoon gaan nesten.

[T-MOB]

Mmzz.. de frustratie is herkenbaar, nou ja een height: fill; oid zou mij ook welkom zijn iig. Maar doorgaans zijn de problemen wel op te lossen, juist omdat je de 100% height vanuit een visueel aspect wenst: het is mooier dat 4 kolommen even hoog zijn dan dat ze verschillen in hoogte. Je hebt haast nooit dat 100% height met padding écht nodig is voor de content.

Wat ik wel zeggen is dat je voor dit soort lay-outs vaak wat truukjes in de ring moet gooien. Faux columns zijn daar een bekend voorbeeld van, maar er zijn veel meer trucs om visuele zaken op de juiste plek te krijgen. Als je hier over een daadwerkelijk ontwerp aan het discussiëren bent wil ik best de uitdaging aangaan om te kijken of ik het voor mekaar kan krijgen.

Gaat het om een theorische disussie dan kan ik niet anders dan het met je eens zijn dat het een gemis is in CSS. Maargoed de idee dat je mark-up en style altijd volledig kunt scheiden heb ik al een tijdje laten varen...

[Verwijderd]

Het punt is dat je niet kunt nesten. Ik kan wel een extra element eromheen plaatsen om boxmodel issues te omzeilen, maar ik schiet er niets mee op omdat beide elementen een height moeten meekrijgen om daadwerkelijk 100% hoog te worden. Het resultaat is dat je alsnog een padding of margin gaat combineren met een height = boxmodel gezeik.

En javascript voor zulke zaken wil ik liever niet hebben, layouttechnische zaken moeten imo gewoon door de css worden afgehandeld tenzij je runtime een wijziging maakt.

[ Voor 21% gewijzigd door Verwijderd op 20-09-2004 08:59 ]

[drm]

Gordijnstok:
Het punt is dat je niet kunt nesten.

Je kunt element '3' toch in element '2' zetten, i.p.v. "eroverheen"?

Ik kan wel een extra element eromheen plaatsen om boxmodel issues te omzeilen, maar ik schiet er niets mee op omdat beide elementen een height moeten meekrijgen om daadwerkelijk 100% hoog te worden. Het resultaat is dat je alsnog een padding of margin gaat combineren met een height = boxmodel gezeik.

Ja, daar heb je idd gelijk in.

[Verwijderd]

Niet als ik element 2 een border wil geven En dus element 3 en 2 los van elkaar wil tonen.

[mullah]

*kuch* tables *kuch*

[BtM909]

T-MOB schreef op 20 september 2004 @ 01:24:
Mmzz.. de frustratie is herkenbaar, nou ja een height: fill; oid zou mij ook welkom zijn iig. Maar doorgaans zijn de problemen wel op te lossen, juist omdat je de 100% height vanuit een visueel aspect wenst: het is mooier dat 4 kolommen even hoog zijn dan dat ze verschillen in hoogte. Je hebt haast nooit dat 100% height met padding écht nodig is voor de content.

Grappig dat je dingen benadrukt als visueel, (geen) verschil in hoogte vs content.. Jouw verhaal is juist een pro voor zo'n optie in CSS

[T-MOB]

BtM909 schreef op 20 september 2004 @ 10:52:
[...]

Grappig dat je dingen benadrukt als visueel, (geen) verschil in hoogte vs content.. Jouw verhaal is juist een pro voor zo'n optie in CSS

Ik ben ook pro zo'n optie

Maar stel dat ie er komt dan duurt het nog minimaal tot Longhorn (IE7) voordat je er wat mee kunt. Voorlopig zul je er dus omheen moeten werken met allerhande truuks. Hoe je het (evt) op kan lossen is afhankelijk van je hele design. Een universele methode om "100% - margin & padding"-effect te krijgen is er nou eenmaal niet...

[BtM909]

T-MOB schreef op 20 september 2004 @ 11:05:
[...]


Ik ben ook pro zo'n optie

Maar stel dat ie er komt dan duurt het nog minimaal tot Longhorn (IE7) voordat je er wat mee kunt. Voorlopig zul je er dus omheen moeten werken met allerhande truuks. Hoe je het (evt) op kan lossen is afhankelijk van je hele design. Een universele methode om "100% - margin & padding"-effect te krijgen is er nou eenmaal niet...

Je moet het verhaal eigenlijk omdraaien. Stel dat hij te laat komt (en niet meer in IE7 gezet kan worden), dan blijf je de komende x jaren nog steeds met hacks klooien