Ok, j'ai eu un simple problème de mise en page il y a une semaine ou deux. À savoir les sections d'une page nécessitaient un en-tête:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Des trucs assez simples. Le fait est que la haine des tables semble avoir pris le dessus dans le monde du Web, ce qui m'a rappelé quand j'ai demandé Pourquoi utiliser des balises de listes de définitions (DL, DD, DT) pour les formulaires HTML au lieu de tableaux? Maintenant, le sujet général des tables vs divs / CSS a déjà été discuté, par exemple:
Donc, cela ne vise pas à être une discussion générale sur CSS vs tableaux pour la mise en page. C'est simplement la solution à un problème. J'ai essayé différentes solutions à ce qui précède en utilisant CSS, notamment:
- Flottez à droite pour le bouton ou un div contenant le bouton;
- Position relative du bouton; et
- Position relative + absolue.
Aucune de ces solutions n'était satisfaisante pour différentes raisons. Par exemple, le positionnement relatif a entraîné un problème de z-index où mon menu déroulant est apparu sous le contenu.
J'ai donc fini par revenir à:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
Et cela fonctionne parfaitement. C'est simple, aussi rétrocompatible que possible (cela fonctionnera probablement même sur IE5) et cela fonctionne juste. Pas de soucis avec le positionnement ou les flotteurs.
Quelqu'un peut-il donc faire l'équivalent sans tables?
Les exigences sont:
- Rétrocompatible: vers FF2 et IE6;
- Raisonnablement cohérent: sur différents navigateurs;
- Centré verticalement: le bouton et le titre sont de hauteurs différentes; et
- Flexible: permet un contrôle raisonnablement précis du positionnement (rembourrage et / ou marge) et du style.
En passant, je suis tombé sur quelques articles intéressants aujourd'hui:
- Pourquoi CSS ne devrait pas être utilisé pour la mise en page ; et
- Tableaux vs CSS: les trolls CSS ont commencé
EDIT: Permettez-moi d'élaborer sur la question du flotteur. Ce genre de travaux:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
Merci à Ant P pour le overflow: hiddenrôle (je ne comprends toujours pas pourquoi). Voici où le problème entre en jeu. Disons que je veux que le titre et le bouton soient centrés verticalement. Ceci est problématique car les éléments sont de hauteur différente. Comparez ceci à:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>
qui fonctionne parfaitement.
Réponses:
Il n'y a rien de mal à utiliser les outils à votre disposition pour faire le travail rapidement et correctement.
Dans ce cas, une table fonctionnait parfaitement.
J'aurais personnellement utilisé une table pour cela.
Je pense que les tables imbriquées devraient être évitées, les choses peuvent devenir compliquées.
la source
Flottez simplement à gauche et à droite et réglez pour effacer les deux et vous avez terminé. Pas besoin de tables.
Edit: Je sais que j'ai eu beaucoup de votes positifs pour cela, et je pensais que j'avais raison. Mais il y a des cas où vous avez simplement besoin d'avoir des tables. Vous pouvez essayer de tout faire avec CSS et cela fonctionnera dans les navigateurs modernes, mais si vous souhaitez prendre en charge les plus anciens ... Ne pas me répéter, voici le fil de débordement de pile associé et la diatribe sur mon blog .
Edit2: Étant donné que les anciens navigateurs ne sont plus très intéressants, j'utilise le bootstrap Twitter pour les nouveaux projets. C'est parfait pour la plupart des besoins de mise en page et utilise CSS.
la source
C'est une sorte de question piège: cela semble terriblement simple jusqu'à ce que vous arriviez à
Je tiens à préciser que oui, le centrage vertical est difficile en CSS. Quand les gens publient, et cela semble interminable sur SO, "pouvez-vous faire X en CSS", la réponse est presque toujours "oui" et leur gémissement semble injustifié. Dans ce cas, oui, cette chose en particulier est difficile.
Quelqu'un devrait simplement éditer toute la question jusqu'à "Le centrage vertical est-il problématique en CSS?".
la source
Titre flottant à gauche, bouton flottant à droite et (voici la partie que je n'ai jamais connue jusqu'à récemment) - faites le conteneur des deux
{overflow:hidden}.Cela devrait éviter le problème de z-index, de toute façon. Si cela ne fonctionne pas et que vous avez vraiment besoin du support IE5, allez-y et utilisez le tableau.
la source
overflow:hidden.En CSS pur, une réponse de travail sera un jour de simplement utiliser
"display:table-cell". Malheureusement, cela ne fonctionne pas dans les navigateurs actuels de qualité A, donc pour tout cela, vous pouvez aussi bien utiliser un tableau si vous voulez simplement obtenir le même résultat de toute façon. Au moins, vous serez sûr que cela fonctionne assez loin dans le passé.Honnêtement, utilisez simplement une table si c'est plus facile. Ça ne fera pas mal.
Si la sémantique et l'accessibilité de l'élément table sont vraiment importantes pour vous, il existe un brouillon de travail pour rendre votre table non sémantique:
http://www.w3.org/TR/wai-aria/#presentation
Je pense que cela nécessite une DTD spéciale au-delà de XHTML 1.1, ce qui ne ferait qu'attiser tout le débat
text/htmlvsapplication/xml, alors n'allons pas là.Alors, passons à votre problème CSS non résolu ...
Aligner verticalement deux éléments sur leur centre: cela peut être fait de différentes manières, avec un piratage CSS obtus.
Si vous pouvez tenir compte des contraintes suivantes, il existe un moyen relativement simple:
Ensuite, vous pouvez utiliser le positionnement absolu avec des marges négatives:
Mais c'est inutile dans la plupart des situations ... Si vous connaissez déjà la hauteur des éléments, vous pouvez simplement utiliser des flotteurs et ajouter suffisamment de marge pour les positionner selon vos besoins.
Voici une autre méthode qui utilise la ligne de base du texte pour aligner verticalement les deux colonnes en tant que blocs en ligne. L'inconvénient ici est que vous devez définir des largeurs fixes pour que les colonnes remplissent la largeur à partir du bord gauche. Parce que nous devons garder les éléments verrouillés sur une ligne de base de texte, nous ne pouvons pas simplement utiliser float: right pour la deuxième colonne. (Au lieu de cela, nous devons rendre la première colonne suffisamment large pour la pousser.)
Le HTML: Nous ajoutons des wrappers .valign autour de chaque colonne. (Donnez-leur un nom plus «sémantique» si cela vous rend plus heureux.) Ceux-ci doivent être conservés sans espace entre eux, sinon les espaces de texte les sépareront. (Je sais que ça craint, mais c'est ce que vous obtenez en étant "pur" avec le balisage et en le séparant de la couche de présentation ... Ha!)
Le CSS: Nous utilisons
vertical-align:middlepour aligner les blocs sur la ligne de base du texte de l'élément d'en-tête de groupe. Les différentes hauteurs de chaque bloc resteront centrées verticalement et repousseront la hauteur de leur conteneur. Les largeurs des éléments doivent être calculées pour s'adapter à la largeur. Ici, ils sont 400 et 100, moins leur rembourrage horizontal.Les corrections d'IE: Internet Explorer n'affiche que le bloc en ligne pour les éléments en ligne nativement (par exemple, span, pas div). Mais, si nous donnons le div hasLayout puis l'afficherons en ligne, il se comportera comme un bloc en ligne. Le réglage de la marge consiste à corriger un écart de 1px en haut (essayez d'ajouter des couleurs d'arrière-plan au .group-title pour voir).
la source
Je recommanderais de ne pas utiliser de tableau dans ce cas, car ce ne sont pas des données tabulaires; c'est purement présentationnel d'avoir le bouton situé à l'extrême droite. Voici ce que je ferais pour dupliquer la structure de votre table (passez à un H # différent en fonction de votre position dans la hiérarchie de votre site):
Si vous voulez un véritable alignement vertical au milieu (c'est-à-dire que si le texte enveloppe le bouton est toujours aligné au milieu par rapport aux deux lignes de texte), vous devez soit créer un tableau, soit travailler avec
position: absoluteet des marges. Vous pouvez ajouterposition: relativeà votre menu déroulant (ou plus probablement à son parent) afin de le placer dans le même niveau de classement que les boutons, vous permettant de le faire passer au-dessus d'eux avec z-index, le cas échéant.Notez que vous n'avez pas besoin
width: 100%du div car il s'agit d'un élément de niveau bloc etzoom: 1que le div se comporte comme s'il avait un clearfix dans IE (les autres navigateurs prennent le clearfix réel). Vous n'avez pas non plus besoin de toutes ces classes superflues si vous ciblez des choses un peu plus spécifiquement, bien que vous ayez peut-être besoin d'un div ou d'un span wrapper sur le bouton pour faciliter le positionnement.la source
zoom: 1in.group-header, qui déclenche hasLayout et oblige IE 6 à se comporter de la même manière que si l'élément: after était actif.Faites un double float dans un div et utilisez le clearfix. http://www.webtoolkit.info/css-clearfix.html Avez-vous des restrictions de remplissage / marge?
la source
la source
J'ai choisi d'utiliser Flexbox, car cela a rendu les choses beaucoup plus faciles.
Vous devez essentiellement vous rendre chez le parent des enfants que vous souhaitez aligner et ajouter
display:box(préfixé bien sûr). Pour les faire asseoir sur les côtés, utilisez justify-content . L'espace entre les deux est la bonne chose lorsque vous avez des éléments qui doivent être alignés à la fin, comme dans ce cas (voir lien) ...Puis le problème d'alignement vertical. Parce que j'ai créé le parent des deux éléments, vous souhaitez aligner une Flexbox. C'est maintenant facile à utiliser
align-items: center.Ensuite, j'ai ajouté les styles que vous vouliez auparavant, supprimé le flottant du titre et du bouton dans l'en-tête et ajouté un rembourrage:
Voir la démo
la source
Je suis d'accord pour dire qu'il ne faut vraiment utiliser les tableaux que pour les données tabulaires, pour la simple raison que les tableaux ne s'affichent pas tant qu'ils n'ont pas fini de se charger (peu importe la vitesse à laquelle cela est; c'est plus lent que la méthode CSS). Je pense cependant que c'est la solution la plus simple et la plus élégante:
La fonction de bouton et tout détail supplémentaire peuvent être stylisés à partir de cette forme de base. Toutes mes excuses pour les mauvaises balises.
la source