images - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  images

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: images (Lu 4215 fois)

images
« sur: le 08-04-2012 a 18:28:48 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Bonjour à tous,
Je cherche sans résultat, a créer des lignes d'images à l'horizontale, les une derrières les autres.
La seule solution de j'ai trouvé jusqu'à présent, était de fixer une position avec une valeur left toujours plus grande à chaque image. Je doute forcément que se soit la plus simple, et la plus rapide.
Je voulais modifier le display mais à ma conaissance une image est de type inline.
Voici ce que je cherche à faire:
http://www.djibe.com/serie1.html (C'est mon tout premier site pour lequel je suis passé par ce que je disais précédemment, à savoir une position absolute avec des valeurs left de plus en plus grande)
Je vous souhaites à tous de joyeuses fêtes de pâques.
Charlotte

Rapporter au modérateur

Re:images
« Répondre #1 sur: le 09-04-2012 a 14:49:41 »

vieactu
Superactif

Hors-Ligne

Messages: 503

Tu as essayé avec background-repeat: repeat-y ; ?

Rapporter au modérateur

Re:images
« Répondre #2 sur: le 09-04-2012 a 17:37:49 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Salut,
Il te suffit de faire un float:left sur chaque image.

Olivier.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:images
« Répondre #3 sur: le 10-04-2012 a 09:14:40 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

merci pour vos conseils je vais essayer tout de suite

Rapporter au modérateur

Re:images
« Répondre #4 sur: le 10-04-2012 a 09:53:30 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: WebD le le 09-04-2012 a 17:37:49
Salut,
Il te suffit de faire un float:left sur chaque image.

Olivier.

Le float left me génère tout de même un retour à la ligne suivante.

Rapporter au modérateur

Re:images
« Répondre #5 sur: le 10-04-2012 a 18:36:56 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Ca m'étonnerai...
Si sur chaque image tu mets float:left; et tu enlèves position:absolute; alors ça marchera.

A+

Olivier

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:images
« Répondre #6 sur: le 11-04-2012 a 15:16:59 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: WebD le le 10-04-2012 a 18:36:56
Ca m'étonnerai...
Si sur chaque image tu mets float:left; et tu enlèves position:absolute; alors ça marchera.

A+

Olivier
Olivier,
j'ai bien enlever ma position:absolute; et mis un float:left; mais j'ai quand même un retour à la ligne je ne sais pas à quoi c'est dût une idée?

Rapporter au modérateur

Re:images
« Répondre #7 sur: le 11-04-2012 a 20:54:54 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

Bonsoir,
Essayer de mettre votre code pour que l'on puisse vous aidez un peu plus mais WebD a raison, le " float:left; " vous permettra d'avoir vos images côte à côte.

Rapporter au modérateur

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618

Re:images
« Répondre #8 sur: le 11-04-2012 a 21:04:21 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Bonsoir,
Merci, voici mon code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>elfy</title>
</head>

<body>
<img src="images/1/photo_elfy_01.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_02.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_03.jpg" width="667" height="500" float="left"/>
<img src="images/1/photo_elfy_04.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_05_1.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_05_3.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_05_4.jpg" width="667" height="500" float="left"/>
<img src="images/1/photo_elfy_05_5.jpg" width="667" height="500" float="left"/>
<img src="images/1/photo_elfy_05_6.jpg" width="357" height="500" float="left"/>
<img src="images/1/photo_elfy_05.jpg" width="667" height="500" float="left"/>
<img src="images/21/photo_elfy_122.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_121.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_123.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_124.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_125.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_126.jpg" width="357" height="500" float="left"/>
<img src="images/21/photo_elfy_127.jpg" width="357" height="500" float="left"/>
</body>
</html>

Rapporter au modérateur

Re:images
« Répondre #9 sur: le 11-04-2012 a 21:05:40 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Remplace float="left" par style="float:left;"

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:images
« Répondre #10 sur: le 11-04-2012 a 21:11:02 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: WebD le le 11-04-2012 a 21:05:40
Remplace float="left" par style="float:left;"

Il m'aligne 3 images à la suite très bien comme je le voudrais puis passe à la ligne ensuite ect... je sèche un peu

Rapporter au modérateur

Re:images
« Répondre #11 sur: le 11-04-2012 a 21:44:30 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Les images sont en "float" jusqu'à atteindre le bord du contenant.
Il faut que tu mettes une div qui contient tes images d'une largeur égale à la somme des largeurs de tes images.

Bon courage.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:images
« Répondre #12 sur: le 11-04-2012 a 22:43:35 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: WebD le le 11-04-2012 a 21:44:30
Les images sont en "float" jusqu'à atteindre le bord du contenant.
Il faut que tu mettes une div qui contient tes images d'une largeur égale à la somme des largeurs de tes images.

Bon courage.
Merci pour le conseil
Bonne soirée