CSS, probleme de clear:both ?

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

rtb
WRInaute passionné
WRInaute passionné
 
Messages: 1065
Inscription: 14 Nov 2004

CSS, probleme de clear:both ?

Message le Mar Mai 17, 2005 13: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
Inscription: 15 Fév 2005

Message le Mar Mai 17, 2005 13: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 14: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
Inscription: 15 Fév 2005

Message le Mar Mai 17, 2005 14: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 14: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 14: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
Inscription: 15 Fév 2005

Message le Mar Mai 17, 2005 14: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
Inscription: 15 Fév 2005

Message le Mar Mai 17, 2005 14: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 15: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 15: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
Inscription: 24 Mar 2005

Message le Mar Mai 17, 2005 15: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 15: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
Inscription: 14 Nov 2004

Message le Mar Mai 17, 2005 16: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
Inscription: 15 Fév 2005

Message le Mar Mai 17, 2005 16: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: 1121
Inscription: 17 Juil 2004

Message le Mar Mai 17, 2005 16:46


CSS, probleme de clear:both ?

Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

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 :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité