Bordure et css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Bordure et css

Siron

Bonjour.

J'aimerais savoir comment les bordures influences la taille d'un div, sont elles placées a l'interieur d'un div ?
Ou à l'extérieur ?

J'aimerais aussi savoir si c'est normal que opera interprete différemment la position des bordures que firefox (à un pixel près, ce qui crée des décallage dans le design global de la page) ?

Merci pour les réponses.
Siron

Publicité

oualad

Bonsoir,
De peur de dire une bêtise à cette heure tardive, pour tout savoir sur les CSS, je ne peux que te conseiller quelques sites:
alsacreations
Openweb
petit sute sympa

et il y en a d'autres bien entendu.

---------------
Un forum étant un lieu d'échange, j'accepte les MP uniquement pour les rendez-vous coquins - Imac PPC G3 350Mhz Mac OS X 10.3.9

Cheinz

Oui, IE et FF n'interprètes pas de la même facon les bordures malheureusement, apparement FF ne compte pas la bordure comme faisant partie de la taille d'un div alors qu'IE oui... concernant Opera je ne sais pas, je ne me suis pas penché sur la question.

Siron

Opera ne semble pa savoir la même politique que firefox avec les bordures.

J'ai regardé tes sites Oualad (en survol), mais je n'ais pas trouvé d'indication au sujet des bordures.

Si quelqu'un sait si le wc3 compte ou non les bordures dans la taille des div, il peut intervenir sur ce topic [:aztechxx]

0x90

→

\o_

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.

Siron

Intervenir constructivement.

0x90

→

http://www.quirksmode.org/css/box.html

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.

Siron

Cool merci.

Citation :

* Not surprisingly, Explorer keeps to the Microsoft model, with the interesting exception of Explorer 4 on Mac, which uses the W3C model. Netscape 4 and Opera 7 also use the traditional model.
* Mozilla, Konqueror/Safari and Opera 6 and lower follow W3C's standards.
* Surprisingly, Omniweb follows Mozilla's padding-box variation.
* iCab's box model is hard to fathom, it seems to follow the W3C model, but its boxes are slightly too short.

W3c : La taille d'un div n'inclu pas les bordures et padding.

(je trouve ça aussi mal foutu)

Firefox respecte le w3c.
Opera non.

C'est bizzare, mais moi j'aurais dit l'inverse, que opera respectait et pas firefox, parceque dans opera mes box avec bordure sont un peu plus grande que sous firefox (ce qui m'inssite à dire que c'est opera qui ne compte pas les bordures dans la taille, et que donc c'est normal qu'il décale de 2 pixels).

0x90

→

( au premier abord, ca parait mal foutu, et y'a des cas ou ca te permet des trucs assez pratiques... et des cas ou ca t'emmerde, mais les 2 ont leur utilité )

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.

Siron

J'ai lu que dans les css3 ont pourra choisir (soit dans 20 ans :-).

Message édité par Siron le 30-04-2006 à 11:10:34

Publicité

Siron

C'est : box-sizing:border-box;

Il est mis que opera et ie de mac le supporte déja.

Firefox lui supporte un truc comme -moz-box-sizing:border-box;

J'ai essayé avec content et border pour box-sizing, et sous opera ça ne change rien (c'est sous opera que tout est décalé).

gatsu35

Blablaté par Harko

Box Model Microsoft != Box Model W3C

Imaginons un élément (comprenons par là <div>texte/div> ou bien <a href="#">mon contenu</a> ) comme une boite.

Une boite étant composée de plusieurs épaisseurs : en partant du plus à l'extrême vers le plus intérieur :
Margin : Marge à l'extérieur de la bordure de la boite
Broder : bordure de la boite
Padding : marge interne de la boite
Contenu : Contenu de la boite (texte)

Dans le box model microsoft, lorsque l'on applique une largeur sur un élément la largeur s'applique sur l'extérieur des bordures
Donc si ton bloc fait : padding :20px, border:10px; width:200px
il fera exactement 200px de large

Dans le box model W3C, lorsque l'on applique une largeur sur un élément la largeur s'applique sur l'extérieur des bordures
ton bloc ne fera pas 200px de large mais :
200 + 2x20 + 2x10 = 260px, car la largeur s'applique sur le contenu.

Pour que IE se comporte de la même manière que Firefox (et autres navigateurs respectueux des normes)
il faut utiliser un doctype avec URL

ex :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

et un ptit article : http://www.alistapart.com/stories/doctype/

Siron

Merci pour ces precisions.

Message édité par Siron le 30-04-2006 à 16:56:52

FORUM HardWare.fr

Programmation

HTML/CSS

Bordure et css

Sujets relatifs
image flottante: espace entre bordure et image	Problème de bordure de tableau CSS sous Internet Explorer
Bordure Flash	Block avec bordure complete en CSS
[PHP][GD][Résolu] Création de bordure en fondu	bordure juste pour qq cases d'un tableau
Tableaux HTML et bordure ?	bordure d'une image (mouse hover)
Bordure avec ballon de soccer	Avoir une bordure de 1px dans un tableau ?
Plus de sujets relatifs à : Bordure et css

Page générée en 0.034 secondes