CSS, probleme de clear:both ?

Consultez la formation au REFERENCEMENT naturel Google de WebRankInfo / Ranking Metrics

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

CSS, probleme de clear:both ?

Message le Mar Mai 17, 2005 14:49

Bonjour,
je tente de passer mon site en css 3 colonnes dynamiques.
code feuille de style :
#conteneur {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding: 0;
background-color: #fff;
}
#centre {margin-left:20%;margin-right:20%;margin-top:10px;padding:10px;background-color:#E9F0FC;border:1px solid #000099;}
#gauche {float: left;width: 20%;}
#droite {float: right;width: 20%;}

page -http://www.landes-tourisme.info/modele.php

Ca marche sans probleme sauf que quand je met dans le div id="centre" une image et que je veux empecher le chevauchement des blocs par un bloc separateur contenant le style
clear:both;
cela fait descendre mon menu de gauche sous le bloc separateur. Je comprends pas pourquoi le clear:both annule le flux du menu gauche?
Comment faire pour empecher le chevauchement des images ?
hum, j'espere avoir ete clair....
Merci a vous

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 14:56

Euh... juste pour comprendre :
Ton menu de gauche c'est celui qui s'appelle menu gauche et qui est à droite ?

Sinon, je n'arrive pas bien à comprendre où est ton image et ton problème.

Peux-tu expliciter voire même faire une page qui marche et une qui marche pas ?

++

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 15:00

merci a toi,
la tu avais le separateur sans clear:both; et maintenant je met le separateur avec.
.separateur{border-bottom:dashed 1px #ccc;padding:5px 0px;clear:both;}
en fait maintenant c'est le corps qui passe au dessous des menus

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 15:03

Je sais, j'ai fini par trouver :

Il ne faut pas utiliser de clear sur un objet qui n'a pas la propriété float.

Ton #centre n'est pas flottant et si il se place bien dans ta page, c'es t parce que tu lui mets une marge.
Mais quand tu lui dis de clear:both, lui n'a pas de raison de flotter et donc est prioritaire pour garder sa position. Résultat ce sont des divs flottant qui s'écartent.

++

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 15:06

Ok, je vois mais comment palier a cela?
merci de ton aide ;-), pas si simple les css

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 15:28

Je crois que j'ai trouvé l'astuce, un pixel en witdh 100%... mais la c'est le texte dans la balise p qui apparait amoitie sous IE....

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 15:50

Le plus simple, ca serait de mettre ton div #centre avec un float:left; et tu pourras supprimer les margin:20%. Limite ton div #droite tu pourrais aussi le passer en float:left. A ce moment-là, ça suivra l'ordre normal (gauche, centre, droite)

++

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 15:53

A oui et un conseil :

Evite de mélanger les carac de <div> <p> <hn>qui sont des blocks et <span> et <a> (par exemple) qui sont des éléments.

Rédige plutôt ton texte de la façon suivante :
<p><span>ton texte</span></p> Parfois, ça évite des grosses galères, surtout dans les imbrications.
En gros, dans tes balises de block, tu mets tes caracs de blocs (width, height, float, background etc) et dans tes span et a tes caracs de police (font-size, font-weight, color)

C'est un peu plus galère, un poil plus lourd en terme de html, mais 1000 fois plus souple à l'usage.

++

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 16:00

Merci du conseil, c'est mes débuts CSS et c'est vrai que c'est pas encore super clair.

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 16:02

Jderamaix a écrit:Le plus simple, ca serait de mettre ton div #centre avec un float:left; et tu pourras supprimer les margin:20%. Limite ton div #droite tu pourrais aussi le passer en float:left. A ce moment-là, ça suivra l'ordre normal (gauche, centre, droite)

++

j'avais essayé mais ca marchais pas, je vais retester

thomaspirit
WRInaute discret
WRInaute discret
 
Messages: 71
Enregistré le: 24 Mar 2005

Message le Mar Mai 17, 2005 16:45

Oui, je passerais le #centre comme ça

#centre {
overflow: hidden;
float: left;
width: 55%;
}

le "width: auto;" marcherais bien aussi à tester ...

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 16:46

avec cette technique ca fonctionne mais je suis obligé de caller la largeur du bloc centre en % et cela ne marche pas si le total des % des bloc = 100%, le centre doit resté inferieur a 56% pour que ca marche et qd oon reduit, arrive a une certaine largeur le bloc de droite passe au dessous, y'a t'il un moyen de garder les colonnes en ligne ?
Merci a vous

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 17:24

thomaspirit a écrit:Oui, je passerais le #centre comme ça

#centre {
overflow: hidden;
float: left;
width: 55%;
}

le "width: auto;" marcherais bien aussi à tester ...

ca fonctionne pas mieux, des que ca reduit de trop la colonne droite passe au dessous... et je voudrais bien qu'elle reste la !!!!!!!!
Merci

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 17:31

L'histoire du total <100% ça vient d'un petit soucis d'interprétation entre IE et FF.
Quand tu spécifies border, margin (et padding, mais pas sûr, faudrait que je vérifie), FF les fusionne avec ta valeur width. IE les ajoute à ta width.

Par exemple si tu fais
#div {width:100px; margin-left:10px;}
IE te fera un bloc de 110px de large et FF un bloc de 100px

C'est très très très chiant.

++

netsys
WRInaute passionné
WRInaute passionné
 
Messages: 1122
Enregistré le: 17 Juil 2004

Message le Mar Mai 17, 2005 17:46


DISCRET
WRInaute discret
WRInaute discret
 
Messages: 185
Enregistré le: 18 Oct 2004

Message le Mar Mai 17, 2005 18:00

pourquoi tu ne met pas une marge-left par exemple de 170px; à #centre ?

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 18:02

netsys a écrit:Voir tout à la fin de la page http://www.openweb.eu.org/articles/initiation_float/

biene t claire les explications, mais ca correspond presque a ce ou j'en suis maintenant et le probleme est toujours avec la colonne qui passe au dessous... difference entre IE et FF ca j'avais bien cru remarqué,c'est vraiment penible !!!, y'a pas une technique pour passer ce probleme ?

netsys
WRInaute passionné
WRInaute passionné
 
Messages: 1122
Enregistré le: 17 Juil 2004

Message le Mar Mai 17, 2005 18:08

IE et FF n'interprete pas de la même maniere, c'est un fait !
Quand t'a un elt bloc avec un float dans un autre elt de type bloc la hauteur de l'element conteneur n'est pas spécifié sauf si il est lui meme assicié aun float ( et c'est ce qu'affiche FF)

Jderamaix
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 322
Enregistré le: 15 Fév 2005

Message le Mar Mai 17, 2005 18:11

Ta colonne passe en dessous quand tu as plus de longueur dans tous tes éléments additionnés que dans l'espace imparti.

D'ailleurs, tu verras sur IE que c'est légèrement différent : seule ta colonne de droite est en bas.

Mon conseil est de virer tous les margin, padding et borders sur tes 3 blocs. Si déjà là, ça marche tu sais où ça pêche !

Pour palier ce merdier, personnellement, j'imbrique des divs si nécessaire... Oui, je sais, c'est nul.

++

netsys
WRInaute passionné
WRInaute passionné
 
Messages: 1122
Enregistré le: 17 Juil 2004

Message le Mar Mai 17, 2005 18:11

Et cette page ca t'arrange mieux ? http://css.alsacreations.com/Modeles-de ... age-en-CSS
Bon courage

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mar Mai 17, 2005 18:18

netsys a écrit:Et cette page ca t'arrange mieux ? http://css.alsacreations.com/Modeles-de ... age-en-CSS
Bon courage

C'est celle qui m'a permi de demarrer ce modele ;) par contre openweb, je vais explorer ca semble etre un mine aussi ;-) merci a toi.
Imbriquer des div, pas bete, je vais faire des essais ce soir
Merci pour votre aide en tout cas, vraiment actifs les membres de WRI ;-)

krAsh
WRInaute discret
WRInaute discret
 
Messages: 102
Enregistré le: 2 Fév 2005

Message le Mer Mai 18, 2005 11:20

J'ai à peu près le même problème que toi...
Sur mon site en 3 colonnes (float, center, float), j'ai une image flottante au centre et dès que je fais un clear: both pour passer en dessous de l'image... je me retrouve en dessous de mes 2 colonnes :(

Voilà je suis donc toujours à la recherche d'un truc "propre" pour régler ça ... :wink:

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Mer Mai 18, 2005 14:06

tu peux essayer avec un pixel width="100%", ca marche chez moi sauf que ca me colle un bug au niveau de l'affichage de l'article sous IE, celui-ci devient invisible, plus ou moins.... si tu fais le test et que ca colle fait le moi savoir, c'est que le bug chez moi aura une autre origine.
merci

krAsh
WRInaute discret
WRInaute discret
 
Messages: 102
Enregistré le: 2 Fév 2005

Message le Mer Mai 18, 2005 21:34

Ca à l'air de bien fonctionner pour moi... J'ai pris un width de 90 % parce que ça n'allait pas à 100 %.
Va voir sur le site ds mon www, les pixels sont entre chaque images centrales et son url en dessous... Dis moi si tu vois quelque chose qui va pas

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Enregistré le: 14 Nov 2004

Message le Jeu Mai 19, 2005 8:35

J'ai regardé sous IE et FF, ca colle sans probleme, t'as ta soluce ;).
Moi j'ai encore un bug d'affichage sous IE, en bas de page, lors que tu scrolles, les div deviennent partillement transparent, la transparence evolue avec le scroll....
Si quelqu'un a une idée ...
La page -http://www.landes-tourisme.info/modele.php

krAsh
WRInaute discret
WRInaute discret
 
Messages: 102
Enregistré le: 2 Fév 2005

Message le Jeu Mai 19, 2005 10:21

Bah merci à toi pour la soluce ;)

Pour ton problème, je vois pas comment faire. Il me semble que j'avais le même problème qd j'utilisais un float: right sur ma partie "centre" et en utilisant le 'clear: both;'... J'avais en fait la couleur background de ma partie gauche qui passait à certains endroits dans "centre".

Le jour où les browsers suivront tous le même standard ...


Formation recommandée sur ce thème :

Formation REFERENCEMENT naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :