Deux image a coté

Bonjour,

Je vois ça : <link rel="stylesheet" HREF="css.css" TYPE="text/css"> en plein milieu du site ? c'est seulement a mettre entre <head> & </head>

Pour aligner tes images l'un a coté de l'autre tu dois ajouter en CSS sur tes deux images la propriété

display:inline

Et float:right pour l'image de droite & float:left pour l'image de gauche ...

bonsoir,
j'ai modifié vite fais avec firebug, c'est ce résultat là que tu veux?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
</head>
<body>
<div id="entete"> </div>
<img onmouseover="this.src = 'hover-accueil.jpg';" alt="accueil " src="hover-accueil.jpg" title="accueil"/>
<img onmouseout="this.src = 'boutton-contact.jpg';" onmouseover="this.src = 'hover-contact.jpg';" alt="contacte" src="boutton-contact.jpg" title="me contacter"/>
<img onmouseout="this.src = 'boutton-image.jpg';" onmouseover="this.src = 'hover-image.jpg';" alt="image" src="boutton-image.jpg" title="images"/>
<img onmouseout="this.src = 'boutton-video.jpg';" onmouseover="this.src = 'hover-video.jpg';" alt="video" src="boutton-video.jpg" title="images"/>
<img onmouseout="this.src = 'boutton-tuteur.jpg';" onmouseover="this.src = 'hover-tuteur.jpg';" alt="tuteur" src="boutton-tuteur.jpg" title="tuteurs"/>
<br/>
<br/>
<br/>
<link type="text/css" href="css.css" rel="stylesheet">
</link>
<div id="menu">
<div class="element_menu">
<div id="menu" style="float: left; width: 40px; height: 40px;"> </div>
<div id="menu" style="float: right; width: 40px; height: 40px;"> </div>
<h3 style="margin: 0pt; padding: 0pt;">
</h3>
<img style="width: 100%; height: 5px;" src="s%C3%A9parateur.gif"/>
<ul>
</ul>
</div>
</div>
<br/>
<div align="center">
</div>
<div align="center">
</div>
</body>
</html>

au passage il y a 21 erreurs html dans ton code

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

alex59fr,
pourrait tu approfondir t'as réponse s'il te plaît( la 1ere)

Tu a tes deux images je ne sais pas comment tu les fais apparaître, mais pas avec un img src, tu dois donc utiliser une class en CSS je ne sais pas laquel, a toi de voir tu utilise quel class.

Pour la class de droite il faut que tu ajoute : display:inline; float:right; pour celui de gauche il faut que tu ajoute display:inline; floatleft;

C'est un peu plus claire ?

j'ai fait une div,
XHTML:

<div id="menu2">  </div><div id="menu3">  </div>

et le CSS:

#menu2
{
 width: 500px;
   height: 80px;
   background-image: url("menu.gif");
   background-repeat: no-repeat;
   background-position: left;
}

#menu3
{
 width: 500px;
   height: 80px;
   background-image: url("menu.gif");
   background-repeat: no-repeat;
   

Essaye de faire ça dans ton css

#menu2
{
 width: 500px;
   height: 80px;
   background-image: url("menu.gif");
   background-repeat: no-repeat;
   background-position: left;
float:left;
display:inline;
}

#menu3
{
 width: 500px;
   height: 80px;
   background-image: url("menu.gif");
   background-repeat: no-repeat;
float:right;display:inline;

ça ne marche pas, l'image ne s'affiche même pas.. .
Elle s'affiche que si je la met en width:140px, car (css):

#menu    /* Le menu */
{
   float: left; /* Le menu flottera à gauche */
}

140 px ? au dessus je vois 500px ...

je vien de changé...
Va voir, j'ai réussi a la mettre a droite du cadre, mais pas a coté de l'autre image au dessu... .

Il faut que tu ajoute la propriété display:inline a tes deux éléments comme répéter deux fois ci dessus

c'est déjà fait depuis la 2eme foie que tu me la dit.
Mais ca ne marche pas.
--> http://vistlip.free.fr

Pour tes div utilise un attribut CLASS et pas ID donc au lieu de mettre sur le CSS #menu2 met .menu2

Ensuite fait un div qui entoure les deux autre div avec pour propriété :

diplay:block;
width:la largeur;
height:hauteur;

EDIT : Supprime tout de suite : width: 500px; !!!

a tu essayer de modifier ça :

<div id="menu2" style="margin: 0; padding: 0; float: left; width: 40px; height: 40px;"> </div><div id="menu3" style="margin:0;padding:0;width:40px;height:40px; float:right;">

de cette manière?

comme je l'avais fait dans mon premier post...

ou tu peux directement remplacer menu 2 et menu3 par ça dans ton css :

#menu2
{
   width: 40px;
   height: 40px;
   background-image: url("menu.gif");
   float:left;
}

#menu3
{
    width: 40px;
    height: 40px;
    background-image: url("menu.gif");
    float:right;
}

Merci beaucoup Atropa!! ca marche la 1er méthode, merci bien sûr a toi aussi alex59fr !

j'ai mis ca:

<div id="menu2" style="margin: 0; padding: 0; float: left; width: 40px; height: 40px;"> </div><div id="menu3" style="margin:0;padding:0;width:40px;height:40px; float:right;">  </div> <br />

va voir le cadre a gauche: http://vistlip.free.fr

De rien à la prochaine :)

J'ai un problème, j'ai réussi pour les deux image en haut, mais je n'arrive pas a faire pareil pour ceux d'en bas !

XHTML:

<div id='menu'>
 <div class="element_menu">
	<div id="menu2" style="margin: 0; padding: 0; float: left; width: 40px; height: 40px;"> </div><div id="menu3" style="margin:0;padding:0;width:40px;height:40px; float:right;">  </div><br /><br /><div id="menu4" align="center"> </div>
	
	<ul >
                   <li>image</li>
                   <li>vidéo</li>
                   <li>mes tuteurs</li>
		           <li>plus...</li>
	
  </ul ><br /><br />
 <div id="menu2" style="margin: 0; padding: 0; float: left; width: 40px; height: 40px;"> </div><div id="menu3" style="margin:0;padding:0;width:40px;height:40px; float:right;">  </div>

 </div>
 </div>
 <br />

et le css, j'ai repris ceux des deux image que j'ai mis en haut:

#menu2
{
 width: 500px;
   height: 80px;
   background-image: url("menu.gif");
   background-repeat: no-repeat;
   background-position: left;
}

#menu3
{
 width: 140px;
 height: 80px;
 background-image: url("menu.gif");
 background-repeat: no-repeat;
 background-position: right;
}

ps: ce qui est en gras dans le xhtml c'est les 2 image qui c mette en bas du cadre.
va voir http://vistlip.free.fr

bonjour,

tu devrais enlever les attribut style des balises et mettre remplacer #menu2 et #menu3 par ça :

#menu2
{
   width: 40px;
   height: 40px;
   background-image: url("menu.gif");
   float:left;
}

#menu3
{
    width: 40px;
    height: 40px;
    background-image: url("menu.gif");
    float:right;
}

si tu change ton css comme ça tu n'as plus besoin des balises style

ensuite pour les div en bas il te suffit de rajouter margin-top: 40px;

y a un problème quand je fait mon div regarde( image) quand j'écris <div id="menu"..> </div> le mot menu ce met en rouge.
Et quand je rajoute 6: <div id="menu6"..> </div> il ce met en noir comme si ca ne marche pas.

sans le "6":http://ups.imagup.com/06/1259472237.jpg
avec le " 6":http://ups.imagup.com/06/1259472294.jpg

Donc forcement ca ne marchera pas...

[edit : bug, desolé du bruit...]

??