[Résolu] Bandeau graphique en 3 morceaux : comment faire en CSS ?

Hier, grace à Anthony, j'ai changé mes bandeaux graphiques qui étaient codés sous forme de tableaux en zones CSS.

Voici le code css utilisé :

#header-principal {

 width: 100%;

 height: 100px;

 margin: 0 auto;

 background: url(images/bando-haut-x.jpg) repeat-x;

}

.bando_gauche { display: block; float: left; margin-right: 0px; }

.bando_centre { display: block; float: left; margin: 0px auto 0px auto; }

.bando_droite { display: block; float: right; margin-left: 0px; }  

Et le code HTML :

<div id="header-principal">

       <img src="images/bando-haut-gauche.jpg" class="bando_gauche" alt="" />

	     <img src="images/bando-haut-centre.jpg" class="bando_centre" alt="" />

       <img src="images/bando-haut-droite.jpg" class="bando_droite" alt="" />

	  </div>

Ca m'embêterai de revenir aux tableaux pour ce genre de bandeau.
Modifié par EcliptuX (19 Dec 2006 - 16:13)

heu, met dans l'ordre suivant :
Gauche
Droite
Centre

et non Gauche, Centre, Droite, c'est !important

explication :
Le moteur affiche les éléments les un à la suite des autres.
Dans ton cas, il affiche le float left correctement, ça Ok
ensuite il affiche le Centre correctement, centré.
Et après il tente d'afficher la droite... et là, comme le centre à pris la place, alors la droite n'a plus de place et s'affiche en dessous.
Modifié par anthony (22 Feb 2005 - 19:55)

je vais pas te re-cirer les pompes une nouvelle fois, mais bingo !

Voilà la soluce :
Code CSS :

#header-article {

 width: 100%;

 height: 50px;

 margin: 0 auto;

 background: url(images/article-haut-x.jpg) repeat-x;

}



.bando_gauche { display: block; float: left; margin-right: 0px; }

.bando_centre { display: block; margin: 0px auto; }

.bando_droite { display: block; float: right; margin-left: 0px; }

Et code HTML :

	  <div id="header-principal">

       <img src="images/bando-haut-gauche.jpg" class="bando_gauche" alt="" />

       <img src="images/bando-haut-droite.jpg" class="bando_droite" alt="" />
       <img src="images/bando-haut-centre.jpg" class="bando_centre" alt="" />

	  </div>

Merci

j'arrive après la guerre
ton image de titre passe au dessus du logo de droite quand la résolution est trop faible. Une jolie solution pour éviter ça est d'utiliser un png avec de l'alpha, par exemple avec un dégradé de transparence. D'habitude les png32 bits sont lourds et peut utilisés, et en plus foire lamentablement sous IE. On pourrait quand même utiliser un hack css pour afficher un jpg d'un coté et un png32 de l'autre, mais il y'a une astuce plus drole. Si on utilise un png quantisé, 8 ou 7 bits comme ceux que j'ai fait avec ton bandeau (http://www.mentalwarp.com/~moob/tmp/alsa/header_low.png & http://www.mentalwarp.com/~moob/tmp/alsa/header_low2.png) le poids chute, 22 et 18Ko ici, soit 6 Ko de plus que ton jpg pour le plus petit. Encore plus interessant c'est que IE ne gère pas la transparence des images rgba indexée de la même manière, il tranche au plus près, n'affichant que les pixels complètement opaques, dans ce cas ci comme le dégradé est linaire on obtient un beau bord droit...
Attention ces images ne sont souvent plus éditables avec les logiciels de retouche conventionnels, comme photoshop.

bonne soirée

C'est vrai qu'à choisir entre une bidouille et se priver d'un effet interressant ou remplacer juste une image le choix est vite fait... Tu remarquera aussi que tout l'interet est justement que je n'utilise pas de Png32bits, comme tu aurais pu le comprendre si tu lisais tout mon message.