28221 sujets

CSS et mise en forme, CSS3

[Résolu] Problème sur un Liquid layout à 3 colones

Salut à tous,

J'ai un design 3 colonnes comme décrit dans l'article de Alistapart ( http://www.alistapart.com/articles/negativemargins/ ) mais je me heurte à un problème. J'utilise le layout à 3 colonnes ( http://www.alistapart.com/d/negativemargins/ex5.htm ).

Si dans le premier paragraphe, je mets une image en "float: left", je ne vois pas comment forcer le retour à la ligne pour le second paragraphe. "clear:both" ne fonctionne pas si le contenu de la colonne de gauche est trop long. Le second paragraphe se retrouve alors en dessous du contenu de la colonne de gauche.
Modifié le 12 Feb 2005 - 02:27
Bonjour shrom et bienvenue sur le forum Alsacreations !

Puisque tu en es à tes premiers balbutiements sur ce forum, on ne connait pas ton niveau en HTML et CSS. Ce que je peux dire à propos des "Layouts with Negative Margins" auxquels tu fais référence, c'est qu'ils sont d'une rare complexité. Donc, si tu veux créer avec un tel design à la base, faudra être patient et surtout "très" précis dans tes questions, parce que même quelqu'un de très familier avec CSS se perd rapidement dans ce type de mise en pages.

Un exemple en ligne du problème serait un atout.
Modifié le 11 Feb 2005 - 17:55
C'est vrai que je ne me suis pas présenté.

Alors voila, je développe pour le web depuis maintenant 6 ans, j'ai donc de bonne connaissance en (X)HTML un peu moins en CSS mais je me débrouille.

J'ai mis un exemple ici:
http://www.libre-entreprise.info/css/ex5.htm

Comme on le vois, le second paragraphe se retrouve relégué après le menu de gauche. Je voudrais juste qu'il se trouve sous l'image en bleu. Je ne vois pas pourquoi le "clear: both" force cette mise en page, il ne devrait agir qu'à l'intérieur du div#main.
Ça me semble normal comme comportement.

<div id="left"> avec float: left;

et

<div class="clearing"> </div> avec clear: both;

Recommandation CSS2 du W3C a écrit :

both
La boîte générée se déplace sous chacune des boîtes flottantes qui sont issues d'éléments précédents du document source...

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-clear

Si tu nous expliquais plutôt le résultat souhaité ?

<edit />
[ Oups ! Tu l'as déjà dit Smiley confused ]
Modifié le 11 Feb 2005 - 18:30
Quelque chose dans ce genre :

<div id="main">
 <h1>content</h1>
 <img src="test.gif" style="float:left;" /><p style="float:right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
 <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
 <div class="clearing">&nbsp;</div>
</div>


Bon. Smiley fache Je viens de vérifier dans Internet Explorer et c'est cassé.
Modifié le 11 Feb 2005 - 19:10
Comme ça je pense que c'est réparé :

<div id="main">
 <h1>content</h1>
 <img src="test.gif" style="float:left;" /><p style="clear:right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
 <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
 <div class="clearing">&nbsp;</div>
</div>

Et l'image, elle "doit" être dans le paragraphe ?
Modifié le 11 Feb 2005 - 19:20
Voilà :

<div id="main">
 <h1>content</h1>
 <p style="clear:right;"><img src="test.gif" style="float:left;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
 <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
 <div class="clearing">&nbsp;</div>
</div>
Stephan a écrit :

Et l'image, elle "doit" être dans le paragraphe ?


Sémantiquement, l'image illustre le paragraphe, elle devrait donc en faire partie.

La solution donnée précédemment ne fonctionne pas non plus comme désiré. Je crois que je vais me résigner à ne pas utiliser d'images ou à modifier mon design.
Avec ce code:

<div id="main">
    <h1>content</h1>
    <p style="clear: right;">
        <img src="test.gif" style="float: left;" />Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit.  Phasellus varius eleifend tellus. 
        Suspendisse potenti.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
        per inceptos hymenaeos.
        Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
        arcu.
    </p>
    <p class="last">
         Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, 
         adipiscing ac, erat. 
         Integer nonummy mauris sit amet metus.
         In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia 
         libero, sed aliquet urna diam sed tellus.
         Etiam semper sapien eget metus.
    </p>
</div>

J'obtiens ceci:

upload/943-result.gif

pourtant, en théorie ça devrait marcher.

Testé avec FF 1.0 et IE 6.0
Arf... j'avais laissé trainer ceci d'un essai précédent :

.last {
	margin-bottom: 0;
	margin-top: 200px;
}

Pour ma punition, je vais encore me pencher sur ton problème...
Bon. Là je pense qu'on y est. Smiley langue 

<div id="main">
 <h1>content</h1>
 <p style="float: right; width: 100%;"><img src="test.gif" style="float: left;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
 <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
 <div class="clearing"> </div>
</div>

Cependant, un décalage apparait entre <h1> et <p> (Selon qu'on regarde avec IE ou Firefox).
L'emploi du sélecteur universel règle ce problème (supprime padding et margin par défaut).

* {padding: 0; margin: 0;} /* placer au sommet de la feuille de style */

Tu nous dis ce que ça donne... Smiley cligne
Smiley smile Mon sauveur.

Le petit défaut de décalage n'est pas trop génant, le sélecteur:
* {padding: 0; margin: 0;} /* placer au sommet de la feuille de style */

supprime tous les margin et padding, c'est plus génant que le petit défaut qui apparait sans.

Je te remercie grandement et vais enfin pouvoir finir le site.

A charge de revanche.
Super !

Un petit [Résolu] serait apprécié dans ton titre en éditant ton premier post (celui qui a servi à créer ton sujet).

Merci d'avoir voyagé avec Alsacréations ! Smiley youpi
Sujet clos
Aller à