[Résolu]Probleme de mise en forme !

Tout d'abord, bonjour tout le monde.

J'ai découvert ce site il y a environ 1 mois. Depuis, je suis amoureux de la mise en page à l'aide de CSS.

Mais bon, c'est vraiment la galère !!!

Je progresse doucement mais surement.

Ce site et le livre de Raphaël m'ont permis de contourner pas mal de problèmes.

Excellente pédagogie dans le livre. (Excellent les remerciements ! A prendre au second degré !

Bon mais voilà, je bloque sur un truc tout bête.

je désire faire une mise en forme comme celle-ci :









Ce que j'ai fait :

Je place l'image et l'adresse dans le meme paragraphe avec des < /br> pour les sauts de ligne. Résultat: la seconde et la troisième ligne (le code postal et la ville ) se place en dessous de l'image.

Impossible d'utiliser un clear:both car l'image est toute petite donc ça ne sert à rien. Le texte passe quand m$ême en dessous.

J'y suis arrivé en mettant l'image dans un div (hauteur du div = mes 3 lignes de texte).Je le déclare en float: left. Là, pas de problème.

Mais bon, utiliser un div pour ca ne me paraît pas judicieux.

J'arrive à faire des mise en page comme cela dans des formulaires en utilisant les <label>.


Y a -t-il une façon propre de faire une mise en page si simple.

Merci d'avance.

PS: Question de débutant, désolé!
Modifié par SirPsycho (17 Nov 2006 - 19:05)

Bonjour.

J'utiliserais une liste de définition, avec les images en dt et les textes en dd :

<dl class="  fdsq  ">
       <dt><img ... alt="adresse" /></dt>
                <dd>65 rue du pont</dd>
                <dd>59000</dd>
                <dd>Lille</dd>
        <dt><img ...  alt=" ...   "/></dt>
                <dd>0123codebar</dd>

              etc...

</dl>

Du coup, c'est assez simple à styler css...

Bonjour SirPsycho.

Pour ma part, je pense qu'une simple liste non ordonnée ferait l'affaire.

Pour les icônes, il te suffit de placer un background aux items que tu désires et des les décaler grâce à un padding-left.

Pour cibler les éléments de la liste que tu veux styler différement des autres, tu peux soit leur atribuer un identifiant, soit combiner pseudo-classes (first-child, last-child, etc.) et sélecteurs de frères adjacents (ex: li + li).

Au fait, en passant:

SirPsycho a écrit :
Je place l'image et l'adresse dans le meme paragraphe avec des < /br> pour les sauts de ligne.

La syntaxe est <br /> et non < /br>

Heu, vous êtes sur que c'est mieux ?

Il va y avoir des problèmes de compatibilité avec (ce que vous savez) à cause de last-child, et personnellement je n'avais jamais osé les adjacents... (toujours par prudence)

Je trouvais que la liste de définition collait pas mal avec le concept, et le css peut rester simple avec une seule déclaration de classe...

dl.theClass {width  .... }
.theClass dt {float:left;width:30%}
.theClass dd {display:block;margin-left:32%}

Mais... pourquoi pas....

Merci beaucoup pour ces réponses rapides.

Je vais essayer les deux.


Une dernière question :

Pour une mise en pages d'annonces (date creation annonce, titre de l'annonce, texte de l'annonce...), peuxt-on utiliser des tableaux.

Est-ce considéré comme des données tabulaires?

Merci d'avance.

Plusieurs annonces: c'est une liste d'annonces.

des trois composantes de l'annonces, seul la date et le titre sont tabulaires. Le texte est un bloc peut-être complexe...

exemple :

<ul class="list_annonces">
	<li>
		<span>10-10-2006</span>
		<h3>Le titre de l'annonce</h3>
		<div>
			Le texte de l'annonce. <br />
			La deuxième ligne du texte...
		</div>
	</li>

	<li>
... annonce suivante
	</li>

Avantage : le css peut accéder à tout les éléments à partir de la classe "list_annonces":

.list_annonces {}
.list_annonces li {}     /* le conteneur de l'annonce */
.list_annonces span{}  /* la date */
.list_annonces h3{} /* le titre */
.list_annonces div {} /* le texte*/

Merci pour vos réponses.