Une div, plusieurs images , comment ?

Yep

EDIT : Arf tu viens de rajouter un lien, j'ai mal compris ce que tu voulais faire... le code que je donne ci-dessous permet d'aligner 3 images côte à côte sans aucune marge, alors que toi tu souhaites faire un gabarit de site avec 3 colonnes. Fais une recherche sur le forum ton problème a déjà été traité plusieurs fois

Essaye ça :

HTML

<div id="menu_haut">

     <div id="img_gauche">
     </div>

     <div id="img_droite">
     </div>

     <div id="img_centre">
     </div>

</div>

CSS

#menu_haut {
height:...px;
position:relative; }

#img_gauche {
background:url(images/...) no-repeat;
width:...px;
position:absolute;
left:0;
top:0; }

#img_centre {
background:url(images/...) repeat-x;
display:block;
margin:0; }

#img_droite {
background:url(images/...) no-repeat;
width:...px;
position:absolute;
right:0;
top:0; }

Attention à bien placer la div "img_centre" après "img_gauche" et "img_droite" dans le code HTML !

Voilà
Modifié par BeliG (30 Apr 2007 - 10:42)

bah en fait nan je veux bien mettre 3 images cote a cote dans la div entre le header et le reste du site mais j'arrive pas ça vient pas du fait que je fait un design en 3 colonnes si ?

T'as la solution dans mon dernier post (en tout cas pour les 3 images côte à côte, le reste...)
Modifié par BeliG (30 Apr 2007 - 11:29)

Et sinon, tout simplement, travailleur avec deux images HTML flottantes ?

[b]HTML :[/b]
<div id="haut">
<img alt="" src="haut-gauche.png" class="gauche" />
<img alt="" src="haut-droite.png" class="droite" />
</div>

[b]CSS :[/b]
div#haut {
	height: 30px;
	overflow: hidden; /* empeche le dépassement de flottants au cas où... */
	background: gray url(haut-fond.png) repeat-x center top;
}
div#haut img.gauche {
	float: left;
}
div#haut img.droite {
	float: right;
}

Pas bien sorcier, à priori.

wpcJack a écrit :
J'ai rangé un peu ^^

...

edit : les image fonctionne ^^

Moué...t'as pas fais attention à mes conseils pour autant, libre à toi

[Résolu] ?

BeliG a écrit :

Moué...t'as pas fais attention à mes conseils pour autant, libre à toi

[Résolu] ?

Là j'en suis plutot a la phase, ça marche c'est bien, on verra plus tard pour optimisé je tiendrai compte de vos posts.

Merci a vous deux et oui résolu

Rebonjour et désolé de réouvrir ce topic, j'ai encore un problème dans mes image mais cette fois sous IE,

http://oskdvd.free.fr/bixos/

Dans le header IE comprend pas qu'il y a 3 images

Une idée ?

Hello

Si tu veux aligner 3 images qui ont chacunes des tailles définies (plus de repeat-x sur l'image au centre) alors tu n'es plus obligé d'utiliser :
- position:relative; sur le conteneur
- position:absolute; sur les images gauche et droite (ainsi que les top, left et right).

Fais simplement :

<img src="img_gauche"><img src="img_centre"><img src="img_droite">

et joue avec les marges au besoin.

Mais dis-moi, une seule image suffirait pas ?
Modifié par BeliG (02 May 2007 - 10:24)

BeliG a écrit :
Hello

Si tu veux aligner 3 images qui ont chacunes des tailles définies (plus de repeat-x sur l'image au centre) alors tu n'as plus besoin :
- du position:relative; sur le conteneur
- des position:absolute; sur les images gauche et droite (ainsi que les top, left et right).

Fais simplement :

<img src="img_gauche"><img src="img_centre"><img src="img_droite">

et joue avec les marges au besoin.

Mais dis-moi, une seule image suffirait pas ?

non, puisqu'une anime flash va etre inseré entre les deux image

Bon alors essaye ça :

HTML

<div id="header">

    <div id="image_gauche">
    </div>

    <div id="image_droite">
    </div>

    <div id="image_centre">
    </div>

</div>

CSS

#image_gauche {
float:left; }

#image_droite {
float:right; }

Et si ton anim flash n'est pas centrée correctement tu pourras essayé un text-align:center; dans le #header...

et j'ai besoin que le logo reste toujours a gauche et l'image de droite toujours a droite puisque le site est extensible dans la largeur

edit : j'essaye ta solution
Modifié par wpcJack (02 May 2007 - 10:35)

Effectivement, avec un design fluide, accoler trois images risque d'être difficile.

Si je regarde ton en-tête, tu as :
- une image décorative à droite ;
- une image de contenu à gauche ;
- un bandeau Flash entre les deux.

L'image décorative devrait être placée comme image de fond du bloc d'en-tête, pas comme image de fond d'un bloc créé spécialement pour ça.

L'image de contenu devrait être placé dans le code HTML, avec une alternative textuelle qui va bien.

<img src="..." alt="bixos informatique" />

À la rigueur, il sera peut-être intéressant de faire flotter à gauche cette image.

Pour l'animation Flash, pas le choix, c'est forcément dans le code HTML via l'élément object.

ouai bon j'ai utilisé floatn est maintenant Ie n'arrive plus a afficher l'image qui sera remplacé par l'animation flash, sous FX c'est niquel -_____-


Je comprend pas ce que tu veux dire par image décorative et image de contenu.

En fait moi je voyais le truc comme ça

logo | flash | bordel qui se repete couleur ou nimport quoi | image de droite

C'est pas faisable ?

wpcJack a écrit :
Je comprend pas ce que tu veux dire par image décorative et image de contenu.

Une image décorative ne transmet pas d'information essentielle et explicite.
Une image de contenu (ou image non décorative) transmet une information essentielle et explicite ; par exemple : le nom de site voire son logo, un titre mis en image, une image appartenant au contenu principal de la page et nécessaire à sa compréhension, etc.

Au passage, si tu fais flotter l'image de gauche il peut être intéressant de placer un margin-left: 160px sur ton bloc destiné à abriter une animation Flash.