18041 sujets

Questions générales et questions de débutants

Balise Div + Photos 100% inline !

Bonjour,
Smiley confused
Est ‘il possible dans un style Css de positionner une balise DIV procédant un background qui contiendrai deux photos img=src … 100% inline et de les aligner sur une même ligne.

Je débute et j’aimerai construire ma bannière avec une photo 160px 480px et une plus petite de 12px 19px. J’ai besoin de les aligner notamment la petite en haut et à droite de l’autre qui représente un drapeau avec son lien.

J’ai bien essayé quelques méthodes mais qui ne conviennent pas. Car j’ai en plus un document de type fluid.

De tout cœur je vous remercie.
Ricolargol sur HALKIDIKI
Je ne suis pas certain de comprendre ton problème et ce que tu veux réellement. Tu désires positionner le <div> ou le background-image de ce <div> ?

Car par défaut, si tu mets deux images <img> une à la suite de l'autre, elles seront sur la même ligne, une à côté de l'autre.

Bref, peux-tu mieux définir ton soucis et nous montrer ton site ( si c'est en ligne )

Merci de m'aider à pouvoir t'aider Smiley smile
Salut,

Idem, j'ai pas très bien compris ta demande.
En tout cas, une chose est sûre : tu es sur la mauvaise voie, 2 images en background d'un seul div ce n'est pas possible...
Il y a des moyens beaucoup plus simples pour faire ça en css.

Essayes plutôt de nous expliquer le résultat final que tu veux avoir, et on pourra te conseiller sur la meilleure façon de le réaliser en html/css
Bonjour,
Je vous remercie de votre retour.
Smiley decu
Je dois effectivement essayé de me faire comprendre mieux car les images ne servent pas au background.

Je souhaite créer une bannière avec une couleur de fond X avec à l’intérieur deux photos (img).
Une aligné en haut à gauche de 480px 160px, et l’autre de 12px 19px aligné en haut à droite.

Les deux photos doivent collées en haut de la bannière.
La bannière doit se positionner dans le corps (qui j’espère sera fluide) de la page html.
Viens ensuite un menu et un corps..

Cdt
Ricolargol sur HALKIDIKI (en construction)

div { height:160px; border:1px solid red; }

.img1 { float:left; }
.img2 { float:right; }




<div>
	<img class="img1" width="480" height="160" src="http://www.voir.ca/blogs/steve_proulx/plantstory.jpg" alt="content" title="content" />
    <img class="img2" width="12" height="19" src="http://www.voir.ca/blogs/steve_proulx/plantstory.jpg" alt="content" title="content" />
</div>


Ça c'est la solution si la largeur ton <div> varie en fonction de la page et que tu veux garder les images dans leur coin respectif. Évidemment, tu remplaces les images de tests que j'ai pris sur le net par tes images Smiley smile et n'oublies pas de mettre des alt="" significatifs sur chaque image pertinente de ton code HTML.

Pour ton information, tu peux aligner des images avec la propriété vertical-align ( si tu enlèves les floats ) mais les images seront collées une à côté de l'autre puisqu'ils sont "inline".

div img { vertical-align:top; }


En espérant avoir répondu à ta question.
Modifié par Sorano (22 Jan 2010 - 15:39)
En partie mais et je vous remercie de nouveau.
Smiley biggrin
Avec Explorer ras mais avec firefox le flag reste à gauche ..
Smiley biggrin

Super Pour cette info car j'avais compris que cet div img { vertical-align:top; }propriété ne s"applique qu'avec du texte..

A bientôt

Ricolargol
Si tu as ton site en ligne, tu peux nous donner le URL, ce sera plus simple de voir comment nos solutions réagissent dans ton environnement de développement car j'ai testé l'exemple que je t'ai donné dans Firefox, Chrome, Opera, IE6, 7, 8 et ça fonctionne Smiley smile

Pour vertical-align, ça fonctionne pour le texte / images ( le tag ). Tu ne peux pas, cependant, aligner un <div> div verticalement dans un autre <div>. Donc c'est une utilisation très limitée que tu peux avoir avec cette propriété mais elle existe quand même Smiley smile
Très sympa de ta part toutes tes réponses. Le site n'est toujours pas en ligne..
Voici le code que j'applique avec cs4, car quelque soit le body Css appliqué, le flag reste collé a gauche avec firefox alors que le rendu est bien IE.

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

<body>

<div id="test">

<img src="Palette Photos/B-M01.gif" width="480" height="160" alt="imqge" class="img1" /> <img src="Palette Photos/FLAG.png" width="19" height="12"alt="flqg" class="img2" />
</div>

</body>
</html>

body

{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: #FFC;

}

/*html, body {
margin:0;
padding:0;
}

/* body {
width: 80%;
max-width: 1000px;
min-width: 800px;
background-color: #FC9;
}*/

#test {
height:160px;
border:1px solid red;
background-color: #FC3;
}


.img1 { float:left; }

}

.img2 {
float:right;
margin-right: 20px;
}

Smiley cligne
Merci Sorano bon Week..
Smiley cligne Pb Résolu
je découvre les règles du forum et tente au mieux de les appliquer au plus vite.
Merci de votre aide
ricolargol a écrit :
je découvre les règles du forum et tente au mieux de les appliquer au plus vite.
Raté...

L'idée c'est d'EDITER le premier message et de modifier le titre. Les règles expliquent comment éditer un message.
Sujet clos
Aller à