28220 sujets

CSS et mise en forme, CSS3

Elargissement du conteneur grace à une image dans un bloc imbriqué

Bonjour, je suis coincé sur le problème suivant :

* J'ai un bloc dans lequel est imbriqué un second bloc
* Le bloc 1 sert notamment à obtenir un fond de couleur
* Le bloc 2 a une largeur n qui détermine la mise en page du texte qu'il contient

Si j'insère dans mon second bloc une image plus large que le bloc lui même alors l'affichage diffère entre Mozilla et Ie :
- sous Mozilla l'image déborde du second bloc et n'affecte pas le bloc 1
- sous Ie l'image élargit les deux blocs

cette interpretation d'Ie m'interesse beaucoup, est-il possible d'avoir ce rendu sous plusieurs navigateurs ?

voici un exemple XHTML/CSS (l'image y est remplacée par une suite de x sans espaces), je ne fournit pas le code correspondant à ma mise en page réelle afin de simplifier ma question :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
.principal {
background-color: #C0C0C0;
width:300px;
}
.imbrique {
width:300px;
}
-->
</style>
</head>
<body>
<div class="principal">
  <div class="imbrique">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  </div>
</div>
</body>
</html>

Modifié par loubnei (30 Mar 2005 - 09:30)
salut

commence par mettre ton code dans les tags corespondants pour que l'on puisse bien les lires Smiley lol

pourquoi tu n'utilise pas simplement la propriété margin ?
tu ne ferrais qu'un seul bloc

ca devrai donner quelque chose comme ca :


.principal {
background-color: #C0C0C0;
width:300px;
margin: 20px 5px 30px 5px;
}



<div class="principal">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
hello !
c'est rectifié pour le code, désolé

merci pour cette réponse, cependant je n'ai pas le choix, je dois imbriquer des Div, impossible de les réduire à un seul vu la complexité de la mise en page qui m'attend

de plus la difficulté existe aussi s'il n'y a qu'un niveau de Div, illustration :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
.principal {
background-color: #C0C0C0;
width:300px;
margin:0;
padding:0;
}
-->
</style>
</head>
<body>
<div class="principal">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
</body>
</html>


sous Ie (Ie 6.0./win98) le fond gris recouvre la totalité des "x"
sous mozilla (Firefox 1.0.1./win98) le fond gris s'arrête à la moitié environ
MyIE2 (0.9./win98) interprète de la même manière que Ie
Opéra (7.54./win98) interprète comme firefox

est-il possible d'aligner l'affichage sous firefox/opéra sur celui d'explorer, c'est à dire faire en sorte que toute la ligne de "x" soit couverte par le fond gris sur tous les navigateurs ?
Modifié par loubnei (30 Mar 2005 - 09:48)
après de nombreux tests j'ai l'impression que sous Ie, et sous Ie uniquement, il est possible de déformer des blocs à largeur fixe en y insérant un contenu (image ou caractères non-espacés) dont la largeur excède celle du bloc
loubnei a écrit :
après de nombreux tests j'ai l'impression que sous Ie, et sous Ie uniquement, il est possible de déformer des blocs à largeur fixe en y insérant un contenu (image ou caractères non-espacés) dont la largeur excède celle du bloc


oui, IE fait n'importe koi !
J'ai lu sur le JDN que la prochaîne specifications CSS pourrait integrer ce comportement "définition de la largeur d'un bloc par son contenu", à la manière des tableaux finalement, il semble que le W3C étudie ce comportement pour répondre aux demandes de nombreux developpeurs.

Si seulement tous les navigateurs interpretaient les propriétés min et max-width cela serait déjà pratique pour les mises en pages complexes et variables ...
Sujet clos
Aller à