Un peu d'aide HTML/CSS svp...

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
Bonjour,
je suis en train de faire un site et j'ai déjà un problème qui m'échappe :siffle: Mais très honnêtement je pense que je fais une erreur basique... :rateau:
coda-20070614-191701.jpg


J'ai mon div "b3" qui reste collé en haut de son parent "b2" alors qu'il a un margin-top: 5px
Par rapport à l'image le "b3" c'est le gris et le "b2" le blanc qui est en dessous.
Je met le html qui correspond:
Bloc de code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
	<title>Arantzeta</title>
	<link rel="stylesheet" media="screen" type="text/css" title="design site" href="style.css" />
	</head>

	<body>
		<div id="b1">
		
			<div id="b2">
			
				<div id="b3">	
				</div>
				
				<div id="b4">	
				</div>
			
			</div>

		</div>
	</body>
</html>
Et le CSS qui va avec:
Bloc de code:
body
{
	background-color: #E0D484;
}

#b1
{
	position: absolute;
	width: 800px;
	height: 600px;
	margin-left: -400px;
	margin-top: -300px;
	top: 50&#37;;
	left: 50%;
	background-color: #003333;
}

#b2
{
	width: 700px;
	height: 530px;
	margin-top: 35px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}

#b3
{	
	width: 690px;
	height: 465px;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCCCCC;
}

#b4
{
	width: 690px;
	height: 50px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	background-color: #CB9933;
}
Merci de bien vouloir me montrer &#224; quel point je suis d&#233;butant... :zen:
 

momo-fr

Ancien Aveyronnais
Club MacG
4 Octobre 2004
4 725
1 851
Bordeaux (33)
www.momofr.net
Essai &#231;a :
Bloc de code:
body
{
	background-color: #E0D484;
}

#b1
{
	position: absolute;
	width: 800px;
	height: 600px;
	margin-left: -400px;
	margin-top: -300px;
	top: 50&#37;;
	left: 50%;
	background-color: #003333;
}

#b2
{
	width: 690px;
	height: 520px;
	background-color: #FFFFFF;
	margin: 35px auto 0px;
	padding: 5px;
}

#b3
{	
	width: 690px;
	height: 465px;
	margin-right: auto;
	margin-left: auto;
	background-color: #CCCCCC;
}

#b4
{
	width: 690px;
	height: 50px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	background-color: #CB9933;
}
&#199;a devrait correspondre &#224; ce que tu veux faire je crois... :p
 
A

Anonyme

Invité
Perso j'ai fait &#231;a :
Bloc de code:
        body
        {
            background-color: #E0D484;
            margin: 0 0;
            padding: 0 0;
        }

        #b1
        {
            position: absolute;
            width: 700px;
            height: 565px;
            margin-left: -400px;
            margin-top: -300px;
            top: 50&#37;;
            left: 50%;
            background-color: #003333;
            padding: 35px 50px 0px 50px;
        }

        #b2
        {
            height: 530px;
            background-color: #FFFFFF;
            padding: 5px 5px 0px 5px;
        }

        #b3
        {    
            height: 465px;
            background-color: #CCCCCC;
            margin-top: -15px;
        }

        #b4
        {
            height: 50px;
            margin-top: 5px;
            background-color: #CB9933;
        }
J'ai jou&#233; sur les marges int&#233;rieurs (padding) et le fait que les div prennent par d&#233;faut 100% la largeur du contenant. Attention le padding s'ajoutant au total, il faut le soustraire de la largeur ou de la hauteur du div. La feuille de style est plus &#233;pur&#233;e comme &#231;a. ;)

P.S. : j'ai un peu trich&#233; pour le b3 avec une marge n&#233;gative, j'ai pas trop compris pourquoi elle se d&#233;doublait sans.

P.S. bis : tu devrais donner un nom plus parlant &#224; tes divs comme : #page, #cadre, #contenu, #pied. On s'y retrouve tout de suite beaucoup mieux. ;)
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
Zut... même pas eu le temps de parler de la fusion des marges...
Bloc de code:
body{...}
b1{[INDENT] border:20px solid #033;
background:#FFF;
padding:5px;
[/INDENT]}

b2{[INDENT] background-color:#CCC;
margin-bottom:5px;
[/INDENT]}

b3{[INDENT] background-color:#cb9933;
[/INDENT]}
 

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
Essai ça :

Ça devrait correspondre à ce que tu veux faire je crois... :p

Exact ! :D
Merci ! (t'auras droit à un coup de boule dès que je pourrais t'en donner ! :siffle:
Donc si j'ai bien compris tu met une marge interne dans le parent (padding) plutôt qu'une marge externe dans le bloc "enfant"... Mais tu sais pourquoi ça ne marchait pas ma technique ? :confused:
En tout cas merci encore ! :up:
 

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
P.S. bis : tu devrais donner un nom plus parlant à tes divs comme : #page, #cadre, #contenu, #pied. On s'y retrouve tout de suite beaucoup mieux. ;)

Oui en fait c'est pas mon code ça, c'etait juste pour vous montrer où ça marchait pas. ;)
Merci pour les conseils je vais regarder tout ça ! :zen:
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
j'imagine que lorsque tu ins&#232;res un texte, tu utilises la balise <p>...</p>. Par d&#233;faut cette balise dispose de valeurs (qui diff&#232;rent selon les navigateurs). Aussi tu devrais essayer d'ajouter le code suivant dans ta css

Bloc de code:
p {
[INDENT]margin:0;
padding:0;[/INDENT]
}
;)
 

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
Ah super ! Je ne savais pas que le <p></p> comprenait des valeurs de marges ! :rateau:
Ah vraiment merci beaucoup, et si j'abuse pas je ne comprends pas quelquechose:
J'ai un div de 500px de haut et un padding de 5px, donc un div "enfant" aura une hauteur de 490px maximum non? Pourtant si je met un div de 490 px il y a un espace supplementaire (un vide quoi) qui ne se comble que si je met une hauteur de 500px à l'élément "enfant".
Comment ça se fait ? :confused:

paddding-20070615-112726.jpg
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
En bonne logique de conception, c'est ta boite num&#233;ro 1 qui devrait avoir une largeur de 790px et une hauteur de 490px.

5px + 790 + 5px = 800px
5px + 490 + 5px = 500px

En l'&#233;tat ta boite 1 fait donc (si l'on applique le mod&#232;le de bo&#238;te standard) :
5px + 800px +5px = 810px
5px + 500px +5px = 510px
Ce qui explique la pr&#233;sence d'un vide horizontal et verticale de 10px

Je rappel &#233;galement qu'une page con&#231;u pour du 800x600 doit avoir une largeur de Box de maximum 780px (s&#233;curit&#233;) pour &#233;viter le ph&#233;nom&#232;ne des ascenseurs horizontaux.
Dans ton cas, si l'on consid&#232;re un padding de 5px sur la boite 1, alors ta boite devrait faire 770px de large, soit :
5px + 770px + 5px = 780px de large. :)
 
A

Anonyme

Invité
Ah super ! Je ne savais pas que le <p></p> comprenait des valeurs de marges ! :rateau:
Ah vraiment merci beaucoup, et si j'abuse pas je ne comprends pas quelquechose:
J'ai un div de 500px de haut et un padding de 5px, donc un div "enfant" aura une hauteur de 490px maximum non? Pourtant si je met un div de 490 px il y a un espace supplementaire (un vide quoi) qui ne se comble que si je met une hauteur de 500px à l'élément "enfant".
Comment ça se fait ? :confused:

D'un côté tu te casses la tête pour rien : il suffit d'avoir un seul div jaune avec un border de 5px rouge.
 

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
D'un côté tu te casses la tête pour rien : il suffit d'avoir un seul div jaune avec un border de 5px rouge.

Non parce qu'en fait le bord rouge est un padding d'un div qui a egalement un border (effectivement on ne le voit pas sur le schéma mais c'était pour que ce soit plus clair... :rateau: )
 
A

Anonyme

Invité
Non parce qu'en fait le bord rouge est un padding d'un div qui a egalement un border (effectivement on ne le voit pas sur le sch&#233;ma mais c'&#233;tait pour que ce soit plus clair... :rateau: )

Ok alors une autre solution, &#224; la hussarde, toujours avec un seul div : tu met le fond et le border rouge dans une image de fond* (comme tes dimensions sont fixes), et le border suppl&#233;mentaire via les css. ;) :rateau:

*en png &#231;a ne devrait pas &#234;tre tr&#232;s lourd... ;)

Fredmac75 ne me tue pas... ;) :siffle:
 

Kounkountchek

Membre d’élite
Club MacG
24 Juillet 2004
1 160
113
44
2^6
En bonne logique de conception, c'est ta boite num&#233;ro 1 qui devrait avoir une largeur de 790px et une hauteur de 490px.

5px + 790 + 5px = 800px
5px + 490 + 5px = 500px

Attends, tu veux dire que le padding n'est pas compris dans la largeur/hauteur de la bo&#238;te ? :eek:
Non je pense que j'ai pas compris ce que tu veux dire (pardon :rose: )

Boite 1
800 * 600 avec padding de 5px

Boite 2 (&#224; l'interieur de la boite 1)
moi je mettrai:
790*590
(mais je me trompe puisque j'ai un vide qui se cr&#233;e

Voil&#224; j'ai fait un sch&#233;ma:
marges-20070615-122435.jpg


Le height c'est quel cadre ? C'est bien le bleu non ?
 

fredmac75

Membre d’élite
Club MacG
14 Juillet 2003
1 415
127
50
Le Mans
www.km-spirit.com
j'ai modifié ma réponse précédente pour être plus clair.
Mais je vais me répéter.
En modèle de conception de boîte standard la taille du padding diminue la taille de l'espace disponible au contenu.

Si je veux une boite de 780px avec un padding à 20px alors le width de cette boite devra être à 740 px (20px + 740px + 20px = 780px) .

De plus toute modification ultérieures de ce padding influera sur la valeur du width...
Il faudra augmenter la valeur du width si le padding diminue. Si le padding augmente alors il faudra diminuer la valeur du width.

;)