Discussion :

[Raay]

Bonjour,
Je suis en difficulté pour donner le style que je désire a mes pages en css :
Supposons que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="premier_div">
  <div id="second_div">
     blabla
  </div>
</div>

Voila mon premier_div a une largeur variable, et j'aimerai que mon second_div prenne toute la largeur de premier_div sans la dépasser.

Jusque la c'est bon, il suffit d'un width:100%;

Mais si je veux que dans second_div j'ai une margin-right:5px par exemple, ben mon second_div va dépasser de 5px par rapport a mon premier_div, car ils sont comptés en PLUS des 100%
Ceci n'est pas vrai apparemment dans IE, qui comprend les margin/border/padding comme faisant partie du width.

Mais comment je dois faire sans trop magouiller pour obtenir un width:100% INCLUANT un border/padding/margin sous firefox et autres navigateurs respectant bien le css ?

Merci

[francis m]

essaie width:auto;

[Raay]

width:auto; ne me semble pas marcher : ca a l'air d'etre la valeur par défaut, c'est à dire que le width s'ajuste a la valeur minimum qui permet d'afficher sans contrainte l'élément.

Idées ?

ps: Merci de ta réponse francis

[franculo_caoulene]

Salut,

Hum... ça ne conviendrait pas ça?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#premier_div {
margin: 0px 5px 0px 0px;
padding: 0px;
}
 
#second_div {
margin: 0;
padding: 0;
}

[Raay]

Non je n'aurai pas du prendre margin comme exemple, plutot mettons padding, ou on aura pas le meme résultat en le mettant dans premier_div et second_div.
Car ceci est un exemple je cherche une réponse générale qui permet de résoudre le probleme sans toucher a premier_div, juste en changeant le style de second_div pour pouvoir l'ajuster à la taille du premier_div

[franculo_caoulene]

SI j'ai bien compris. Tu veux que premier_div fasse toute la largeur d'écran et deuxieme_div fasse toute la largeur de premier_div moins 5px à droite.
Si c'est ça mon code fonctionne. Si c'est pas ça... bah j'ai pas compris et faudrait me réexpliquer.

[Raay]

Ce n'est pas vraiment que tu ais mal compris, disons que la c'était surtout un exemple, j'ai pris la sitution la plus simple a expliquer, mais mon premier_div ne fait pas forcément la largeur de l'écran il peut faire n'importe quelle taille (pour l'exemple je l'ai fixé a l'écran), et je ne veux pas impérativement avoir 5px a droite c'est aussi un exemple pour dire que je veux pouvoir insérer des padding/margin/border tout en gardant au total 100% du width de premier_div.

Je n'ai pas essayé ton code mais a vue de nez ca me parait bizarre, je m'explique : le margin sur le premier_div n'influera pas sur les éléments imbriqués dans second_div, mais plutot sur les éléments qui sont placés a coté, je pense que margin-right:5px sur le premier_div a pour effet de laisser un espace de 5px entre le premier_div et l'élément qui suivra (donc pas le second_div vu que lui est inclus). Corrige moi si je me trompe. Et si je met un padding-right a la place, le fait est que mon second_div prendra toute la largeur MOINS 5px comme tu dis, hors je recherche plutot le moyen qu'il prenne 100%de la largeur, et que le padding se situe a l'interieur du second_div de préférence.

Mais a propos de ton style du second_div, le fait de mettre margin:0 et padding:0 étire t il le div au dimension de l'élément parent ?

[Raay]

En fait concretement j'aimerai ensuite mettre un background-color dans le second_div qui prenne la totalité de la largeur de premier_div (c'est pourquoi entre autre je ne veux pas mettre de padding sur le premier_div lui meme), mais en ayant le texte de second_div séparé des bords de 5px, donc un padding:5px.
J'espere qu'en illustrant vous y voyez plus clair et qu'on pourra plus précisemment m'aider

[franculo_caoulene]

Bon déjà à la base je me suis trompé j'ai inversé par rapport à mon test!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#div1 {
	margin: 0;
	padding: 0; 
	border: 1px solid red;
}
#div2 {
	margin: 0px 5px 0px 0px;
	padding: 0; 
	border: 1px solid green;
}

Oui le fait de ne pas mettre de taille, de définir le marges intérieures (padding) et extérieures (margin) à 0 font que div1 fera toute la largeur de ton écran et que le contenu de div1 collera la bordure.
Ensuite on définit la marge extérieure droite à 5px et tout le reste à 0 fera que ton contenu collera les bordure de div2 et sera écarté de 5px vers l'intérieur par rapport à div1.
Je pense que ça répond à ta question mais j'ai du mal à lire tes descriptions donc pas sûr.

[Raay]

Ah oui déja c'est plus pareil ^^. A part le fait que c'est plutot a padding que je mettrais les 5px et non pas a margin.
Sinon c'ets vrai que ca a l'air de fonctionner.

En fait si je ne m'en suis pas apercu c'est car mon vrai probleme semble venir de IE qui gere les hover un peu trop a son gout, déja qu'il ne reconnait que les hover sur les a:hover.
En fait j'ai voulu étirer un 'a' (donc une balise lien) a un div, pour que le hover fonctionne sur tout le div et non pas que sur le texte du A. Donc le A s'étire bien (vérifiable avec une bordure ou background) mais le hover ne s'active que sur le texte a moins que je ne précise expresséemnt width 100%, auquel cas ca me fait dépaser sous firefox et autre si je précise un padding

[franculo_caoulene]

Il faut passer le lien en block, <a> est à la base un élément in-line. puis comme tout block il faut redéfinir les marges.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
a {
display: block;
margin: 0;
paddin: 0;
background-color: white;
}
a:hover {
background-color: red;
}

La prochaine fois, expose ton problème directement

[Raay]

Oui j'ai oublié de préciser, mais c'est ce que je fais je met un display:block dans le a, mais j'ai toujours le probleme que je dis, uniquement sur IE.
Désolé de ne pas exposer le probleme directement, c'est pour faciliter la reflexion et la compréhension que je simplifie, et également pour avoir une réponse générale au possible (pas qui marcherait juste pour le probleme présent) :p

Comme je dis le <a> semble bien s'étirer, ce que je peux vérifier avec un border ou un background-color, mais le hover lui ne s'applique qu'au texte lui meme. Je vais d'ailleurs copier mon code pour bien se rendre compte (c'est surtout la fin qui importe) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#menu { /* le menu */
	margin:0;
	padding:0;
	border:0;
	width: 100%;
	display:block;
	height:22px;
	list-style-type:none;
	font-size:110%;
	font-weight:bold;
	position:relative;
	z-index:100;
}
 
#menu li { /* les items du menu */
/* Le width des items est calculé dans entete.php lors de la création du menu par rapport aux nombre d'items du menu */
	display:block;
	float:left;
	margin:0;
	padding:0;
	border:0;
}
 
#menu li a { /* les liens des items du menu*/
	display: block;
	margin:0;
	padding:4px;
	text-align:center;
	text-decoration:none;
	color:black;
	border: 1px solid red;
/*	background-color:yellow;*/
}
 
#menu li a:hover {  /* le survol des liens et des items du menu */
	background-color:#D4DDF3;
}

Voici mon css associé a un menu de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul id="menu">
  <li><a href="">Mon menu</a></li>
  ...
</ul>

Avec ca le résultat que j'ai actuellement est donc un menu d'un seul élément (<li>) ici, qui prend la totalité de la largeur. Le <a> prend la totalité de la largeur du <li> a en juger par la bordure rouge et la couleur jaune si on retire les commentaires. Le texte/lien "Mon menu" est centré par rapport au <li>.
Cependant sur IE, le hover ne s'active que au passage du curseur sur le texte "mon menu" et non pas sur tout le <LI>, et le background-color du hover ne s'applique que au texte.

Par contre sur firefox ca marche impec

[franculo_caoulene]

Je bloque et j'ai pas le temps immédiatement... c'est étrange car j'ai fait exactement la même chose il y a quelques jours, j'ai reporté ce que j'ai fait sur ton simple exemple (#menu et #déconnexion) et ça ne fonctionne pas. Je n'arrive pas à voir ce que j'ai fait pour que ça fonctionne .

Pour t'aider mon menu http://bb.public.free.fr/css/

[SpaceFrog]

tout est une question de dimensions hors tout et de différence d'interprétation des bordures et marges ...
le lien est un article qui explique le problème et propose des "hacks"

[Raay]

Ahhh merci bien pour vos 2 liens, je vais avoir de quoi faire
Déja j'ai trouvé une solution de premier temps, de mettre ma margin en % comme ca je met par exemple 3% de margin left et 97% de width, et on retombe sur nos pattes, mais je vais étudier de plus pres pour voir ce qu'il y a savoir sur la (les) chose