[Résolu] Aligner 3 blocs horizontalement

Bonsoir,

Je cherche à aligner 3 blocs horizontalement de manière à former une bannière.
Mon problème : mes blocs ne sont pas alignés et le bloc central disparait comme vous pouvez le voir ici.

Code XHTML :

<div id="header">

<div id="logo"></div>
<div id="accueil"></div>
<div id="categories"></div>
<div id="marchands"></div>
<div id="profil"></div>
<div id="deconnexion"></div>
<div id="addcode"></div>

</div>

Code CSS :

#header {
	width: 800px;
	height: 150px;
	}	

#logo {
	width: 390px;
	height: 150px;
	display: inline;
	float: left;
	background-image: url(images/images/header_01.gif);
	}

#colone1 {
	width: 167px;
	height: 150px;
	display: inline;
	float: left;
	}
#accueil {
	width: 167px;
	height: 50px;
	background-image: url(images/images/header_02.gif);
	}
#categories {
	width: 167px;
	height: 50px;
	background-image: url(images/images/header_04.gif);
	}
#marchands {
	width: 167px;
	height: 50px;
	background-image: url(images/images/header_06.gif);
	}
	
#colone2 {
	width: 243px;
	height: 150px;
	display: inline;
	float: left;
	}
#profil {
	width: 243px;
	height: 50px;
	background-image: url(images/images/header_03.gif);
	}
#deconnexion {
	width: 243px;
	height: 50px;
	background-image: url(images/images/header_05.gif);
	}
#addcode {
	width: 243px;
	height: 50px;
	background-image: url(images/images/header_07.gif);
	}

Modifié par flax (11 Nov 2007 - 00:06)

Salut,

Déjà pourquoi ne pas faire qu'une image?
Ensuite inline et float left, ce ne ferait il pas double emploi?
Et puis et surtout tes images me donnent l'impression de contenir des informations, ne seraient elles pas mieux dans le code tout bêtement

<img src="image1" alt="blabla" /><img src="image2" alt="blabla" /><img src="image3" alt="blabla" />

Comme ce sont des balises inline, elles s'aligneraient toutes seules quitte à les enfermer dans un bloc de largeur fixe pour ne pas qu'elles passent à la ligne en cas de re dimensionnement .

Bonjour flax,

Effectivement tu n'as pas choisi le plus simple lors du découpage de ton design
7 images pour parvenir à cela :

Tu pourrais comme te le précise Ghost n'utiliser qu'une seule image, soit en partant de cette image finale et en plaçant tes liens aux endroits prévus à cet effet soit en reprenant ton design plus dépouillé :

en utilisant un ou deux conteneurs flottants à droite ou comme bon te semble à l'intérieur duquel (desquels) tu placerais ton menu plus "classiquement"...
Ou encore la solution de Ghost
En l'état actuel, tu ne spécifies pas de positionnement pour tes conteneurs ( trop nombreux d'ailleurs ) ou leurs définitions css sont mal choisies et ne respectent pas le flux naturel qui te permettrait de parvenir à ce que tu souhaites (cf remarque de Ghost) il va te falloir ruser pour les positionner correctement (flottant à droite avec des spacer{clear:both} pour éviter que ces flottants ne "bougent" ou encore calculer le positionnement plus précisemment ?...)
A revoir également le positionnement en css et les bases indispensables

Bon courage
Modifié par 6l20 (07 Nov 2007 - 10:40)

Bonsoir flax,

C'est demandé si gentiment...
Rapidos et à la louche, fonctionne sous IE6/7 et Firefox
En restant sur ton idée de départ (utiliser 7 images pour ton header) :
css :

#header {
width:800px;
height:150px;
margin-left: auto;
margin-right: auto;
}

#logo {
background-image:url(header_01.gif);
height:150px;
width:390px;
float:left;
}
#bloc1{
float:left;
width:157px;
height:150px;

}
#bloc2{
float:left;
width:243px;
height:150px;
}
#accueil, #categories, #marchands,#profil,#deconnexion,#addcode  {float:left;}
img {border:none;}

html :

<div id="header">
<div id="logo"></div>
<div id="bloc1"><a href="#"><img id="accueil" src="header_02.gif" alt="" /></a><a href="#"><img id="categories" src="header_04.gif" alt="" /></a><a href="#"><img id="marchands" src="header_06.gif" alt="" /></a></div>
<div id="bloc2"><a href="#"><img id="profil" src="header_03.gif" alt="" /></a><a href="#"><img id="deconnexion" src="header_05.gif" alt="" /></a><a href="#"><img id="addcode" src="header_07.gif" alt=""/></a></div>
</div>

Je reste persuadé que ce n'est pas la meilleure solution, ni que nous soyons ici ni "standard", ni "accessible"...mais au plaisir de partager

Merci de nous faire vivre la suite de ton aventure

Un grand merci à toi cela fonctionne très bien !

Merci à tous ceux qui ont participé !