Webmaster Hub > Positionnement image avec CSS

Version complète: sur le forum Webmaster Hub : Positionnement image avec CSS

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Valhala

dimanche 23 janvier 2005 à 23:40

Bonjour,

j'apprend le css et j'arrive a un problème; j'aimerais avoir 5 image par lignes avec le titre en dessous de chaque image. J'ai utilisé float pour ca

CODE

.imagefloat
{
float: left;
margin: 10px 10px 10px 10px;
padding-right: 10px;
}

Mais ca ne fonctionne pas, y a t il un autre moyen ?

Merci beacoup

Perrine

dimanche 23 janvier 2005 à 23:42

Bonsoir Valhala

Qu'est ce qui ne fonctionne pas ?
Les images ne s'alignent pas ? Les titres ne sont pas placés au bon endroit ?

Peux-tu nous donner une url ou au moins un extrait de code ?

Valhala

dimanche 23 janvier 2005 à 23:46

C'est les titres qui sont décalés vers la droite

Voila un exemple

Perrine

lundi 24 janvier 2005 à 00:11

la classe que tu donnes ci-dessus ne s'applique que pour l'img "avatar".

Pour les vignettes violettes, c'est la classe imagefloat2 et en allant voir ta CSS, il y est écrit ça :

CODE

.imagefloat2
{
margin: 10px 10px 10px 20px;
}

donc il n'existe pas de float.

Ceci dit, pour que ton titre soit centré sous ton image, il va falloir que tu crées un div pour chaque couple d'img / titre. Sans ça, je ne vois pas comment positionner le titre précisément sour l'image.

Valhala

lundi 24 janvier 2005 à 00:29

Ok merci, c'est ce que je craignais. Ben tant pis alors

Merci encore

Ernestine

lundi 24 janvier 2005 à 19:45

Je pense que tu peux résoudre ton problème en utilisant une liste de définitions, comme :

CODE

<dl>La suite d'images
<dt>image 1</dt>
<dd>titre 1</dd>
<dt>image 2</dt>
<dd>titre 2</dd>
etc...
</dl>

Comme expliqué ici vers les trois quarts de la page. Désolée, je donne l'adresse du cache de google, car pompage.net semble avoir des soucis techniques aujourd'hui...
Ernestine

Valhala

lundi 24 janvier 2005 à 20:08

Merci, je vais éssayer ca demain

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.