Sujet Précédent Sujet Suivant

Deux image a coté

Résolu/Fermé
Profil bloqué - 26 nov. 2009 à 21:33
 Profil bloqué - 28 nov. 2009 à 19:20
Bonjour,
je voudrait mettre deux images a côté, mais séparé vous comprendré en regarde mon site: http://vistlip.free.fr
en faite dans le cadre a gauche je voudrait que les deux images qui sont les une en dessous des autres, soit dans un angle.

Merci.
A voir également:

22 réponses

  • 1
  • 2
Réponse 1 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 21:56
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 ...
0
Réponse 2 / 22
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
26 nov. 2009 à 21:56
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/
0
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 21:59
Faudrai peut être pensé a virer cette ligne 

<link type="text/css" href="css.css" rel="stylesheet">
</link>
0
Réponse 3 / 22
Profil bloqué
26 nov. 2009 à 22:19
alex59fr,
pourrait tu approfondir t'as réponse s'il te plaît( la 1ere)
0
Réponse 4 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 22:23
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 ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 22
Profil bloqué
26 nov. 2009 à 22:27
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;
0
Réponse 6 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 22:41
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;

0
Réponse 7 / 22
Profil bloqué
26 nov. 2009 à 22:48
ç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 */
}
0
Réponse 8 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 22:53
140 px ? au dessus je vois 500px ...
0
Réponse 9 / 22
Profil bloqué
26 nov. 2009 à 22:54
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... .
0
Réponse 10 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 22:57
Il faut que tu ajoute la propriété display:inline a tes deux éléments comme répéter deux fois ci dessus
0
Réponse 11 / 22
Profil bloqué
26 nov. 2009 à 22:59
c'est déjà fait depuis la 2eme foie que tu me la dit.
Mais ca ne marche pas.
--> http://vistlip.free.fr
0
Réponse 12 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
26 nov. 2009 à 23:09
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; !!!
0
Réponse 13 / 22
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
26 nov. 2009 à 23:54
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;
}
0
Réponse 14 / 22
Profil bloqué
27 nov. 2009 à 20:11
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
0
Réponse 15 / 22
alex59fr Messages postés 853 Date d'inscription mercredi 25 novembre 2009 Statut Membre Dernière intervention 12 mai 2016 89
27 nov. 2009 à 23:39
De rien à la prochaine :)
0
Réponse 16 / 22
Profil bloqué
27 nov. 2009 à 23:56
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
0
Réponse 17 / 22
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
28 nov. 2009 à 17:32
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;
0
Réponse 18 / 22
Profil bloqué
28 nov. 2009 à 17:56
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...
0
Réponse 19 / 22
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
28 nov. 2009 à 18:03
[edit : bug, desolé du bruit...]
0
Réponse 20 / 22
Profil bloqué
28 nov. 2009 à 18:33
??
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Snap - croix grise
Thenou35210 -
Radinoz -

1 réponse