Comment mettre 2 images l'une cote à cote ?

Bonjour à tous !

J'ai comme d'habitude un petit souci (tient ca faisait longtemps).

Tout est dit dans le titre, j'ai rechercher un peu partout sur le net, j'ai bien trouvé 2 scripts masi cela ne passe pa avec mon code ( du moins pour moi pauvra débutant). Le prmier code fonction à merveille

<div><span style="float:left;"><img src="#"></span><span style="float:left;"><img src="#"></span></div> 

il me met bien les deux images cote à cote, mais je ne peux écrire dans les images.

Et celui-ci:

<img src="image1.ext" style="float:left;" /><img src="image2.ext" style="float:left;" />
<div style="clear:both;"></div>

Bien sûr, j'ai lu la FAQ, J'ai le livre de Monsieur "Raphael Goetter" et chercher comme déjà dit dans le Net, comme vous pouvez le voir.

Je remercie tout le forum, pour votre aide précieuse. Merci.
Modifié par Dorian48 (22 Aug 2008 - 19:46)

Bonjour,

et pourquoi pas simplement

<div>
  <img src="image_1.jpg" alt="..." />
  <img src="image_2/jpg" alt="..." /> 
</div>

?

a écrit :
il me met bien les deux images cote à cote, mais je ne peux écrire dans les images.

J'avais loupé cette ligne…

Qu'est-ce que tu essaies de faire, exactement?

Bonsoir Thomas D.

Bien je vais essayer d'erxpliquer peu-être plus clairement. Les 2 exemples que j'ai mis je les ait trouvé sur d'autres Forums.

HTML

<div><span style="float:left;"><img src="#"></span><span style="float:left;"><img src="#"></span></div> 

et l'autre code: HTML


2e code:

<img src="image1.ext" style="float:left;" /><img src="image2.ext" style="float:left;" />
<div style="clear:both;"></div>

cela me place mes 2 images cote à cote, c'est ce que je veux. Mais dans mon code CSS il me manque quelque chose pour que je puisse écrire das ces 4 images :


Mon code CSS (enfin de Heyoan)

#boxavg {
	position: relative;
}
#boxavg p {
	position: p absolute;
	top: 11px;
	left: 5px;
	text-align: left;
	font: 12px Book Antiqua, Verdana, Arial, Helvetica, sans-serif;
	color: black;
	z-index: 10;
}

#box2avg  {
	position: relative;
}
#box2avg p {
	position: absolute;

blabla
}

#box3avg  {
	position: relative;
}
#box3avg  p {
	position: absolute;

blabla
}

#box4avg  {
	position: relative;
}
#box4avg p {
	position: absolute;
blabla
}

alors les images se décalent aussi et le texte ce trouve une fois en dessous, une fois à droite etc. Voilà le problème.



ex: 2 images cote à cote, et il en vient 2 autres en dessous.

|--------------------| |----------------------|
| | | |
| | | |
| | | |
| | | |
| | | |
---------------------- ------------------------

Merci si tu pouvais m'aider à compléter mon code css. Le problème avec moi c'est que je suis débutant, j''ai vecu 26 ans en Allemagne, j'ai appris
le métier d'Electronicien-Informaticien en télécommunication en Allemagne et j'ai beaucoup de problème avec le Francais informatique, il y a des choses que je n'arrive pas à bien comprendre, il me faut partir de nouveau de Zero avec les Noms et les expressions de l'informatique francaise.

Merci pour un petit coup de pouce.

OH j'ai oublié de mettre le code HTML:

<div id="boxavg">

<img src="images/boxavg.png" />

<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href"="http://www.soft-anti-malware.net/avg/AVG_Anti-Virus-8.0/AVG_Anti-Virus-8.0.html"/><big><font color="#234F7B"><b>AVG Anti-Virus</b></font></big>
<br>


</div></p>

</div>


<div id="box2avg">

<img src="images/box2avg.png" />

</div></p>

</div>


<div id="box3avg">

</div></p>

</div>


<div id="box4avg">

le code html n'est pas encore commencer puisque les images ne sont pas cote à cote.
Modifié par Dorian48 (22 Aug 2008 - 22:22)

Salut Dorian,

Dorian48 a écrit :

cela me place mes 2 images cote à cote, c'est ce que je veux. Mais dans mon code CSS il me manque quelque chose pour que je puisse écrire das ces 4 images

En fait ce que je te disais dans tes précédents sujets c'est que les images en question portaient une information et qu'il ne fallait donc pas les placer en background mais directement dans le code html à l'aide d'un élément IMG.

Ensuite si tu veux placer du texte par dessus (et pas DANS) il faut positionner le conteneur des images (par exemple à l'aide de position: relative) et affecter un position: absolute à l'élément qui contiendra le texte (DIV, FORM, P, etc...) et un z-index.

Que tu aies 1 ou plusieurs images ne change rien au problème... et à la solution.

Donc au besoin relire tes précédents sujets (après avoir mis plusieurs images au lieu d'une dans ton conteneur).

A+

Salut Heyoan,

tout d'abord croit moi je lis énormément car j'adore lire et surtout je relis tes messages et les code que tu m'as donné. Mais la difficulté c'est plus la compréhension des expression informatiques francaises.
Hier je me suis téléchargé le CSS 2 et 2.1 du WC3 en anglish (english) et Allemand (excuse le c cedille de francais, je travaille avec l'OS XP SP2 allemand.

Je vais tout d'abord me plonger dans la lecture de ce facicule en allemand, peut-être comprendrai-je mieux le sens de ce q'on me veut et peut-être cela sera plus compréhensible pour moi. Cela fait seulement 2 ans que je suis revenu d'allemagne.

Ah oui dans mon code HTML je met pourtant l'image :

<div id="boxavg">

[#]<img src="images/boxavg.png" />[/#]

<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href"="http://www.soft-anti-malware.net/avg/AVG_Anti-Virus-8.0/AVG_AntiVirus-8.0.html"/> <big><font color="#234F7B"><b>AVG Anti-Virus</b></font></big>
<br>

blabla blabla

</div></p>

</div>

Donc je voudrai placer ces 4 images carrés (2 en haut 1 gauche 1 droite) les 2 autres juste au-dessous des deux autres (2 en bas 1 gauche 1 droite)
ce qui me donnera un grand carré diviser en 4, si lon peut dire . Et comme je suis du genre assez consciencieux, moi rien ne m'arrête quand je veux vraiment apprendre quelque chose, je suis plutôt têtu dans ce genre de challenge. Grâce à toi j'ai pas mal avancé, car sur toutes mes pages il y a beaucoup d'images de ce genre, je fais pour l'instant au plus simple avec les boxe arrondies au 4 coins.

Merci pour tout oh grand Magicien (du moins sur la photo), mais je suis bloqué et le reste.

Serge

IE 6 a été fort sur un point: le mode inline-block

<div classe="box">
    <img src="images/box2avg.png" />
    <p>Texte</p>
</div>

.box
{
    display: inline-block;
    width:150px; 
}
/* Hack pour Firefox <= 2.0 */
body:empty .box
{
    display: -moz-inline-box;
}

warry a écrit :
IE 6 a été fort sur un point: le mode inline-block

Qui ne marchera pas ici car tu l'appliques à un élément de type bloc (DIV), et pas à un élément de type en-ligne. IE6 (et IE7) n'a été que moyennement fort pour le coup.

Florent V. a écrit :

Qui ne marchera pas ici car tu l'appliques à un élément de type bloc (DIV), et pas à un élément de type en-ligne. IE6 (et IE7) n'a été que moyennement fort pour le coup.

Si si ca fonctionne, ca permet d'aligner par exemple des blocs de manière centrée.

Bonsoir à tous les deux, et merci pour le code de warry, et merci à toi
Florent V. pour la critique " mon grand-père que je n'ai jamais connu m'a toujours dit " Mon enfant la critique est facile, mais l'art est difficile. sorry its a joke ! Moi qui suis un débutant je suis entraint de me mélanger les crayons et ne sais plus qui à raison ou non. Mais jèssayerai le code à Warry et on verra ce qu'on verra. Si ça marche tant mieux et sinon, dans ce forum merveilleux et compréhensible, d'autres personnes viendront très certainement à mon aide. Au secours, je flanche, je suis près de la syncope. Merci à tous.

Serge

warry a écrit :
Si si ca fonctionne, ca permet d'aligner par exemple des blocs de manière centrée.

Non non, ça ne fonctionne pas.

Voici le code d'une page de test à visualiser avec Firefox 3, Firefox 2, Safari ou Opera, et surtout Internet Explorer 6 et 7. On constatera que le display: inline-block ne prend pas pour les éléments DIV (éléments de type bloc) dans Internet Explorer 6 et 7.

<!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="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
	body {
		text-align: center;
	}
	div, span, p {
		width: 100px;
		margin: 10px;
		background: #faa;
	}
	div, span {
		display: inline-block;
	}
	</style>
</head>

<body>

<h1>Test de display: inline-block</h1>
<h2>DIV en display: inline-block</h2>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<h2>SPAN en display: inline-block</h2>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>

<h2>P en display: block (par défaut)</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

</body>
</html>

Hallo Florent V.

après vérification de ton code et regardé ca, je m'appercois que tout est décalé.

En faite ce que je voudrai faire je t'envoie une miniature et tu verra de toi même. Oublie svp le background c'était pour palcer les 4 images que je veux placer sur la page centrale (j'ai un site 2 colonnes 1 coté 3 menus l'un en dessous de l'autre et ma page centrale. Comment puis-je faire ? En te remerciant à l'avance pour ton aide.

un peu déformé l'image, mais bon tu vois 4 boxes.

Oh, á propos, je voudrai aussi écrire sur les images. Merci