Deux image a coté

MERCI, ca marche nikel.
Je croyait que si je mettais des "class", quand on clike sur l'image(on reste appuyer) on puisse la prendre l'image, mais non je ne sais pas trop comment faire.

Merci a tous.
.: itsuki power shunyuu ! :.

regarde ça et dit moi :

fichier css :

/*debut de l'alignement... pour l'image d'accueil */
body {
	width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;	 
}

p {
	color:#1e90ff;
}
 
#entete
{
	width: 700px;
	height: 300px;
	background-image: url("http://ups.imagup.com/06/1259315573.jpg");
	background-repeat: no-repeat;
	background-position: center;
/*fin pour l'alignement... de l'image d'accueil */
}

ul {/* Ma liste aura des puces avec l'apparence d'une photo */

	list-style-image: url("sharingan.gif");
	list-style-position: inside; 
}

#menu {/* Le menu */
	float: left; /* Le menu flottera à gauche */
	width: 150px; /* Très important : donner une taille au menu */
	background-repeat: repeat-x;
	background-color:#c0c0c0 ;
	border: 2px solid black;
	margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}


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

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

}

#menu4 {
	clear:both;
	height:60px ;
	background-image: url("menu2.gif");
	background-repeat: no-repeat;
	background-position: center;
}

fochier html :

<!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>
	<title>accueil</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
</head>
<body>
	<div id="entete">   </div>
	<p>
		<img title="accueil" src="boutton-accueil.jpg" alt="accueil "
		onmouseover="this.src = 'hover-accueil.jpg';"
		onmouseout="this.src = 'boutton-accueil.jpg';" />

		<img title="me contacter" src="boutton-contact.jpg" alt="contacte"
		onmouseover="this.src = 'hover-contact.jpg';"
		onmouseout="this.src = 'boutton-contact.jpg';" />

		<img title="images" src="boutton-image.jpg" alt="image"
		onmouseover="this.src = 'hover-image.jpg';"
		onmouseout="this.src = 'boutton-image.jpg';" />

		<img title="vidéos" src="boutton-video.jpg" alt="video"
		onmouseover="this.src = 'hover-video.jpg';"
		onmouseout="this.src = 'boutton-video.jpg';" />

		<img title="tuteurs" src="boutton-tuteur.jpg" alt="tuteur"
		onmouseover="this.src = 'hover-tuteur.jpg';"
		onmouseout="this.src = 'boutton-tuteur.jpg';" />
	</p>

	<div id='menu'>
			<div class="menuImgL"></div>
			<div class="menuImgR"></div>
			<div id="menu4"></div>

			<ul>
				<li>image</li>
				<li>vidéo</li>
				<li>mes tuteurs</li>
				<li>plus...</li>
			</ul>
			<div class="menuImgL"></div>
			<div class="menuImgR"></div>


	 </div>

	<div style="text-align: center;">
		<h3>bienvenue</h3>
		<p>ce site consite a parler  de l'anime eyeshield 21.
		Vous y retrouverez <ins>tous</ins> sur cette anime.</p>
	</div>

	<div style="text-align: center;">
		<h3>au revoir</h3>
		<p>blaaablalaa</p>
	</div>

</body>
</html>

??

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

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...

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;

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

De rien à la prochaine :)

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

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;
}

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; !!!

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

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

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... .

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

ç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 */
}

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;

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;
   

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 ?

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