28173 sujets

CSS et mise en forme, CSS3

Width="100%" height="100%" plus une bordure ou un

Bonjour à tous,

J'ai une question dont je cherche une réponse depuis des années mais dont je n'ai jamais trouvé de solution.

Vu qu'un style width=100% ne concerne que le contenu, et que les bordures, le padding, et le margin prennent de la place EN PLUS, comment faire ce qui suit qui fonctionne très bien avec IE mais pas avec firefox qui agandie la page... Normal vu qu'un div en 100% plus des border ou du padding ou du margin est plus grands que 100%.

Mon fichier .html :

<? xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Page sans titre</title>
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div style="width: 100%; height: 100%; border: dotted 4px #ff0000; margin: 0px; padding: 10px;">
bla bla
</div>
</body>
</html>

Ma feuille se style test.css :

html { width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { width: 100%; height: 100%; margin: 10px; padding: 0px; }


Merci de me dire comment faire donc des div qui prenne toute la taille de son conteneur avec un padding, des margin ou des border en plus, sans que ça empiètre sur la taille du conteneur.

Merci d'avance !
Modifié par Anksunamon (06 Sep 2006 - 11:00)
Salut.

Il suffit de ne pas imposer la taille des blocs. Par défaut, ils vont occuper tout l'espace disponible, c'est-à-dire 100% moins les marges, padding & bordures ...

Merci de baliser ton code avec [ code] & [ /code] (sans les espaces), pour le rendre plus lisible Smiley cligne
Bonjour Anksunamon et bienvenue Smiley smile

Merci de vous vouloir prendre connaissance des quelques règles en vigueur sur le forum (comme c'est demandé lors de l'inscription Smiley cligne ), notamment concernant la mise en forme des messages

Concernant la question, il existe une propriété CSS3, box-sizing (-moz-box-sizing pour mozilla), qui permet justement de choisir si les bordures ou le padding doivent être compris ou non dans la largeur ou hauteur.
C'est pris en charge par la plupart des navigateurs sauf par IE win (et de toute façon on ne peut pas être sûr que cette propriété sera conservée).

Sinon il est également possible de dimensionner l'élément qui est en position:absolute; via les propriétés top, right, bottom, left (impossible toutefois avec IE<7). Toutes ces propriétés avec pour valeur 0 donnerait le résultat que tu souhaites.

Petite précision: la présence du prologue XML empêche IE 6 d'interpréter le document en mode de conformité avec les standards et donc de calculer la dimension des boites comme il convient
Modifié par Alan (05 Sep 2006 - 10:11)
Salut,

comme le suggère Sopo, la meilleure solution est encore de ne pas dimensioner l'élément à mon avis.

Il est souvent plus pratique et interessant de ne pas dimenssioner un élément en même temps qu'on lui donne margin/padding/border pour éviter les différences d'interprétation entre IE et les autres qui n'ont pas le même modèle de boite

En passant, tu sembles utiliser xHTML 1.1, es-tu certain de bien l'utiliser et d'en avoir besoin ?
Ce lien t'aidera à répondre à ces 2 questions :
http://forum.alsacreations.com/faq/#item42

(S'il s'avère (comme je le pense) que tu n'as pas à utiliser xHTML1.1, tu pourras passer à un autre doctype plus adapté et supprimer le prologue XML qui lui aussi t'ajoutera des différences entre IE et les autres.
Comment choisir son Doctype

++
Merci pour vos réponses.

Cependant, si je ne met pas de taille pour les div, okn ça prends toute la largeur. Mais si je met un tableau dans le dernier div qui prends forcément en taille 100% avec un textbox en 100% à l'intérieur, ça explose tout...

Je suis bien obligé de mettre une taille de 100% pour le tableaux pour qu'il prenne toute la largeur, mais ça passe par-dessus le div. Donc comment faire?
Salut.

Puisque tu as apparement un problème précis, pourrais-tu soumettre un exemple en ligne ou au moins le code html & css d'une page représentative ?
Sujet clos
Aller à