28221 sujets

CSS et mise en forme, CSS3

Petit soucis de div

Bonsoir tout le monde
J'aimerais un peu plus de précision sur mon erreur Smiley lol

J'explique j'ai mis en place mon site comme expliqué dans les tutos
www.blablatons.com

Par contre j'aimerais pouvoir baisser mon texte mais quand j'augmente le margin-top cela ne fais rien pourquoi ?

Code css

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	margin: 0px;
}
.head {
	background-image: url('images/header.jpg');
	height: 210px;
	width: 760px;
	margin-left:10%;
	margin-top:25px;
}
.rubrique {
	position: absolute;
	left:1px;
	background-image: url('images/rubrique.gif');
	width: 140px;
	height: 358px;
	margin-left:6%;
	border: 0px;
	margin-top:55px;
	top: 233px;
}
.centre {
margin-left: 22%; /* on place le bloc centre par rapport à la largeur du bloc gauche */
width: 586px;
margin-top:90px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
.flooter {
	background-image: url('images/flooter.gif');
	margin-left:10%;
	margin-top:5px;
	height:50px;
	width:760px;
}


Code html
<body>
<div class="head"></div>
<div class="rubrique"></div>
<div class="centre">Mon texte que j'ai pas copier [smile]  !</div>
<div class="flooter">
</div>
je comprends pas du tout sous firefox je le vois le margin-top du texte mais sous ie que dalle pourquoi ??? je vois pas du tout Smiley confused Smiley confus Smiley bawling
Bonjour Nathan, pas de panique, on va bien finir par se pencher sur ton problème Smiley cligne
Modifié le 01 Feb 2005 - 11:55
Plusieurs remarques les marges left en % c'est pas top. Si l'effet recherché est le centrage du site mettre un superconteneur avec les marges left et right en % de la même valeur puis mettre l'integralité du site dans ce super conteneur ! Après tu peux définir tes marges en px ce qui est quand même plus simple.

L'image de ton header fait 215px de hauteur (height) pourquoi la border à 210px ? C'est fait exprès ? Mettre 215px dans .head pour le backgrund ou redimensionner l'image source.

Ton problème vient du fait des positionnement. Ton menu (.rubrique) est en position abolue alors que ton conteneur ne l'est pas ! A ce propos je suppose que tu n'en as qu'un par page donc préferer la syntaxe #rubrique et appeler <div id="rubrique">

Plusieurs solutions pour ton problème en fonction de ce que tu veux faire :
- Enlever la position absolue dans ta div rubrique et mettre un float: left. Puis mettre le width du contenu (.centre idem tout a l'heure préferer #centre) en % pour qu'il prenne le reste de la place à droite du menu.
- rajouter un positionnement absolu à .centre et à .flooter mais je te conseil pas trop car sur des résolutions d'écrans faibles le centre passe en dessous de ton menu.
- Tu peux aussi rajouter un position absolute à ton head pour que les marges que tu définis pour ton .centre se détermine par rapport à lui et non par rapport au body (cas du tutoriel il me semble).

Ais je répondu au problème ?
Modifié le 01 Feb 2005 - 12:35
Ho que si Smiley langue

Nan le probléme c'est que ma copine est partis en vacances pendant 13 jours et elle rentre demain, et j'ai pas fais le ménage donc si j'avais le malheur de regarder si il y avait une réponse, j'allais ouvrir Dream et me mettre dessus alors j'ai préféré ne pas aller sur Alsacréations; faire mon ménage et venir ici une fois " presque " tout finis !!! :þ
Gilles j'aplique tout de suite ce que tu m'as dis j'ai pas tout compris, mais en relisant les tutos de Raph' je vais réussir a comprendre la position absolue et le super conteneur Merci encore je viendrais vous dire ce que cela donne

Nathan
En gros si tu veux centrer tout ton site dans ta page du met le CSS suivant :
#superconteneur{
margin: 0 auto 0 auto;
width: 75%
}


et tu présentes ton site de la sorte
<body>
<div id="superconteneur>
tous les éléments de ta page
</div>
</body>


tu auras alors une page qui fera 75% de l'écran et qui sera centrée.
Sujet clos
Aller à