Simpele HTML, lastig vraagje...

vrijdag 10 februari 2012 18:14

Acties:

0 Henk 'm!

Topicstarter

Mijn verticale margin wordt berekend uit de horizontale breedte van het parent element.

Wie kan mij uitleggen waarom dat zo is en hoe ik dit kan oplossen?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
        body{
            margin: 0px;
            }
        
        #divFoto{
            width: 320px;
            height: 100px;
            }
            
        .foto{
            width: 266px;
            height: 80px;
            margin: 10%;
            }
        </style>
    </head>
    <body>
        <div id="divFoto">
            <img class="foto" src="http://tweakimg.net/g/if/v2/breadcrumb/award_2011_v2.png" alt="test">
        </div>
    </body>
</html>

Of deze link: http://dl.dropbox.com/u/4896683/test.html

Zoals te zien is, is de margin 10% wat 32px verticaal zou moeten opleveren en 10px horizontaal, echter is de horizontale margin in de browser ook 32px. Maar waarom?

Alvast bedankt.

EDIT:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

http://www.w3.org/TR/CSS2/box.html

Dat is me nooit opgevallen. Heeft er iemand een wijze oplossing voor als de .foto width op auto; staat?

[ Voor 15% gewijzigd door Toettoetdaan op 10-02-2012 19:10 . Reden: Rede gevonden, maar nog geen oplossing. ]

zaterdag 11 februari 2012 14:28

Acties:

0 Henk 'm!

geert1

Allereerst: Het zou helpen als je ook zou uitleggen wat je probeert te bereiken met dit alles. Hoe wil je de foto weergeven?

Margin als percentage wordt berekend aan de hand van het parent-element, zoals je aangeeft. De width van .foto op auto zetten zorgt er dus voor dat de breedte van .foto gelijk zal zijn aan die van de parent (divfoto) min de opgegeven margin. Dit kun je gemakkelijk in de praktijk nagaan. Dus waarvoor zoek je nu precies een oplossing?

Dat een margin als percentage alleen rekening houdt met de breedte, en niet de hoogte, dat wist ik nog niet. Best vreemd dat de spec zo werkt, maar goed om te weten.

[ Voor 7% gewijzigd door geert1 op 11-02-2012 14:29 ]

zondag 12 februari 2012 10:09

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html

Als je wilt dat de marges gelijk zijn en je geeft een enkel percentage op, heeft de renderer geen andere mogelijkheid dan een keuze maken tussen breedte en hoogte natuurlijk. Hij zal de marge op 1 van de twee moeten baseren en ze hebben gekozen voor breedte.

Je zou dit echter praktisch nooit tegen moeten komen, aangezien het nut van procentuele marges (o.a. door de gedachtenkronkel die het teweegbrengt) ver te zoeken is.

Wil je het percentage op hoogte en breedte anders, gebruik dan margin: 10% 20% shorthand bijvoorbeeld.

[ Voor 10% gewijzigd door Bosmonster op 12-02-2012 10:13 ]

donderdag 8 maart 2012 22:07

Acties:

0 Henk 'm!

Silvos

Open toch maar even een eigen topic

Behalve dat je vraag ook over HTML gaat zie ik 't nut van dit topic schoppen niet...

[ Voor 94% gewijzigd door RobIII op 08-03-2012 22:09 ]

donderdag 8 maart 2012 22:18

Acties:

0 Henk 'm!

Huismus

Silvos, daarvoor heb je een server-side programmataal nodig (PHP bijvoorbeeld).
PHP is veel gebruikt en gratis, grote kans dat je hoster het ondersteunt. Kijk hier eens:
http://www.w3schools.com/php/php_get.asp

Het is inderdaad niet zo netjes dat je toettoetdaans thread overneemt, want het heeft niet zoveel met elkaar te maken (al moet ik toegeven, ik werk er aan mee

).

vrijdag 9 maart 2012 13:25

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Het is een gok, maar margin:10% wordt éérst berekend naar pixels (door de browser), en dan pas gerepliceerd naar alle zijden van het element. Het zou me niets verbazen als margin:10% 10% een ander resultaat oplevert.

(disclaimer: niet getest

)

日本！🎌

vrijdag 9 maart 2012 13:40

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html

margin: 10% is gewoon een shorthand voor margin: 10% 10% 10% 10%, dus dat zou geen effect moeten hebben

vrijdag 9 maart 2012 20:33

Acties:

0 Henk 'm!

T-MOB

Ik vind het gedrag eigenlijk volstrekt logisch als je kijkt naar de normale flow van een document. Daarin komen block-level elementen normaliter nooit naast elkaar, maar wel onder elkaar. De verticale marges tussen de elementen dragen bij aan de hoogte van het parent element. Een <div> vol <p>'s heeft de hoogte van de <p>'s plus hun marge*. Zou de verticale marge worden afgeleid van de parent-hoogte dan heb je dus al gauw complete nonsens. 5 <p>'s met een margin: 10% zou dan een totale verticale marge geven van 100%. Als de <p>'s hoogte 0 hebben kan dit nog (maar hoe hoog moet de <div> dan worden?). Als de <p>'s wel hoogte hebben is het onmogelijk te renderen.

Het probleem van TS lijkt me onoplosbaar met alleen CSS. Misschien dat de CSS3-calc()-functionaliteit ooit wordt uitgebreid zodat je er andere properties in kunt betrekken. Maar als dat er ooit al van komt heb je er nu niets aan.

* margin collaption, padding en borders even daargelaten

Regeren is vooruitschuiven

dinsdag 13 maart 2012 11:21

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Bosmonster schreef op vrijdag 09 maart 2012 @ 13:40:
margin: 10% is gewoon een shorthand voor margin: 10% 10% 10% 10%, dus dat zou geen effect moeten hebben

Dat ligt eraan hoe het berekend wordt. Ik ken de innerlijke werking van een browser niet. Het kan zijn dat ie die 10% éérst omrekent naar de benodige pixels en het dán op iedere zijde toepast. Het kan ook zijn dat ie eerst 10% op iedere zijde toepast en dán pas die procenten in pixels gaat omrekenen.

Als er een verschil tussen horizontaal en verticaal bestaat, is er in deze twee benaderingen een resultaatverschil

日本！🎌

Onderwerpen