28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'alignement de divs :(

Bonjour,

Je suis en train de découper un design extensible, mais ça doit faire une bonne heure que je me casse la tête sur un problème sûrement tout bête Smiley ohwell .

En résumé, j'essaie de faire comme ceci, un design extensible avec une barre de navigation (background qui se répète + logo & menu centre au milieu), une bannière centrée ( background-position:center) et le contenu : http://img525.imageshack.us/img525/4773/cequejeveuxfaire.jpg

Le problème, c'est que j'arrive à faire tenir le logo et le menu (4 images) sur la barre de navigation à l'aide de float right et left (voir code ci dessous) mais ce que je veux faire c'est centrer ces éléments au centre comme sur les 2 cas ci dessus ... J'ai essayé plusieurs balises, j'ai fait pleins de modifications, mais toujours le même problème : j'arrive à centrer 1 élément (le logo par exemple ou 1 des 4 images du menu) mais les autres images se retrouvent centrées mais les unes en dessous de l'autres Smiley sweatdrop

Voilà mon code HTML actuel :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="navbar">
      <div id="logo"><img src="images/logo.jpg"></div>
      <div id="menu"><img src="images/menu4.jpg"></div>
	  <div id="menu"><img src="images/menu3.jpg"></div>
      <div id="menu"><img src="images/menu2.jpg"></div>
	  <div id="menu"><img src="images/menu1.jpg"></div>
	  </div>

<div id="header"></div>

<div id="contenu"></div>
</body>
</html>


Et le CSS : 

body {
   background-color:#ffffff; 
   padding:0; /*Pour que la page n’ai aucune marge*/
   margin:0; /*Pour que la page n’ai aucune marge*/
   }
 
   
#navbar {
    background-image : url("images/pix01.jpg");
	height : 46px;
    background-repeat : repeat-x;
   }
   
#logo {
float:left;
}
#menu {
float:right;
}

#header {
    background-image : url("images/web02.jpg");
	background-repeat: no-repeat; 
	height : 147px;
	background-position:center;
}   
   
#contenu {
    background-image : url("images/pix03.jpg");
	height : 152px;
    background-repeat : repeat-x;
   }


Merci pour votre aide Smiley confused
Modifié par BeaRRRR (12 Sep 2009 - 16:02)
Salut,

Je l'avais déjà lu et testé les solutions proposées, ça me faisait le même soucis, les images centrées mais alignés les unes en dessous des autres... sauf que mon problème venait au fait d'un width mal renseigné, les images se mettaient les unes en dessous des autres parce que le width n'était pas assez grand... Smiley decu

Donc pour ceux qui chercheraient la réponse :
#navbar {
    background-image : url("images/pix01.jpg");
	height : 46px;
    background-repeat : repeat-x;
   }
   
#menu {
	  position: relative; 
	    margin-left: auto; 
  margin-right: auto; 
    width: 700px; 
}


Problème résolu donc, merci de ta réponse et désolé de ce topic inutile Smiley sweatdrop
Modifié par BeaRRRR (12 Sep 2009 - 16:03)
Sujet clos
Aller à