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

Kounkountchek · 14 Juin 2007

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:

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 à quel point je suis débutant... :zen:

Anonyme · 14 Juin 2007

J'ai pas encore bien regardé le truc mais met déjà du contenu bidon dans tes div ça change souvent les choses.

momo-fr · 14 Juin 2007

Essai ç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;
}

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

Anonyme · 14 Juin 2007

Perso j'ai fait ç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é sur les marges intérieurs (padding) et le fait que les div prennent par dé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 épurée comme ça.

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

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.

fredmac75 · 14 Juin 2007

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 · 14 Juin 2007

momo-fr a dit:
Essai ça :

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

Exact !

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 ?

En tout cas merci encore ! :up:

Kounkountchek · 14 Juin 2007

gloup gloup a dit:
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:

Anonyme · 14 Juin 2007

Il manque aussi l'encodage dans le head de ta page, voici le fichier sur lequel j'ai travaillé. :zen:

fredmac75 · 14 Juin 2007

Pourquoi 4 divisions alors que 3 suffisent...

Kounkountchek · 14 Juin 2007

fredmac75 a dit:
Pourquoi 4 divisions alors que 3 suffisent...

Effectivement c'est bien vu mais je ne sais pour quelle obscure raison tout va bien quand mes div sont vide:

Mais un décalage apparaît dès que j'insère un paragraphe:

fredmac75 · 15 Juin 2007

j'imagine que lorsque tu insères un texte, tu utilises la balise .... Par défaut cette balise dispose de valeurs (qui diffè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 · 15 Juin 2007

Ah super ! Je ne savais pas que le 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 ?

fredmac75 · 15 Juin 2007

Quel doctype utilises-tu ?

Kounkountchek · 15 Juin 2007

fredmac75 a dit:
Quel doctype utilises-tu ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

fredmac75 · 15 Juin 2007

En bonne logique de conception, c'est ta boite numéro 1 qui devrait avoir une largeur de 790px et une hauteur de 490px.

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

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

Je rappel également qu'une page conçu pour du 800x600 doit avoir une largeur de Box de maximum 780px (sécurit&#233

pour éviter le phénomène des ascenseurs horizontaux.
Dans ton cas, si l'on considère un padding de 5px sur la boite 1, alors ta boite devrait faire 770px de large, soit :
5px + 770px + 5px = 780px de large.

Anonyme · 15 Juin 2007

Kounkountchek a dit:
Ah super ! Je ne savais pas que le 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 ?

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 · 15 Juin 2007

gloup gloup a dit:
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: )

Anonyme · 15 Juin 2007

Kounkountchek a dit:
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: )

Ok alors une autre solution, à 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émentaire via les css.

:rateau:

*en png ça ne devrait pas être très lourd...

Fredmac75 ne me tue pas...

Kounkountchek · 15 Juin 2007

fredmac75 a dit:
En bonne logique de conception, c'est ta boite numé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îte ?

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 (à l'interieur de la boite 1)
moi je mettrai:
790*590
(mais je me trompe puisque j'ai un vide qui se crée

Voilà j'ai fait un schéma:

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

fredmac75 · 15 Juin 2007

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.

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

Membre expert

Anonyme

Invité

Ancien Aveyronnais

Anonyme

Invité

Membre expert

Membre expert

Membre expert

Anonyme

Invité

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Membre expert

Anonyme

Invité

Membre expert

Anonyme

Invité

Membre expert

Membre expert

Sujets similaires