deux image a cotéRésolu/Fermé

Question

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.

alex59fr · Answer

Bonjour, Je vois ça : en plein milieu du site ? c'est seulement a mettre entre & 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 ...

Atropa · Answer

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

au passage il y a 21 erreurs html dans ton code http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

sena-kaitani · Answer

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

alex59fr · Answer

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 ?

sena-kaitani · Answer

j'ai fait une div, XHTML:

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;

alex59fr · Answer

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;

sena-kaitani · Answer

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

alex59fr · Answer

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

sena-kaitani · Answer

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

alex59fr · Answer

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

sena-kaitani · Answer

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

alex59fr · Answer

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

Atropa · Answer

a tu essayer de modifier ça :

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

sena-kaitani · Answer

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

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

alex59fr · Answer

De rien à la prochaine :)

sena-kaitani · Answer

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

Atropa · Answer

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;

sena-kaitani · Answer

y a un problème quand je fait mon div regarde( image) quand j'écris le mot menu ce met en rouge. Et quand je rajoute 6:

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

notobe · Answer

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

sena-kaitani · Answer

??

Atropa · Answer

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 : accueil

accueil contacte video tuteur

bienvenue

ce site consite a parler de l'anime eyeshield 21. Vous y retrouverez tous sur cette anime.

au revoir

blaaablalaa

sena-kaitani · Answer

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

Deux image a coté

22 réponses

Discussions similaires

Newsletters