Deux image a coté

Résolu

Profil bloqué -
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:

Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ?
Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
Télécharger clavier arabe - Télécharger - Divers Web & Internet
Comment reduire la taille d'un document - Guide
Film d'action en français à télécharger - Télécharger - TV & Vidéo
Jeux à télécharger - Télécharger - Jeux vidéo

22 réponses

Réponse 1 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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

Réponse 2 / 22

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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 Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

Faudrai peut être pensé a virer cette ligne

<link type="text/css" href="css.css" rel="stylesheet">
</link>

Réponse 3 / 22

Profil bloqué

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

Réponse 4 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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 ?

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

Posez votre question

Réponse 5 / 22

Profil bloqué

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;

Réponse 6 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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;

Réponse 7 / 22

Profil bloqué

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

Réponse 8 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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

Réponse 9 / 22

Profil bloqué

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

Réponse 10 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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

Réponse 11 / 22

Profil bloqué

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

Réponse 12 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

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

Réponse 13 / 22

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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

Réponse 14 / 22

Profil bloqué

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

Réponse 15 / 22

alex59fr Messages postés 853 Date d'inscription Statut Membre Dernière intervention 89

De rien à la prochaine :)

Réponse 16 / 22

Profil bloqué

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

Réponse 17 / 22

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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;

Réponse 18 / 22

Profil bloqué

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

Réponse 19 / 22

notobe Messages postés 1952 Date d'inscription Statut Membre Dernière intervention 213

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

Réponse 20 / 22

Profil bloqué

Discussions similaires

A quoi correspond cette croix sur snapchat

question pix mot caché

Le son ne sort que d'un côté de mon casque, pourquoi ?

Snap - croix grise

Votre réponse

Discussions similaires