28172 sujets

CSS et mise en forme, CSS3

BUG - Div qui sortent de leur parent lors du redimensionnement (zoom)

Salut, lors du dézoom (on passe de 100% à 50% par exemple) dans firefox, chrome mais pas opéra. Je vous en prie, constatez par vous même csshtml.wink.ws/STRUCTURE/Structure.html.

Voici le code
<article>
        	<h2>Les dimensions</h2>
        	<div id="MARG">
            	<div style="width:400px; height:22px;">margin-top</div>
                <div style="width:37px; height:30px; margin-top:100px; text-align:right;">margin-left</div>
                <div id="MARG_1">
                	<div style="width:320px; height:22px;" class="MARG_1c">margin-top</div>
               		<div style="width:37px; height:86px; padding-top:120px;" class="MARG_1c">margin-left</div>
                    <div style="width:244px;height:204px;border: silver dashed 1px;"></div>
                    <div style="width:37px; height:86px; padding-top:120px;" class="MARG_1c">margin-right</div>
                    <div style="width:320px; height:22px;" class="MARG_1c">margin-bottom</div>
                </div>
                <div style="width:37px; height:30px; margin-top:100px;">margin-right</div>
                <div style="width:400px; height:22px;">margin-bottom</div>
          	</div>
        </article>

Et le css
a écrit :
#MARG {width:400px; height:300px;
background: rgba(0,255,0,0.3);
border: silver dashed 1px; }

#MARG div {float:left; text-align:center;color:#060;
text-align:center; font-weight:bold;}

#MARG_1 {width:320px; height:250px; border: black solid 3px;
background-color:white;}
#MARG_1 div {float:left; text-align:center;color: rgba(255,102,0,1);
text-align:center; font-weight:bold; overflow: visible;}

.MARG_1c {background: rgba(255,102,0,0.6);}


Merci de votre aide !
Modifié par marcant0 (19 Oct 2012 - 16:43)
Salut,

En vrac :

* ton code utilise un mélange de tabulations et d'espaces : c'est l'un ou l'autre, pas les deux ;

* les valeurs des attributs id et class s'indiquent en minuscules plutôt qu'en MAJUSCULES ;

* tout l'intérêt du CSS c'est de séparer au maximum le contenu de la mise en forme, dans ton exemple tu mélanges allègrement du style in-line (dans les balises) et externe ;

* tes balises article n'ont pas lieu d'être ;

* idem pour la balise fermante section (qui est dépareillée) ;

* ta page contient un h2 mais pas de h1 ;

* tu utilises des balises section et article avec un doctype xhtml 1.0 trans. plutôt qu'avec un simple <!doctype html> ;

* l'exemple que tu fournis semble faire partie d'un cours et pourtant, le code CSS est illisible ;

* etc.

Au risque de paraitre désagréable, toutes ces remarques concernent le b.a.-ba de la conception de site web. Il serait peut-être préférable de RTFM un bon coup avant de te lancer dans la complexe entreprise de rédaction de cours.

Edit: concernant la question, c'est un edge case (comprendre "situation qui ne se produit qu'en d'extrêmement rares occasions"). Les fonctions de zoom sont implémentées différemment selon les navigateurs et leur comportement peut être influencé par la configuration de l'utilisateur (zoom sur texte uniquement,...).

L'objectif du zoom c'est de permettre un meilleur confort de lecture. Dans l'exemple que tu donnes, la problématique que tu soulève n'a pas lieu d'être.
Modifié par Akhilleus (20 Oct 2012 - 16:17)
Merci pour toutes ces remarques, je les prend en compte.

---------------------------------------------------------------------------

Pour ce qui doit vous paraître bizarre, faire un site de cours alors que moi-même ne le maîtrise pas, je vous l'accorde. Seulement ce site n'est ni référencé, c'est une sorte de mémo personnel et de lieu d'entrainement (on va dire que je me retrouve dans mon bazard !).
Pour la remarque concernant l'apprentissage, je suis en effet en train de suivre le tutoriel que vous m'avez proposé, et je ne l'ai pas terminé (J'ai vraiment très envie de tester avant de finir, c'est plus fort que moi)

Pour les id en minuscules, c'est vrai que j'ai pas réfléchi !

=> J'ai mis du code dans et hors du HTML, car les cases avait 1 particularité chacune, alors je comprend qu'il faut a tout pris bannir tout CSS du html pour simplifier?

---------------------------------------------------------------------------

Pour le edge case, c'est vrai que c'est inutile de dé-zoomer !

En voici d'ailleurs un nouveau csshtml.wink.ws/Alticraft/default.html
Sur ce nouvel essai que j'ai commencé (si vous pouvez commenter le code encore une fois, j'ai fait des efforts). Le problème apparaît de temps en temps (et pas en local Smiley ohwell ) : la barre du haut s'espace de 5px environ du haut.
J'ai essayé de rendre le code lisible !
Modifié par marcant0 (21 Oct 2012 - 15:59)
Bonjour,
macant0 a écrit :
alors je comprend qu'il faut a tout pris bannir tout CSS du html pour simplifier?
Il faut éviter les styles in-line tant que possible, cela ne signifie pas forcément utiliser un fichier externe pour les CSS.

Dans le cas présent, cela trouverait naturellement sa place entre des balises <style></style> dans ta page html. Tu dois prendre l'habitude de réduire le nombre de requêtes HTTP que l'affichage de tes pages nécessite.
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Mise en page !</title>

  <link rel="stylesheet" href="css_basic.css" />
  <style>
  <!-- tes styles spécifiques ici -->
  </style>
</head>

<body>
...
</body>
</html>
macant0 a écrit :
car les cases avait 1 particularité chacune
Ce qui fait une class par case Smiley cligne
macant0 a écrit :
J'ai essayé de rendre le code lisible !
Quand je parlais de lisibilité du code, je faisais particulièrement référence aux styles :

Actuellement : 
#MARG		{width:400px; height:300px; background: rgba(0,255,0,0.3); border: silver dashed 1px; }
#MARG div	{float:left; text-align:center;color:#060; text-align:center; font-weight:bold;}
#MARG_1		{width:320px; height:250px; border: black solid 3px; background-color:white;}
#MARG_1 div	{float:left; text-align:center;color: rgba(255,102,0,1);  text-align:center; font-weight:bold; overflow: visible;}
.MARG_1c	{background: rgba(255,102,0,0.6);}
Après : 
#MARG {
  width: 400px;
  height: 300px;
  background: rgba(0, 255, 0, .3); // dans le cas ou la valeur est un 0 décimal, le 0 est facultatif
  border: #ccc dashed 1px; // évite de mélanger différents types de valeurs (hex, rgb[a],...)
}
#MARG div {
  float: left;
  text-align: center;
  font-weight: bold;
  color: #060;
}
#MARG_1 {
  width: 320px;
  height: 250px;
  border: #000 solid 3px; // évite de mélanger différents types de valeurs (hex, rgb[a],...)
  background-color: #fff; // évite de mélanger différents types de valeurs (hex, rgb[a],...)
}
#MARG_1 div {
  overflow: visible;
  float: left;
  text-align: center;
  font-weight: bold;
  color: rgba(255, 102, 0, 1); // même remarque que plus haut, si alpha vaut 1, aucun intérêt d'utiliser RGBa
}
.MARG_1c	 {
  background: rgba(255, 102, 0, .6); // 0 décimal
}
macant0 a écrit :
En voici d'ailleurs un nouveau csshtml.wink.ws/Alticraft/default.html
Je suis persuadé que tu recueilleras des commentaires dans la partie adéquate du forum quand tu auras un projet concret à proposer.
Modifié par Akhilleus (21 Oct 2012 - 17:02)
Merci beaucoup, auriez vous une idée quant au probleme qui survient dans chrome, la barre du haut se décale de quelques px vers le bas.
Sujet clos
Aller à