Comment feriez-vous : Tableaux ou CSS ?

Question

_{(source : <a href="http://sontag.ca/gif/grinch.gif" rel="nofollow noreferrer">sontag.ca </a>)}

Partie I

Cette mise en page peut être réalisée assez simplement avec 2 tableaux HTML, l'un imbriqué dans l'autre, ou même avec un seul tableau.

Cela peut également être fait avec CSS, mais cela peut impliquer un peu plus de réflexion .

Il ne s'agit peut-être pas d'une mise en page réelle, mais j'ai vu des pages similaires. Considérez ceci comme une énigme, un exercice pour améliorer vos compétences en matière de CSS.

Pour rendre les choses un peu plus intéressantes, j'ai formulé la question dans une petite page web en deux parties appelée Le défi . Nous allons examiner le code et la question : Mise en page avec des tableaux ou des CSS ? côte à côte, coup par coup, alors que nos deux adversaires s'affrontent pour la suprématie du code.

La première partie explique comment Le défi a vu le jour. J'espère que vous apprécierez.

La partie II est La décision . Vous pourriez être surpris .

---

Partie II

J'ai été étonné de la rapidité avec laquelle les bonnes réponses sont apparues. minutes après que j'ai posté. C'était une expérience humiliante. Je n'ai aucune envie de participer à des courses contre la montre avec vous.

MAIS, tout cela étant dit, après avoir examiné de près les solutions proposées, j'en suis arrivé à qu'aucune des solutions CSS (y compris la mienne à l'époque) ne fonctionnait aussi bien que l'une ou l'autre des solutions de tableau proposées. Le défi consistait à dire que les feuilles de style CSS étaient meilleures que les tableaux pour les raisons suivantes tout solution d'aménagement.

J'ai donc ajouté 3 nouvelles règles (n'oubliez pas que l'une des règles est que les règles peuvent être modifiées). Cela a agacé certaines personnes. J'ai alors ajouté des explications colorées sur les raisons pour lesquelles les règles ont été changées. Je pense que cela les a encore plus ennuyés.

1. Notre jardin doit être entouré d'une clôture ; quelque chose qui le distingue de tout environnement morne dans lequel il peut se trouver ; et pas trop cher, mais facile à entretenir. Je veux donc une bordure noire d'un pixel autour du jardin.
2. Les habitants de chaque parcelle de jardin (les personnages) doivent être soit noirs, soit blancs, selon ce qui les met le mieux en valeur dans leur jardin. De plus, ils sont tous d'origine cursive. Il n'y a pas d'italique parmi eux ;-)
3. Le jardin est déplaçable, c'est-à-dire que je peux avoir ce jardin, n'importe où sur la page (pas de positionnement absolu).

Voici à quoi doit ressembler le résultat final (couleur de fond facultative) :

_{(source : <a href="http://sontag.ca/gif/garden.gif" rel="nofollow noreferrer">sontag.ca </a>)}

Mes excuses pour les changements de règles capricieux et de dernière minute. Je m'étais trompé. Les habitants de chaque parcelle de jardin sont des artisans, des spécialistes du travail manuel. Ils sont les descendants des famille cursive et doivent leur sens du style à la italiques .

Le jardin doit pouvoir être déplacé car les deux types de jardins (de table et CSS) doivent coexister sur la même page. J'ai peut-être tort de dire que position:absolute ne sont pas autorisées. Si vous parvenez à les faire fonctionner dans ce contexte, grand bien vous fasse. Elles seront certainement acceptées.

J'ai demandé une clôture autour de la parcelle parce que chaque type de jardin va être planté dans une campagne avec un fond orange très similaire à la couleur de certaines des fleurs que nous cultivons.

Je vis maintenant en Hollande, et la saison des tulipes approche à grands pas. Si vous survolez la Hollande au cours des prochaines semaines, et que le temps est clair (ce qui est plutôt rare ici), le paysage en dessous de vous ressemblera à cet exercice stupide.

Je ne suis pas fan de l'orange, mais j'aime et j'admire les Néerlandais, c'est pourquoi nous avons un fond orange, en hommage à mon pays d'accueil :-).

---

Partie III

J'ai posté la lettre de Ted réponse du tableau de The Challenge ci-dessous ainsi que cette image

_{(source : <a href="http://sontag.ca/gif/garden2.gif" rel="nofollow noreferrer">sontag.ca </a>)}

car les occupants peuvent être facilement ajoutés aux parcelles de jardin sans toucher aux règles CSS - tout est automatiquement centré.

Pouvez-vous faire cela avec CSS ? Pouvez-vous abattre l'arbre le plus puissant de la forêt avec... un hareng ?

---

Mise à jour : La réponse de Charlie est ici.

Answer 1

Mise à jour : Montage final. Je suis passé à la DTD STRICT, j'ai supprimé l'italique pour correspondre à l'image dans la question, et je suis revenu aux noms en couleur pour les identifiants afin de montrer l'intention comme le commentaire du PO sur la question, et j'ai trié la colonne principale des noms d'identifiants dans le css dans l'ordre où ils apparaissent dans le html.

J'ai également choisi de ne pas réutiliser le div externe comme le 7 carré blanc (il n'avait pas son propre div dans le fichier éditions précédentes ), car cela n'aurait pas été pratique si l'on avait voulu utiliser la mise en page, et cela donnait un peu l'impression de tricher (même si, du point de vue de la brièveté et de la perfection des pixels, j'ai apprécié l'insolence de la chose).

Voir ici : http://jsbin.com/efidi
Editer ici : http://jsbin.com/efidi/edit
Valide en tant que XHTML strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     { text-align: center; width:175px; height:175px; line-height: 35px;}
div div {         float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue  , #green  {float:right;}

#orange, #silver {background-color:silver;  width:140px;}
#navy  , #maroon {background-color:maroon; height:140px; line-height:140px;}
         #navy   {background-color:navy  ;}
#green , #red    {background-color:red   ;  width: 70px;}
#yellow, #blue   {background-color:blue  ; height: 70px; line-height: 70px;}
         #yellow {background-color:yellow;}
         #white  {background-color:white ;}
         #green  {background-color:green ;}
         #orange {background-color:orange;}
</style> 
</head> 
<body> 
  <div> 
    <div id="silver">1</div> 
    <div id="maroon">2</div> 
    <div id="navy"  >3</div> 
    <div id="red"   >4</div> 
    <div id="blue"  >5</div> 
    <div id="yellow">6</div> 
    <div id="white" >7</div>
    <div id="green" >8</div> 
    <div id="orange">9</div> 
  </div>
</body></html>

Remarque : j'aurais peut-être mis un peu plus d'espace blanc si j'avais pu, mais c'est à la limite avant que les blocs de code ici sur SO ne commencent à avoir des barres de défilement et j'ai choisi de tout faire apparaître à l'écran.

Note : J'ai emprunté le line-height fix de Tyson (qui a été le premier à obtenir une réponse correctement rendue).

Answer 2

Voici trois solutions.

La majoration :

<div id="outer">
    <div id="a1">1</div>
    <div id="a2">2</div>
    <div id="a3">3</div>
    <div id="a4">4</div>
    <div id="a5">5</div>
    <div id="a6">6</div>
    <div id="a7">7</div>
    <div id="a8">8</div>
    <div id="a9">9</div>
</div>

La feuille de style de base (dimensions et couleur) :

#outer {
    width: 20em;
    height: 20em;
}
#a1 {
    background-color: #C0C0C0;
    width: 80%;
    height: 20%;
}
#a2 {
    background-color: #800000;
    width: 20%;
    height: 80%;
}
#a3 {
    background-color: #000080;
    width: 20%;
    height: 80%;
}
#a4 {
    background-color: #FF0000;
    width: 40%;
    height: 20%;
}
#a5 {
    background-color: #0000FF;
    width: 20%;
    height: 40%;
}
#a6 {
    background-color: #FFFF00;
    width: 20%;
    height: 40%;
}
#a7 {
    background-color: #FFFFFF;
    width: 20%;
    height: 20%;
}
#a8 {
    background-color: #008000;
    width: 40%;
    height: 20%;
}
#a9 {
    background-color: #FFA500;
    height: 20%;
    width: 80%;
}

Et maintenant, le positionnement :

• Utilisation de float :

  #a1 {
      float: left;
  }
  #a2 {
      float: right;
  }
  #a3 {
      float: left;
  }
  #a4 {
      float: left;
  }
  #a5 {
      float: right;
  }
  #a6 {
      float: left;
  }
  #a7 {
      float: left;
  }
  #a8 {
      float: right;
  }
  #a9 {
      float: right;
  }

• Utilisation de position :

  #outer {
      position: relative;
  }
  #outer div {
      position: absolute;
  }
  #a1 {
      top: 0;
      left: 0;
  }
  #a2 {
      top: 0;
      right: 0;
  }
  #a3 {
      top: 20%;
      left: 0;
  }
  #a4 {
      top: 20%;
      left: 20%;
  }
  #a5 {
      top: 20%;
      right: 20%;
  }
  #a6 {
      top: 40%;
      left: 20%;
  }
  #a7 {
      top: 40%;
      left: 40%;
  }
  #a8 {
      bottom: 20%;
      right: 20%;
  }
  #a9 {
      bottom: 0;
      right: 0;
  }

• Utilisation de margin :

  #a1 {
  }
  #a2 {
      margin: -20% -80% 0 80%;
  }
  #a3 {
      margin: -60% 0 0 0;
  }
  #a4 {
      margin: -80% -20% 0 20%;
  }
  #a5 {
      margin: -20% -60% 0 60%;
  }
  #a6 {
      margin: -20% -20% 0 20%;
  }
  #a7 {
      margin: -40% -40% 0 40%;
  }
  #a8 {
      margin: 0 -40% 0 40%;
  }
  #a9 {
      margin: 0 -20% 0 20%;
  }

Answer 3

Voilà - moins de lignes que ce que l'utilisation abusive des balises de tableau peut fournir :

<img
    src="http://sontag.ca/TheChallenge/tiles.gif"
    alt="nine assorted coloured rectangles"
/>

:P

Answer 4

Cela correspond exactement à votre exemple de tableau, y compris le texte centré verticalement et horizontalement (ce que personne d'autre n'a fait jusqu'à présent).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Boxy Boxes in a Box</title>

    <style type="text/css" media="screen">
        #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }

        .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

        #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
        #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
        #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
        #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
        #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
        #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
        #box_7 {top: 70px; left: 70px; background-color: white;}
        #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
        #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
</head>

<body>
    <div id="container">
        <div id="box_1" class="box">1</div>
        <div id="box_2" class="box">2</div>
        <div id="box_3" class="box">3</div>
        <div id="box_4" class="box">4</div>
        <div id="box_5" class="box">5</div>
        <div id="box_6" class="box">6</div>
        <div id="box_7" class="box">7</div>
        <div id="box_8" class="box">8</div>
        <div id="box_9" class="box">9</div>
    </div>
</body>
</html>

Answer 5

Tant que les largeurs et les hauteurs sont constantes, on peut toujours utiliser le positionnement absolu pour obtenir le même effet. Cela devrait être suffisamment évident pour que je n'aie pas à le taper (il est tard et je suis paresseux :P).