28220 sujets

CSS et mise en forme, CSS3

[resolu] Decallage en chaine...

Bonjour

Voilà avant d'aller plus loin je m'arrete parce que j'ai a faire a un decallageuhhh...
Je comprends pourtant pas le probleme. Mon container fait 650 pixel de large avec un padding de 5 pixel.
Je pose mon blochaut dedans. 650-5-5=640 pixel.
ça devrais donc tomber pil poil mais la je me retrouve avec un espace blanc a droite plus grand qu'ailleurs.
Donc voilà je comprends pas parce que si on regarde maintenant les bloc du dessous ils devraient se coller et on a un espace entre eux.
Donc j'en déduit que mon bloc container s'agrandit a + de 650 pixel...
Mais pourquoi ?
Voilà merci de votre aide =)

http://eyesbutterfly.com/doulcefrance-v2/


#container {
	height: 500px;
	width: 650px;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
#blochaut {
	height: 100px;
	width: 640px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #000000;
}


#blocgauche {
	display: inline;
	float: left;
	height: 100px;
	width: 300px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #E75900;
}
#blocdroite {
	display: inline;
	float: right;
	height: 100px;
	width: 340px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #000000;
}

Modifié par supercanard (21 Jun 2005 - 16:51)
J'avou que je comprends plus trop là =/
Le paddin c'est censé être un remplissage interieur... Smiley rolleyes
J'ai essayé d'ajouter au lieu de soustraire mais ça marche encore moins. 9a annule carrément le remplissage.
Par contre la ça a l'air correct mais c'est pas trés logique dans le code :

http://eyesbutterfly.com/depot/Untitled-1.htm


<style type="text/css">
<!--
#bloc1 {
	background-color: #00CCCC;
	padding: 5px;
	height: 300px;
	width: 300px;
	margin-left:auto;
	margin-right:auto;
}
#bloc2 {
	background-color: #FFFFFF;
	padding: 0px;
	height: 300px;
	width: 300px;
	margin:0px;
}
-->
</style>
</head>

<body>
<div id="bloc1">
<div id="bloc2"></div>
</div>


Mes deux blocs font la même taille...
Normalement soit mon bloc 1 devrais faire 300+5 pixel de plus de chaques cotés, soit mon bloc 2 devrais faire 300-5 pixel de chaques cotés....
Mais si je fait comme ça je me retrouve toujours avec le même probleme.
J'ai peut être trouvé. En tous cas ça parrais juste mais n'y a t'il pas une erreur quand même ?

http://eyesbutterfly.com/depot/Untitled-2.htm


#bloc1 {
	background-color: #00CCCC;
	padding-top: 5px;
	padding-left:5px;
	height: 300px;
	width: 300px;
	margin-left:auto;
	margin-right:auto;
}
#bloc2 {
	background-color: #FFFFFF;
	padding: 0px;
	height: 295px;
	width: 295px;
	margin:0px;
}
-->
</style>
</head>

<body>
<div id="bloc1">
<div id="bloc2"></div>
</div>
supercanard a écrit :
J'avou que je comprends plus trop là =/
Le paddin c'est censé être un remplissage interieur.
La propriété width en CSS correspond en fait à la largeur du contenu auquel il faut ajouter padding, border... pour avoir la dimension complète de l'élément (attention IE à une autre définition de width).
Raphaël en parle là.
arggggggg
Je reviens sur le premier exemple. cette fois a l'affichage plus de probleme mais dans le code quelquechose me derange
Mon container fait exactement la même taille que mon blochaut.
Si il y a un padding dans le container logiquement soit le container est en réalité plus grand soit le blochaut plus petit non ?
Mon cerveau fait des noeuds...

Voilà en image : http://eyesbutterfly.com/doulcefrance-v2/


Voilà le code ou on voit bien que quelquechose est pas logique entre le container et le blochaut sur les proprietes witdh



#container {
	height: 500px;
	width: 650px;
	border:0px;
	padding:5px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
#blochaut {
	height: 100px;
	width: 650px;
	border:0px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #000000;
}


#blocgauche {
	display: inline;
	float: left;
	height: 100px;
	width: 300px;
	border:0px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #E75900;
}
#blocdroite {
	display: inline;
	float: right;
	height: 100px;
	width: 345px;
	border:0px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #000000;
}
Bouquin > Tu peux toujours le faire avec les outils "webdevelopper" de Firefox...
Oups, pardon, pour visualiser sous iE, c'est pas le top... Smiley lol
Modifié par Macpom (21 Jun 2005 - 11:42)
euh mais vu que les bloc sont de couleurs c'est peut etre pas utile une bordure ?
En plus ça va encore fausser tout le truc vu qu'il va falloir en tenir compte dans la taille des blocs
Supercanard > C'est ton padding 5px sur ton container qui repousse les bords de ton bloc. C'est l'écart qu'il impose avec son voisinage, si l'on peut dire.
ah ok en fait il repousse vers l'exterieur ????
Donc le paddin doit aller dans les bloc qui sont a l'interrieur du container....
Je vais essayer tout de suite
Non vraiment ça veut pas
Cette fois le bloc blanc prends toute la place....



#bloc1 {
	background-color: #00CCCC;
	padding:0px;
	border:0px;
	height: 300px;
	width: 300px;
	margin-left:auto;
	margin-right:auto;
}
#bloc2 {
	background-color: #FFFFFF;
	padding: 5px;
	border:0px;
	height: 290px;
	width: 290px;
	margin:0px;
}
oula ! nan nan nan ! ton padding repousse les bordures du container ; supprime juste les 5px de padding sur ton "container", et tes deux blocs se superposent. Si tu veux réduire l'utilisation de l'espace à l'intérieur de ton bloc, tu utilises un "margin".

Edit> J'ai fait avec le lien et la css de ton premier message, les multiples couleurs permettant de se repérer.
Edit 2 > Et si tu appliques les réponses d'un problème à l'autre, mais en nous redisant que le problème est sur l'autre, on arrive plus à suivre ...
Modifié par Macpom (21 Jun 2005 - 12:12)
Ouais mais les marge c'est encore plus la bazar.
Une marge sur un bloc va decaller tout le container.... au lieu de se decaller par rapport au container
Hein ? Je suis désolé, je ne pas comprendre : une marge, ce n'est pas une bordure, comme sur cahier de classe. C'est l'écart entre le bord de ta boîte et son contenu.
Edit > En fait, la marge du cahier fait pareil : elle repousse le contenu à l'intérieur de la page ...
Et padding ou margin n'ont pas directement effet sur le bloc qui les contient. S'il y en a un, c'est qu'il y a un problème par ailleurs...
Edit 2 > Mets un peu de texte dans tes boîtes pour comprendre ce qu'il se passe.
Modifié par Macpom (21 Jun 2005 - 12:35)
a l'embrouilleeuhhhhhhhh.
Alors voilà j'essaye avec margin mais visiblement c pas encore ça.
Vous aurrez compris, je cherche a centrer un bloc dans un autre tout en laissant un espace entre les deux.
Voilà mon dernier test avant la rupture de mon cervaux :

http://eyesbutterfly.com/depot/Untitled-2.htm
Donc j'ai encore echoué

mais pourquoi !!!!!!!!!!!!! lol, j'en ai marreuhhhhhhhh Smiley bawling
ques ce qui va pas dans mon code....


html,body {
margin:10px;
}
#bloc1 {
	background-color: #00CCCC;
	padding:0px;
	border:0px;
	height: 300px;
	width: 300px;
	margin-left:auto;
	margin-right:auto;
}
#bloc2 {
	background-color: #FFFFFF;
	padding: 0px;
	border:0px;
	height: 290px;
	width: 290px;
	margin-top:15px;
	margin-left:5px;
}
Je pense que mes problemes viennent d'une mauvaise façon de faire a la base
Peut etre que un container par zone serrais une solution.
Pa rexemple 1 container pour le haut, un pour le menu, un pour le centre ou viennent s'ajouter d'autres blocs...
Effectivement, plutôt que de rechercher un visuel sans contenu, part du contenu que tu veux mettre, ensuite, il sera plus simple de voir comment le présenter...
Sujet clos
Aller à