Scholieren.com forum - [Opera + CSS] Body margin (eddie? :D)

Scholieren.com forum (https://forum.scholieren.com/index.php)

- Software & Hardware (https://forum.scholieren.com/forumdisplay.php?f=20)

- - [Opera + CSS] Body margin (eddie? :D) (https://forum.scholieren.com/showthread.php?t=198231)

M@rco

27-08-2002 13:51

[Opera + CSS] Body margin (eddie? :D)

Ik probeer in Opera (6.05) de body margin op 0 te zetten. En wel met het volgende stukje CSS:

Code:

Body {

        background-color: #000000;

        margin: 0px;

}

't Werkt alleen niet echt. De pagina blijft op de één of andere manier een marge behouden, aan alle kanten.

Bug in Opera? Iemand enig idee?

Triloxigen

27-08-2002 13:57

margin: 0px 0px 0px 0px;

boven, rechts, onder, links [als ik het goed heb]

eddie

27-08-2002 13:57

Citaat:

topcititel

(eddie? :D)

LOL :D

Maar wat wil je setten?
margin is de ruimte tussen 2 HTML elementen.
padding is de ruimte tussen het element en de inhoud van het element (de tekst meestal).

[edit]
Wel vreemd dat Mozilla 1.0 het fout doet

[flame-mode]
Van IE had ik niet anders verwacht ;) :p
[/flame-mode]

[/edit]

eddie

27-08-2002 14:04

Citaat:

McLaren schreef:
margin: 0px 0px 0px 0px;

boven, rechts, onder, links [als ik het goed heb]

Dit mag niks uitmaken, omdat alle waardes gelijk zijn. Het is gewoon een verkorte schrijfwijze.

* margin: 0px

staat gelijk aan
* margin: 0px 0px

staat gelijk aan
* margin: 0px 0px 0px

staat gelijk aan
* margin: 0px 0px 0px 0px

staat gelijk aan
* margin-top: 0px;
* margin-right: 0px;
* margin-bottom: 0px;
* margin-left: 0px;

Triloxigen

27-08-2002 14:13

ok, weer wat geleerd ;)

M@rco

27-08-2002 14:18

Citaat:

eddie schreef:

LOL :D

Maar wat wil je setten?
margin is de ruimte tussen 2 HTML elementen.
padding is de ruimte tussen het element en de inhoud van het element (de tekst meestal).

Ik wil dus de ruimte tussen zeg maar de inhoud van de pagina, en de randen van het browservenster setten. Wat je ook zo kan doen:

<body topmargin="0" leftmargin="0" etc.>

M@rco

27-08-2002 14:21

Ehh.. laat maar, 't werkt ineens :)

Had, na jou post gelezen te hebben, ook de padding op 0px gezet. En, krijg nou wat, het werkt :D

Bedankt :p

eddie

27-08-2002 14:30

Ik zie geen verschil in Opera en IE hoor (behalve dat Opera om de stukken links een rechter en onder rand heeft).

Om de ruimte tussen de rand van de body en de inhoud op 0px te zetten, moet je dus padding gebruiken:

Code:

<style type="text/css">

body{ padding: 0px; }

</style>

Kijk anders voor meer informatie bij het box-model :)

Wil je wat 'grappigs' zien met padding en margin, copy+paste de volgende code eens

Code:

<style type="text/css">

html

{ 

 background-color: blue; 

 padding: 5em;

}



body 

{

 background-color: #000000;

 margin: 0px;

 color: #FFFFFF;

 padding: 5em;

 border: 1px solid yellow;

}



span

{

 margin: 0px; 

 padding: 0px; 

 border: 1px solid red; 

 background-color: white; 

 color: black

}

</style>

en zet tussen je body-tags even

Code:

<span>Blablabla testje blablabal</span>

Kijk vervolgens naar het verschil in IE en Moz en Opera :)

eddie

27-08-2002 14:32

Citaat:

McLaren schreef:
ok, weer wat geleerd ;)

Beter nog:

Citaat:

The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

http://www.w3.org/TR/REC-CSS2/box.ht...ing-properties

M@rco

27-08-2002 14:37

Citaat:

eddie schreef:
Ik zie geen verschil in Opera en IE hoor (behalve dat Opera om de stukken links een rechter en onder rand heeft).

Nope.. ik zei al, met die padding op 0px doet 'ie het wel :)

Citaat:

eddie schreef:
Wil je wat 'grappigs' zien met padding en margin, copy+paste de volgende code eens

Code:

<style type="text/css"> html { background-color: blue; padding: 5em; } body { background-color: #000000; margin: 0px; color: #FFFFFF; padding: 5em; border: 1px solid yellow; } span { margin: 0px; padding: 0px; border: 1px solid red; background-color: white; color: black } </style>

en zet tussen je body-tags even

Code:

<span>Blablabla testje blablabal</span>

Kijk vervolgens naar het verschil in IE en Moz en Opera :)

Ik zie weinig verschil :confused:

eddie

27-08-2002 14:39

Citaat:

M@rco schreef:
Ehh.. laat maar, 't werkt ineens :)

Had, na jou post gelezen te hebben, ook de padding op 0px gezet. En, krijg nou wat, het werkt :D

Bedankt :p

Jaaaa, zeg! Zit ik een heel verhaal te typen... :D :p

eddie

27-08-2002 14:40

Citaat:

M@rco schreef:

Ik zie weinig verschil :confused:

Tussen Mozilla en Opera is geen verschil.

Echter als je het opent in IE 6 wel :) (wel de <style..> in de head zetten he :p ;))

M@rco

27-08-2002 14:42

Citaat:

eddie schreef:

Tussen Mozilla en Opera is geen verschil.

Echter als je het opent in IE 6 wel :) (wel de <style..> in de head zetten he :p ;))

Jaja, ik kan wel íets hoor :p

Oke, is er zijn wat kleine verschillen... maar als je daar niet op let zie je het nauwelijks :)

eddie

27-08-2002 14:45

Citaat:

M@rco schreef:
Jaja, ik kan wel íets hoor :p

Oke, is er zijn wat kleine verschillen... maar als je daar niet op let zie je het nauwelijks :)

:confused:

http://www.erikdokter.nl/test/test13.html

M@rco

27-08-2002 14:47

Citaat:

eddie schreef:

:confused:

http://www.erikdokter.nl/test/test13.html

o_O

Bij mij zag 'ie er net echt anders uit... naja, zal wel.. dit ziet er wel vaag uit :)

eddie

27-08-2002 14:56

Citaat:

eddie schreef:

:confused:

http://www.erikdokter.nl/test/test13.html

Ik heb hem even ietsjes veranderd om padding beter te laten zien. :)

Wat moet je zien:
Een fel-groene rand om de 'canvas' (het html element).
5em daarbinnen (padding: 5em) bevindt zich het body element.
Het body element is zwart met een gele rand.
5em binnen de body zit het div element (body-> padding: 5em).
Het div element heeft een margin van 5em. Daardoor is de ruimte tussen de body en div 10em (want de afstand body->inhoud body is 5em (padding: 5em), en aangezien de div in de inhoud staat en deze een margin heeft van 5em, schuift het element nog 5em naar beneden en links), het dubbele van de ruimte tussen html en body (wat dus 5em is).
Het div element is wit met een rode rand en zwarte letters.
De letters sluiten direct aan op de rand (padding: 0px).
De hoogte van de inhoud van het div element is 200px;

De fel-groene rand is dus de rand van het HTML-element. Zie het verschil in Opera en Mozilla :) (en IE, maar die bakt er toch niks van :p ;))

Alle tijden zijn GMT +1. Het is nu 19:02.