Titre: images
Posté par: Elfy75 le le 08-04-2012 a 18:28:48
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 |
Titre: Re:images
Posté par: vieactu le le 09-04-2012 a 14:49:41
| Tu as essayé avec background-repeat: repeat-y ; ? |
Titre: Re:images
Posté par: WebD le le 09-04-2012 a 17:37:49
Salut,
Il te suffit de faire un float:left sur chaque image.
Olivier. |
Titre: Re:images
Posté par: Elfy75 le le 10-04-2012 a 09:14:40
| merci pour vos conseils je vais essayer tout de suite |
Titre: Re:images
Posté par: Elfy75 le le 10-04-2012 a 09:53:30
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. |
Titre: Re:images
Posté par: 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 |
Titre: Re:images
Posté par: Elfy75 le le 11-04-2012 a 15:16:59
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? |
Titre: Re:images
Posté par: dandreaweb le le 11-04-2012 a 20:54:54
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.
|
Titre: Re:images
Posté par: Elfy75 le le 11-04-2012 a 21:04:21
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>
|
|
|
Titre: Re:images
Posté par: WebD le le 11-04-2012 a 21:05:40
| Remplace float="left" par style="float:left;" |
Titre: Re:images
Posté par: Elfy75 le le 11-04-2012 a 21:11:02
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 |
Titre: Re:images
Posté par: 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. |
Titre: Re:images
Posté par: Elfy75 le le 11-04-2012 a 22:43:35
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 :) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|