28172 sujets

CSS et mise en forme, CSS3

Bloc principal prend la place du bloc secondaire si absent

Bonjour,
J'ai une mise en page avec deux blocs (voir schéma : situation 1) et je n'arrive pas à trouver une solution pour faire en sorte que le bloc principal prenne la place du bloc secondaire lorsque celui-ci est absent (voir schéma : situation 2). J'arrive à faire en sorte que le bloc principal s'adapte au contour du bloc secondaire mais ce que cherche à faire c'est que le bloc principal aie une largeur égale à la largeur totale moins la largeur du bloc secondaire (voir schéma ci-dessous).

upload/20834-css-bloc.png


Merci, d'avance.
Mathieu.
Modifié par mrskater (13 Sep 2011 - 11:14)
Bonjour, tu peux nous donner un bout de code que l'on puisse constater où tu en est et voir la structure de ton site ?
Oui biensûr, alors comme le code de la page est complexe pour tester j'ai fait une page simplifiée voilà le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="habillage.css"/>
</head>

<body>
<div id="page">
<div id="contenu">
<div class="image">image</div>
<div class="grand">texte</div>
<div>
</div>
</body>
</html>


et le css :

html { font-size: 100%; } 
body { font-size: 0.8125em; font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif; color: #333;}
#page { width: 800px; margin: auto; position: relative; }
#page #contenu { width: 600px; float: right; }
#page .grand { text-align: justify; background-color: #CC0000; }
#page .image { float: right; width: 250px; background-color: #99FF99; }


Mais avec cette solution le texte entoure l'image.

Mathieu.
Peut-être que tes explications manquent de clarté. Pour ma part, j'ai eu la paresse d'essayer de comprendre ce que tu cherches à faire... Essais de nous donner plus de détails.
Bonjour, si le bloc secondaire ne contient qu'une image, il vaudrait peut-être mieux ne pas l'englober dans un div et appliquer simplement une classe à l'image. Puisqu'apparemment ce contenu n'est pas toujours présent, lui accorder un espace "de fait" dans la mise en page semble inutile...et c'est ce qui me semble poser problème.

C'est la largeur déclarée en css (width:250px) qui fait que le bloc est présent même sans contenu...
En appliquant les styles à l'image : si elle n'est pas présente les styles ne seront pas appliqués... il ne devrait pas y avoir de problème de mise en page.


.image_illust{ /* classe à appliquer à l'image */
float:right;
margin:20px;
max-width:250px /*si l'image est plus grande limiter sa largeur à 250px;
}
Sujet clos
Aller à