28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise Joomla pour un site internet et je rencontre un problème d'affichage. Ce problème semble indépendant du navigateur et de la résolution d'écran puisque on le retrouve sur IE ou Firefox sur des résolutions d'écrans différentes et pas sur toutes les machines.
Mon souci c'est que le bloc "dernier-article" est caché pas la photos du bandeau. Je vous donne l'adresse du site : htpp://lpoaquitaine.org
Si vous avez un idée svp?

A+
JM


Voici le code xhtml :

<div id="content-wrap">                       
<div class="banner">
<?php if ($this->countModules('user4')) : ?>
<div class="dernier-article"><jdoc:include type="modules" name="user4" style="XHTML" /></div>
<?php endif; ?>
<?php if ($this->countModules('banner')) : ?>
<div class="bandeau"><jdoc:include type="module" name="banners" style="xhtml" /></div>
<?php endif; ?>
</div>
.../...


Et voici le code CSS :


#content-wrap {
    clear: both;
    margin:0 auto; padding: 0;   
    background: #FFF;
}

#content-wrap .banner {
    width:100%; height: auto;
}

#content-wrap .bandeau {
    float: left;
    width: 75%; height:auto;
    margin:0;
}

#content-wrap .dernier-article {
    float: right;
    display: inline;
    width: 22%; height: auto;
    margin: 0;
}
Bonjour,

La situation est la suivante:
1. Le bandeau a une largeur variable qui dépend de la largeur de la fenêtre du navigateur (ou plus précisément de la largeur du viewport, la zone d'affichage du navigateur).
2. L'image dans le bandeau est insérée comme une image de contenu ou d'illustration (élément HTML img). Elle fait 1060px de large, ce qui sera plus large que son conteneur dans la plupart des cas.
3. Contrairement au texte, une image qui est plus large que son conteneur ne peut pas «revenir à la ligne», et sa largeur ne s'adapte pas automatiquement à celle du conteneur. L'image va donc dépasser, et éventuellement recouvrir d'autres contenus.

Quelques solutions possibles:
- Placer l'image en image de fond CSS.
- Ou bien utiliser un overflow:hidden sur le conteneur de l'image.