|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
rtb
WRInaute accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
 Posté le : Mar Mai 17, 2005 14:49 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 impliqué
Inscrit le: 15 Fév 2005
Messages: 291
|
| Posté le : Mar Mai 17, 2005 14:56 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 15:00 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 impliqué
Inscrit le: 15 Fév 2005
Messages: 291
|
| Posté le : Mar Mai 17, 2005 15:03 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 15:06 Sujet du message: CSS, probleme de clear:both ? |
|
|
Ok, je vois mais comment palier a cela?
merci de ton aide  , pas si simple les css |
|
| |
|
|
rtb
WRInaute accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 15:28 Sujet du message: CSS, probleme de clear:both ? |
|
|
| 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 impliqué
Inscrit le: 15 Fév 2005
Messages: 291
|
| Posté le : Mar Mai 17, 2005 15:50 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 impliqué
Inscrit le: 15 Fév 2005
Messages: 291
|
| Posté le : Mar Mai 17, 2005 15:53 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 16:00 Sujet du message: CSS, probleme de clear:both ? |
|
|
| Merci du conseil, c'est mes débuts CSS et c'est vrai que c'est pas encore super clair. |
|
| |
|
|
rtb
WRInaute accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 16:02 Sujet du message: CSS, probleme de clear:both ? |
|
|
| 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
Inscrit le: 24 Mar 2005
Messages: 71
Localisation: Paris
|
| Posté le : Mar Mai 17, 2005 16:45 Sujet du message: CSS, probleme de clear:both ? |
|
|
Oui, je passerais le #centre comme ça
#centre {
overflow: hidden;
float: left;
width: 55%;
}
le "width: auto;" marcherais bien aussi à tester ... |
|
| |
|
|
rtb
WRInaute accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 16:46 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 accro
Inscrit le: 14 Nov 2004
Messages: 1054
Localisation: tout en bas, tout à l'ouest
|
| Posté le : Mar Mai 17, 2005 17:24 Sujet du message: CSS, probleme de clear:both ? |
|
|
| 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 impliqué
Inscrit le: 15 Fév 2005
Messages: 291
|
| Posté le : Mar Mai 17, 2005 17:31 Sujet du message: CSS, probleme de clear:both ? |
|
|
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 accro
Inscrit le: 17 Juil 2004
Messages: 1096
|
|
| |
|
|
| |
|
|
