problème de DIV

23 févr. 2008, 12:56

Bonjour,

j'essaye de me construire un template de site, mais je rencontre un problème embêtant au niveau d'un div.

J'ai réussi à placer tous mes div, sans utiliser de position: ; mais il en reste un qui fait des siennes.
Pour mieux voir ça, deux URL :

celle qui donne ce que je souhaiterai avoir, mais sans le min-height:350px; dans le CSS :
http://wir3d.net/sites/template/good/ (fichier css : http://wir3d.net/sites/template/good/styles.css)

Et ce que ça donne lorsque j'enlève ce min-height:350px; :
http://wir3d.net/sites/template/bad/ (fichier css : http://wir3d.net/sites/template/good/styles.css)

Comme on le voit bien sur le fichier HTML, le probleme se trouve sur le <div id="main">, avec la bordure rouge. Lorsque j'enlève le min-height, j'aimerai qu'il englobe les <div id="main_left"> et <div id="main_right">. Or, ce n'est pas le cas.

Comment corriger ça ?

23 févr. 2008, 13:39

salut

vu que t as du float, il faut "retablir le flux", donc un clear: both
par contre soit tu utilises un element vide pour appliquer le clear
soit un 'hack' du style :

Code : Tout sélectionner

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

plus d info ici en anglais
http://www.positioniseverything.net/easyclearing.html

ou tape clearfix sous google

23 févr. 2008, 14:27

J'ai tenté la méthode hack, vu qu'en lisant l'article linké, il disent que c'est la nouvelle méthode.

Vu que je l'ai pas compris si c'était le CSS ou le div de hack qu'il fallait placer tout en bas, j'ai mis le CSS tout en bas de ma stylesheet, et le div tout en bas de mon site, mais le problème n'est pas résolu. Rien n'a bougé.

http://wir3d.net/sites/template/bad/

http://wir3d.net/sites/template/bad/styles.css

23 févr. 2008, 14:52

non

c est une class que tu appliques directement au containeur
donc

Code : Tout sélectionner

div id="Site" class="clearfix">

au fait tu es sous quel navigateur?

23 févr. 2008, 15:10

oups dans ton #main pas #site

Code : Tout sélectionner

<div id="main" class="clearfix">

je suis alle trop vite

23 févr. 2008, 16:53

tant que j y suis

dans ton select #site
supprimes la position fixed qui ne sert a rien et foire ton contenu <ie7

pour etre plus complet vu que je suis reparti dedans
(et pour ne pas me faire taper sur les doigts avec un hack

1)

Code : Tout sélectionner

.clearBr {     
 clear: both;    
 height: 0;
 font-size: 1px;
 line-height: 0px; 
}

a utilser sous les elements flottants

Code : Tout sélectionner

<br class="clearBr"/>

voir hr aussi

2)

Code : Tout sélectionner

.clear {
 overflow: hidden;
  height: 1%;
}

a utiliser dans le container incluant les flottants

3) le hack
voir plus haut

liens en relation
http://www.robertnyman.com/2007/04/12/h ... explained/
http://www.css4design.com/blog/pour-ret ... -br-ou-div
http://openweb.eu.org/articles/initiati ... nexe1.html

celui ci tres interessant:
http://www.test.blog-and-blues.org/hasl ... _temp.html

23 févr. 2008, 16:57

Modération :
johnass, afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

23 févr. 2008, 17:46

Ok ça marche mieux maintenant. Johnass, pourrais-tu m'expliquer brièvement a quoi servent le 1) et le 2) s'il te plait, alors que ma mise en page est parfaite, seulement avec le style .clearfix ?

23 févr. 2008, 20:40

j aime taper un long texte et que mon browser plante

je vais racourcir

en gros :
un lien en anglais qui compare les methodes

http://css-discuss.incutio.com/?page=ClearingSpace

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

problème de DIV

Qui est en ligne