Problème disposition d'image

Bonsoir à toutes et tous,


Mon site a évolué depuis mon dernier post. J'ai essayé de me débrouiller un maximum par moi-même et je ne suis pas trop mécontent de mon tout premier site web.

Néanmoins, je bloque sur le problème situé à l'URL suivante : http://www.lamaisondeleochille.be/activites.php

Cela saute aux yeux : la troisième image à gauche déborde de mon "cadre" de fond et je ne sais vraiment pas pourquoi.

Merci d'avance et bonne soirée,
Mildju
Modifié par Mildju (06 Oct 2010 - 20:29)

Pour le fond rajoute ca à la fin de ton fichier css:

#content{
     background-color:#fff;
}

puis dans ta page rajoutes:

<div style="clear:both"></div>

juste au dessus de:

<div id="footer" class="noprint">

ce qui donnera :

<div style="clear:both"></div>
<div id="footer" class="noprint">

Ca se trouve juste avec la clear:both ca va régler ton problème dans ce cas ne touche au css, mais bon j'ai pas trop épluché ton css ni ton code.

Az

Merci pour ta réponse rapide, mais même avec un clear, le résultat est toujours le même.

J'ai l'impression que la troisième image est en position "absolute"...

Bah non ca marche!

Tu rajoutes un "margin-top:20px;" dans ton css sur "#footer" en suite c'est que tu fermes ta div coin arrondis du bas trop tot

Az

EDIT:

voila tu fermes cette balise:

<div id="content" class="arrondi">

trop tôt il te faut la fermer presque à la fin de ta page sous "#footer".

Az
Modifié par AzRaElDGT (06 Oct 2010 - 21:34)

Bonsoir,

il faut rajouter overflow: auto; sur le div #content. Pour la compatibilité avec ie6, rajouter height: 1%;

#content {
	background-color:#F0FFD0;
	padding: 1em 1em 5em;
        overflow:auto;
        height: 1%; /* ie6 */
}

Ce comportement de dépassement est normal car le positionnement flottant sort les éléments du flux. Note que le fond va s'étendre à tout ce qui est imbriqué dans #content (donc jusqu'en bas de la page).
Modifié par bzh (06 Oct 2010 - 21:34)

J'ai aspiré ton code pour le regarder de plus près:

Et c'est ce qui me semblait...

tu as fais ca:

</div> la tu fermes ta balise coins arrondis.... donc c'est normal!
      <div style="clear:both"></div>
      <div id="footer" class="noprint">
        <p>
          Version 2.2 - Web design by <a href="mailto:mildju@gmail.com">Mildju</a>
        </p>
      </div>

alors essais ca:

      <div style="clear:both"></div>
      <div id="footer" class="noprint">
        <p>
          Version 2.2 - Web design by <a href="mailto:mildju@gmail.com">Mildju</a>
        </p>
      </div>
</div> Et la du coup tu va englober tous ton site dans le fond d'écran!

Grand merci à vous deux, car chaque solution fonctionne !

Questions subsidiaire : j'aurais voulu que le footer (Version 2.2 etc...) soit en dehors du fond clair (celui représentant content), comme sur la page d'accueil ou sur celle du gîte. C'est possible ?

PS : et tant que j'y suis, si quelqu'un a une idée du pourquoi la présence d'un espace entre ma bannière et le menu principal, je suis preneur !
Modifié par Mildju (06 Oct 2010 - 21:59)

Alors

Cette page à 3 erreurs W3C:

dans ton menu vires ca entre les balises li :   (au pire utilises un margin-right ou un padding right)

Les target="_blank" ne sont plus valides utilises ca plutot : <a href="ton_url" onclick="this.target='_blank'">ton_texte</a>

Pour l'espace au dessus de ton menu bah... Triches un peu en mettant un margin-top:-2px sur #main_menu

pour ton dernier problème il est simple je te laisse chercher un peu

Az
Modifié par AzRaElDGT (06 Oct 2010 - 22:19)

AzRaElDGT a écrit :
Alors

Les target="_blank" ne sont plus valides utilises ca plutot : <a href="ton_url" onclick="this.target='_blank'">ton_texte</a>

Non. Lire le sujet sur les nouvelles fenêtres.

AzRaElDGT a écrit :

Cette page à 3 erreurs W3C:

Non, il n'y a qu'une erreur (le target blank) qui est un choix personnel. Sur Firefox, cela m'ouvre un nouveau tab et je garde donc la page mère, ce que je trouve parfait. Le reste, ce sont des avertissements quand au character encoding. J'y jeterai un oeil plus tard...

AzRaElDGT a écrit :

dans ton menu vires ca entre les balises li : &nbsp; (au pire utilises un margin-right ou un padding right)

Oups, oui, tu as raison. Voilà qui est fait.

AzRaElDGT a écrit :

Pour l'espace au dessus de ton menu bah... Triches un peu en mettant un margin-top:-2px sur #main_menu

Idem, merci.

AzRaElDGT a écrit :

pour ton dernier problème il est simple je te laisse chercher un peu

Trop fatigué pour encore réflechir... Je ferai cela demain.

PS : mon site est tout foutu sous IE6 maintenant !!!
Modifié par Mildju (06 Oct 2010 - 22:42)

Mildju a écrit :

PS : mon site est tout foutu sous IE6 maintenant !!!

C'est signe de qualité donc plutôt une bonne chose !!

Toute façon avec des border raduis... Je crois que pour IE c'est mort fait comme nous attends la version 9 .... voir la 10

Plus sérieusement il va te falloir faire un css pour IE6 sans doute un autre pour IE7 sur IE8 ca devrait aller (sauf pour les border raduis) et quand microsoft va sortir le 9 bah... brûle un cierge en fesant une petite prière...

Az

IE6 ne tient pas compte des border-radius, en effet. Mais au moins, l'affichage était "correct" et la hauteur d'affichage suffisante... C'est comme ça depuis le changement recommandé par bzh. Je vais essayer autre chose, parce que beaucoup de gens utilisent encore IE6.
Modifié par Mildju (08 Oct 2010 - 13:25)

merci

AzRaElDGT a écrit :

pour ton dernier problème il est simple je te laisse chercher un peu

Franchement, je ne vois pas... Je donne ma langue au chat !

williamle123 a écrit :
merci

De la pub?