[RESOLU]Utilisation de hr invible pour des blocs textes avec float

Salut,

J'ai une mise en page a faire avec des blocs textes, avec dedans une image qui flotte a gauche, puis un lien "+ d'infos" qui flotte a droite.

Il y a 4 blocs contenant ce que je viens de decrire qui s'empillent horizontalement, le nombre de caracteres de ceux ci n'etant pas le meme pour chaques, j'utilise un hr invisible avec la propriété clear:both. pour espacer les blocs avec la meme intervalle.

Je dois mal me debrouiller avec le hr invisible,j'arrive a obtenir un espacement égal entre chaques blocs en attribuant une hauteur aux <p> (la hauteur est mise en commentaire dans la page que je poste), ça me donne a peu pres ce que je veux mais si je redimensionne la taille du texte c'est la cata, puis c'est pas correct comme methode, je devrais pas etre obligé de faire ça.

J'ai mis le CSS dans la page, et ai "encadré" par des commentaires la partie concerné

Devant utiliser sur certains liens des target=''_blank" je veux passer ma page en transitionnel, mais ma syntaxe n'est pas correcte visiblement, je parviens pas a trouver ce qui va pas, mon probleme peut il etre generé par ça ?

Voila la page

Merci de votre aide.
Modifié par Hum (19 Jun 2006 - 23:30)

Bonsoir,
Je ne pourrais pas t'expliquer pourquoi le <hr> ne suffit pas mais il
y a une solution plus simple et plus economique qui consiste à doter le <p> conteneur d'un float:left. En effet les flottant s'adaptent à leur contenu même s'il est flottant. Tu pourras supprimer tes <hr>
Sinon tu as quelques lourdeur dans le code que tu pourrais éviter:
au lieu d'attibuer une class a toutes tes image flottantes, il vaut mieux le préciser dans la css pour gangner en efficacité et en poid,
j'ai ajouté une marge basse de 10 px et un padding bas de 20 px
et mis ton line-height en unité relative. Un line-height en px ne s'agrandira
pas quand tu vas augmenter la taille du texte.

#colonne2 p  {
		float:left; 
		margin: 0 10px 10px 0; 
		padding: 0 0 20px 10px; 
		line-height: 1.7em;
		color: white;
		background: gray;
}

#colonne2 p img { 
float: left; 
margin: 5px 10px -4px 0;
}

Modifié par Hermann (19 Jun 2006 - 19:36)

Contentes-toi d'utiliser une autre technique que l'élément rajouté avec clear: both.

Ce n'est pas comme s'il n'y avait pas le choix :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-2.html
Modifié par mpop (19 Jun 2006 - 23:00)

Hello Herman,

Chapeau, t'as bon sur toute la ligne apparemment, tout est rentré dans l'ordre.

Je piges mal l'histoire de mettre le conteneur <p> en float mais ça fonctionne a merveille, j'ai virer les hr, et bien vu aussi pour le ciblage des image qui flottait.



@mpop: Merci, je vais lire cette page aussi...
Modifié par Hum (19 Jun 2006 - 23:13)

Hum a écrit :
Je piges mal l'histoire de mettre le conteneur <p> en float mais ça fonctionne a merveille, j'ai virer les hr, et bien vu aussi pour le ciblage des image qui flottait.

Hum, est-ce que ces propriétés ne créeraient pas un nouveau contexte de formattage de bloc ?

a écrit :
Les flottants, les éléments en positionnement absolu, les inline-blocks, les table-cells et les éléments dont la propriété overflow a une valeur autre que visible établissent de nouveaux contextes de formatage bloc.

Blog & Blues : Float, clear et contextes de formatage
Modifié par mpop (19 Jun 2006 - 23:44)

Merci pour le lien mpop, a vari dire j'ai pas encore relu l'article parlant de ces histoires de contextes de formatages et ou haslayout...