28172 sujets

CSS et mise en forme, CSS3

[Resolu] Centrer bloc div (Internet Explorer et Firefox)

Bonjour à tous,

Voila je galère depuis plusieurs jours sur le codage de mon site en essayant de centrer une balise div.

Tout d'abord, voici mon code html suivi du code css :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<!--Header-->
    
<div id="header">
            <div class="left-gryphon">
            </div>
			<div class="right-gryphon">
            </div>
            <div class="whc-logo">  
            </div>     
</div>
   
<div id="menu">
            <a class="Accueil" href="#"></a>
            <a class="Forum" href="#"></a>
            <a class="Tutoriaux" href="#"></a>
			<a class="Tops" href="#"></a>
            
            <div id="identi">
            </div>
            <div class="identi_gauche">
            </div>
            <input type="text" id="txt1" class="zone_texte" value="Mot de passe"/>
            <input type="text" id="txt2" class="zone_texte" value="Identifiant"/>
</div>	

<!-- Corps -->

	<div class="conteneur">
		<div class="border">
			<div class="contourGauche">
            	<div class="contourDroite">
                
                	<!-- Contenu -->
                
            	</div>
            </div>
		</div>   
	</div>   
        
<div class="footer">

</div>


</body>
</html>





body {
background-color:#000;

}

#header {
background: url(./images/header_dessous.jpg) repeat-x ;
position:absolute;
height:95px;
min-width:900px;
top:0;
left:0;
width:100%;
z-index:1000;
}

.left-gryphon {
background:transparent url(./images/decors_gauche.png) no-repeat scroll 0 0;
position:absolute;
height:85px;
width:231px;
top:0;
left:0;
z-index:2000;
}

.right-gryphon {
background:transparent url(./images/decors_droite.png) no-repeat scroll 0 0;
position:absolute;
height:85px;
width:231px;
top:0;
right:0;
z-index:2000;
}


.whc-logo {
background:transparent url(./images/logo_whc.png) no-repeat scroll 0 0;
margin-left: auto;
  margin-right: auto;
  width: 399px;
height:77px;
z-index:3000;
}


#menu {
	background: url(./images/fond_menu.png) repeat-x ;
	position:absolute;
	height:35px;
	min-width:900px;
	width:100%;
	left:0;
	top:90px;
	z-index:4000;
}


.Accueil {
	background:transparent url(./images/accueil.png) no-repeat scroll 0 0;
	position:absolute;
	margin-left:10px;
	margin-top:5px;
	width:91px;
	height:26px;
}

.Forum {
	background:transparent url(./images/forum.png) no-repeat scroll 0 0;
	position:absolute;
	margin-left:140px;
	margin-top:5px;
	width:86px;
	height:26px;
}

.Tutoriaux {
	background:transparent url(./images/tutoriaux.png) no-repeat scroll 0 0;
	position:absolute;
	margin-left:270px;
	margin-top:5px;
	width:146px;
	height:25px;
}

.Tops {
	background:transparent url(./images/tops.png) no-repeat scroll 0 0;
	position:absolute;
	margin-left:460px;
	margin-top:5px;
	width:113px;
	height:27px;
}


#identi{
	background: url(./images/search-bg.gif) repeat-x;
	position:absolute;
	height:34px;
	width:300px;
	right:0;
}

.identi_gauche {
	position:absolute;
	background:url(./images/search-left.gif) no-repeat scroll 0 0;
	height:34px;
	width:20px;
	right:295px;
}

#txt2 {
	position:absolute;
	width:120px;
	right:170px;
	top:7px;
}

#txt1 {
	position:absolute;
	width:120px;
	right:40px;
	top:7px;
}

.conteneur {
	position: relative; /* on positionne le conteneur */
  margin-left: auto;
  margin-right: auto;
  width: 880px;
  text-align: left;
}

.border {
	background:transparent url(./images/light.jpg) repeat scroll 0 0;
	height:100%;
}


Donc vous avez le résultat ici : http://matt112.free.fr/WHCSite/

Je voudrais avoir une colonne (100% en hauteur), d'une largeur d'environ 900px et centrée sur la page.
Dans mon code, j'ai fait un conteneur puis mon image que je veux répéter dans la colonne, un peu expliqué sur le site.
J'ai essayé plein d'autres choses mais n'y fait.

J'ai donc besoin de votre aide et de vos conseils Smiley smile
Merci beaucoup.
Modifié par Matt112 (21 Feb 2009 - 16:28)
Bonjour,

Rien qu'à lire le code CSS, on peut constater un abus de positionnement absolu caractérisé. Mon avis est que 1) il va falloir apprendre le positionnement CSS et 2) refaire au moins tout le positionnement.

Donc, lectures indispensables (dans l'ordre):
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html

Edit: autant pour moi, je n'avais pas vu la page et je constate que certaines utilisations faites du positionnement absolu sont plutôt correctes. Ceci dit les lectures ci-dessus restent conseillées. Smiley cligne

Pour ton conteneur, il y a plusieurs choses à voir. Déjà, pour la largeur et le centrage horizontal, ce que tu as fait est juste et marche très bien ici. Le seul problème, c'est que tu ne vois pas ton bloc, pour deux raisons, à savoir:
1. Étant totalement dépourvu de contenu, il a une hauteur de 0px. (C'est ce que confirme Firebug, dans l'onget «Apparence» de la partie «HTML». Firebug, un outil que tu utilises bien entendu et que tu maitrises. Smiley smile )
2. Même si tu lui donnes une hauteur arbitraire, disons 300px, il n'apparait pas complètement. En effet, tout le haut de ce bloc est caché par ton en-tête. Je te laisse deviner pourquoi (ce qui devrait être facile grâce aux lectures rappelées ci-dessus).
Modifié par Florent V. (20 Feb 2009 - 23:40)
Bonjour et merci pour tes conseils.

J'ai lu les articles que tu m'as conseillé (j'aurais surement dû commencer par ça, toutes mes excuses...) et j'ai changé quelques petites choses.
Bon j'utilise peut être trop de div et trop de positionnement absolu mais au moins ça marche et ça me parait plutôt clair.

Merci encore.
A bientôt.
Sujet clos
Aller à