18041 sujets

Questions générales et questions de débutants

[resolu] Largeur totale et dimension de boite en poucentage

bjr, un petit probleme de dimension qui doit etre tout bete
j'ai une page qui occupe toute la largeur avec cette structure


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
<div id="maincontent">
	<div class="artrub">


une css


body{ width: 100%; margin: 0; padding: 0; border: 0; }
#maincontent{ position: absolute; top: 216px; width: 100%; height: 100%; visibility: visible; margin: 0; padding: 0 203px; }
.artrub { width: 100%; height: 150px; margin: 20px; border: dotted 1px teal; }


mon probleme est lie a la dimension de main qui prend la largeur du body + les valeurs de padding, comment regler ca quand on est en pourcentage ?


je voulais que "artrub" occupe toute la largeur mais il depend de main .. et donc
ca merde

le "box model hack" peut il s'appliquer quand on a des valeurs en %

merci de vos lumières

jacques
Modifié par jacques (20 Feb 2007 - 12:21)
Salut,

Merci d'éditer ton message pour utiliser les balises [ code] et [ /code].

Par ailleurs, je constate que tu n'as jamais répondu à certaines personnes qui avaient essayé de t'apporter des solutions aux sujets que tu as postés sur le forum. Merci de prendre un moment pour le faire ou au moins pour les marquer comme [Résolus], ça sera un peu plus motivant pour te répondre.
Modifié par Julien Royer (19 Feb 2007 - 17:41)
ok je vais vérifier ce [code]




pour les réponses tu as raison c'est un manque de courtoisie, j'avais abandonné cette piste et reconstruit la page sur un autre mode

mea culpa
jacques a écrit :
pour les réponses tu as raison c'est un manque de courtoisie, j'avais abandonné cette piste et reconstruit la page sur un autre mode
Merci ! Smiley smile
Re,

Extrait de ta feuille de style :

#maincontent{ background-color: #39f; background-image: url(images/fondfleur_17.jpg); background-repeat: no-repeat; background-position: center bottom; position: absolute; top: 216px; [b]width: 100%;[/b] height: 100%; visibility: visible; margin: 0; [b]padding: 0 200px;[/b] }


Ce qui donne 100% + 200px + 200px Smiley cligne
je suis bien d'accord avec toi c'est justement mon probleme

comment peut on donner des marges qui ne s'additionnent pas a cette valeur de 100 % ?
Une div prend toute la largeur de son contenant, donc normalement si son contenant a une largeur de 100%, si tu mets un padding de 200px a la boite tu n'a pas besoin de specifier la largeur de ta div pour que celle-si fasse 100% - 400px.
La solution est peut-être: ne pas mettre de largeur.
Sauf que l'élément est positionné en absolute.

Bon, jacques, ta feuille de style est quand même assez risquée je trouve, l'utilisation tous azimut des position absolute c'est assez chaud en général Smiley cligne

néanmoins par rapport à la question :

comment donner une marge interne en pixel à un élément dimensionné en pourcentage dans le cadre du modèle de boite standard ?

La solution css est très simple. On ne donne pas de marges internes à l'élément mais des marges externes à ses enfants directs non dimensionnés

Pour les navigateurs implémentant le sélecteur d'enfant direct > c'est très simple :

#maincontent {
width:100%;
padding:0;
}
#maincontent>* {
margin-left:200px;
margin-right:200px;
}


C'est parfait pour Firefox, Opera, IE7 mais inopérant pour IE6 et versions précedentes.

Dans ce cas il peut être utile de vérifier si on peut lister les enfants directs. Dans ton cas c'est très simple puisque tu as fais un doublage de conteneur <div> (c'est pas terrible, au passage si cela reste en l'état). Il n'y a donc qu'un seul enfant direct à #maincontent et c'est le <div class="liste-articles">

Donc

#maincontent {
width:100%;
padding:0;
}
#maincontent .liste-articles {
margin-left:200px;
margin-right:200px;
}


devrait suffire pour le document tel que tu l'as mis en ligne.


A propos de cette affaire de la gestion des marges internes :
http://www.clb56.fr/test_css/fluide_et_padding/
Christian Le Bouler a écrit :
Bon, jacques, ta feuille de style est quand même assez risquée je trouve, l'utilisation tous azimut des position absolute c'est assez chaud en général Smiley cligne

Oui. Le nombre d'éléments positionnés en absolu, en l'état, devrait plutôt avoisiner les zéro. Smiley cligne
Ne pas positionner en absolu quand ça n'est pas directement utile et nécessaire.
Florent V. a écrit :

Oui. Le nombre d'éléments positionnés en absolu, en l'état, devrait plutôt avoisiner les zéro. Smiley cligne


Oui, c'est mon problème en général. Quand ce qui est proposé est trop n'importe quoi, que ce soit pour le html ou pour les css, alors j'ai beaucoup de mal a y regarder de près... Aucune méchanceté là dedans, ça m'épuise à l'avance c'est tout.
merci christian, pour ta réponse pertinente et pédagogique

j'ai bien conscience de ne pas être expert en css .. c'est vrai que parfois quand je tombe sur une difficulté, j'ai tendance à sortir mon opinel N°12 pour arranger tout ça .. alors c'est vrai c'est pas très joli joli cette sculpture html habille en css pas ajusté...je vais voir si je peux revoir ma copie et essayer de ne plus t'épuiser christian Smiley confus
En l'occurrence la plupart des éléments devraient pouvoir être positionnés en statique (positionnement en flux normal, quoi). Plus globalement, les trois quarts des propriétés CSS pour ton en-tête sont inutiles.

Attention également aux hacks CSS. Ils sont très fortement déconseillés, et on aura intérêt à utiliser les commentaires conditionnels (voir la FAQ du forum sur ces deux points : hacks et commentaires conditionnels).
Sujet clos
Aller à