Jump to content
Sign in to follow this  
Kreestal

clear:both ne fonctionne pas

Rate this topic

Recommended Posts

Bonjour à tous :-)

Après plusieurs heures d'essais infructueux, basés sur une dizaine d'articles et de tuto consacrés aux blocs flottants et au clear:both, je m'adresse à vous dans l'espoir que quelqu'un m'aidera à résoudre assez gênant qui apparaît dans une CSS sur laquelle je suis en train de travailler.

Site en démo ici: http://kreestal.free.fr/needhelp

(Le PHP et les liens ne fonctionnent pas, c'est uniquement pour vous montrer le problème de CSS)

Le problème: la div grise, située à droite, passe par-dessus le footer, alors que celui-ci a bien la propriété clear:both. Je voudrais que le footer soit toujours au bas de la page (et non de la fenêtre comme c'était le cas il y a quelques temps).

Vous trouverez la CSS générale en entier à cette adresse, mais je vous poste ici les extraits qui me semblent les plus pertinents:

(la CSS spécifique au bloc de droite, qui contient le bloc à fond gris, se trouve, elle, à cette adresse)

/*Bloc contenu  */
#bloc_contenu {
padding: 0;
margin: 0;
width: 938px;
position: relative;
right: 0;
min-height: 550px;
}

#bloc_contenu_gauche {
float: left;
margin: 0 !important;
width: 680px;
padding: 10px 0 15px 0;
border:0px solid black;
min-height:250px;
}
#bloc_contenu_gauche h1 {
font-weight: bold;
text-align: left;
width: 100%;
border-width: 0px;
border-style : solid;
border-color: Black;
color: #ff7f00;
font-size: 1.6em;
padding: 0 0 10px 0;
margin: 0px 0 0 0px;
}

/* Colonne droite */
#bloc_contenu_droit {
margin: 0 !important;
width: 255px;
position: absolute;
top: 0;
right: 0;
border-width: 0;
border-style : solid;
border-color: #DFA300;
}
/* Footer */
#footer {
font-size: 0.85em;
padding: 2em 1em 2em 2em;
border-width: 1px 0 0 0;
border-style : dashed;
border-color: Black;
color: #787878;
[b]clear: both;[/b]
}

+ le HTML (allégé):

<div id="bloc_contenu">
<div id="bloc_contenu_gauche">

...
</div>

[b]<div id="bloc_contenu_droit">[/b]
<div id="bloc_pub" class="sous_bloc_droit">
Emplacement de bandeau publicitaire
250 * 250

</div> <div id="info_test" class="sous_bloc_droit">
<div class="top">
<div class="titre">TEST DE ZONE SUPPLEMENTAIRE</div>
</div>
<div class="middle">
ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ZONE POUR DU TEXTE SUPPLEMENTAIRE ...
</div>
<div class="bottom"> </div>

</div> </div>
</div>


[b]<div id="footer">[/b]
<div id='footerRight'>
FOOTER
</div>

Petite précision: sur ce projet je ne m'occupe que de la CSS, et non de l'architecture du site (je le dis pour prévenir les remarques sur le nombre de CSS incluses dans le header :whistling: ); d'autre part je ne me suis pas encore attelée à la CSS spécifique sur IE6: il vaut donc mieux éviter de visualiser le site avec pour l'instant - work in progress.

D'avance un grand merci! :thumbsup:

Edited by Kreestal

Share this post


Link to post
Share on other sites

Bonjour,

La propriété "clear" est utile lorsque tu positionne tes élément avec la propriété "float", dans ton cas le positionnement est effectuée en définissant "position: relative;" sur le parent de "bloc_contenu_droit" (c'est-à-dire "bloc_contenu") et ensuite en profitant du fait ce que cela crée un nouveau contexte de positionnement tu utilises la propriété "position: absolute;" sur "bloc_contenu_droit" et tu défini sa position absolue. Cela a pour effet de sortir "bloc_contenu_droit" du flux. Plus d'informations sur le positionnement : Comprendre le positionnement des éléments en CSS

Mon conseil est de plutôt passer par un positionnement par "float" si tu souhaite avoir un "footer" qui soit placé en dessous du plus long élément. Tu devra sûrement tirer avantage du procédé "Faux-Column" qui permet de combler visuellement le vide lorsqu'un colonne est plus longue que l'autre.

Bonne continuation.

Share this post


Link to post
Share on other sites

Bonjour, et merci beaucoup pour ta réponse rapide! :)

J'ai repris ma CSS en supprimant le "position:absolute" de la div bloc_cotenu_droit (la div à fond gris), en lui mettant un float:left et un margin-left de la largeur de la div qui vient avant elle, c'est à dire bloc_contenu_gauche (elle aussi en float:left). Cependant, bien que la div bloc_contenu_droit se place effectivement à droite de son parent (bloc_contenu), elle passe quand même sous la div à sa gauche, c'est à dire bloc_contenu_gauche.

Bout de CSS modifié (en gras, les éléments qui posent sûrement problème ou contiennent la solution):

/*Bloc contenu  */
#bloc_contenu {
padding: 0;
margin: 0;
[b]width: 938px;[/b]
[b]position: relative;[/b] - [i]est-cela qui pose problème?[/i]
right: 0;
min-height: 550px;
}

#bloc_contenu_gauche {
[b]float: left;[/b]
margin: 0 !important;
[b]width: 680px; [/b]
padding: 10px 0 15px 0;
border:0px solid black;
min-height:250px;
}
...

/* Colonne droite */
#bloc_contenu_droit {
[b]width: 258px;[/b]
[b]float:left;[/b]
[b]margin-left:680px;
top: 0;[/b]
border: 0;
}
/* Footer */
#footer {
font-size: 0.85em;
padding: 2em 1em 2em 2em;
border-width: 1px 0 0 0;
border-style : dashed;
border-color: Black;
color: #787878;
[b]clear: both;[/b]
}

Cf. capture pour comprendre d'un coup d'oeil le problème:

post-1-1181474629_thumb.jpg

Je comprends d'autant moins que la div bloc_contenu_droit contient "top: 0;"... ça veut donc dire qu'elle se place encore sous la div "bloc_contenu_gauche", or je ne comprends pas pourquoi vu que j'ai mis les 2 div en flottant, sans positionnement.

:wacko:

Share this post


Link to post
Share on other sites

Salut, essaie de faire ton bloc gauche (ou droit) à peine moins large...Et puis supprime le margin-left=680px dans ton bloc de droite

Share this post


Link to post
Share on other sites
Salut, essaie de faire ton bloque gauche (ou droit) à peine moins large...Et puis supprime le margin-left=680px dans ton bloque de droite

Merci beaucoup! Le problème est effectivement résolu en veillant à ce que les deux blocs ont suffisamment de place pour pouvoir être effectivement affichés côte à côte et en supprimant le dit margin-left.

Si un modérateur pouvait marquer le sujet comme résolu, ça serait pratique. :-) (nb: je n'ai pas réussi à éditer le sujet avec "Edition rapide", en cliquant sur le bouton "Terminer", rien ne se passe - m'obligeant à recommencer en choisissant "Edition complète"..)

Edited by Kreestal

Share this post


Link to post
Share on other sites
Si un modérateur pouvait marquer le sujet comme résolu, ça serait pratique. :-) (nb: je n'ai pas réussi à éditer le sujet avec "Edition rapide", en cliquant sur le bouton "Terminer", rien ne se passe - m'obligeant à recommencer en choisissant "Edition complète"..)

Ce n'est pas dans les habitudes du Hub de changer les titres en précédant celui-ci de [Résolu].

Nous n'avons aucune intention de sortir premier sur Google pour ce mot clé, et le fait d'ajouter un mot supplémentaire en début de titre dilue l'importance des mots clés du titre lui-même.

C'est donc une hérésie sur le plan du référencement :P

Share this post


Link to post
Share on other sites
Ce n'est pas dans les habitudes du Hub de changer les titres en précédant celui-ci de [Résolu].

Nous n'avons aucune intention de sortir premier sur Google pour ce mot clé, et le fait d'ajouter un mot supplémentaire en début de titre dilue l'importance des mots clés du titre lui-même.

C'est donc une hérésie sur le plan du référencement :P

Je ne disais pas ça dans cette optique (j'ignorais même que marquer "résolu" améliorait le référencement :!: ), mais pour éviter à d'autres utilisateurs du Hub de se casser la tête pour rien, ne sachant pas que le sujet est résolu - comme on m'a fait la remarque dans un précédent sujet. :-)

Edited by Kreestal

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...