Pouvez CSS vraiment modifie l'ordre des éléments HTML sur une page?

Si vous avez plusieurs divs sur une page, vous pouvez utiliser les CSS pour la taille, flotter et se déplacer autour d'eux un peu... mais je ne peux pas voir une façon de surmonter le fait que le premier div affichera en haut de la page et la dernière div seront à proximité du fond! Je ne peut pas complètement ignorer l'ordre des éléments, car ils viennent de la source HTML, pouvez-vous?

Je dois manquer quelque chose, car les gens dire: "nous pouvons changer le look de l'ensemble du site simplement en éditant un fichier CSS.", mais cela dépendra de vous encore vouloir de la divs dans le même ordre!

(P. S. je suis sûr que personne n'utilise position:absolute sur chaque élément sur une page.)

  • Css est le style, le html est design+style. L'ordre des éléments est un de la conception de tâches en général, non pas d'un style-tâche. Mais: Conception Adaptative peut briser cette règle.
  • HTML est pour la structure. L'appelant conception est trompeuse. La conception comprend la structure, le style et le comportement. Ceci est géré par le HTML, CSS et JavaScript, respectivement.
  • Merci pour la réponse. Oui, ses petits comportement et missleading.
InformationsquelleAutor Magnus Smith | 2008-09-18
  1. 9

    Flottant, et avec la position absolue, vous pouvez tirer un assez bon positionnement de la magie pour changer certains de l'ordre de la page.

    Par exemple, avec StackOverflow, si le balisage a été mis en place à droite, le titre et le corps principal contenu pourrait être la première à 2 choses dans le balisage, et puis la navigation ou la recherche, et enfin la barre de droite. Ce serait un conteneur de contenu avec une marge supérieure assez grand pour contenir la navigation et le droit de marge assez grande pour contenir les encadrés. Puis les deux pourrait être absolument mis en place. Le balisage peut ressembler à:

    CSS:

    h1 {
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  margin-top: 100px;
  margin-right: 250px;
}

#nav {
  position: absolute;
  top: 0;
  left: 300px;
}

#side {
  position: absolute;
  right: 0;
  top: 100px;
}

    HTML:

    <h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main">
    <li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> New Zelands fish market </h4>
    ....
  </div>
</div>

    La chose importante ici est que le balisage doit être fait avec ce genre de positionnement de la magie dans l'esprit.

    De changer les choses, de sorte que la barre de navigation sur la gauche et la barre latérale au-dessous de la valeur liquidative être trop dur.

    InformationsquelleAutor Jonathan Arkell
  2. 37

    CSS peut prendre des éléments de l'écoulement normal et la position de n'importe où, de toute manière que vous voulez. Mais il ne peut pas créer un nouveau flux de.

    Par cela, je veux dire que vous pouvez la position du dernier élément dans le document html au début/haut de la page/fenêtre, et vous pouvez positionner le premier élément dans le document html à la fin/bas de page/de la fenêtre. Mais quand vous faites cela, vous ne pouvez pas la position de ces éléments les uns par rapport aux autres; vous devez savoir pour vous-même dans quelle mesure la fin de la page sera pour le premier élément du document au format html afin d'être correctement positionné. Si ce contenu est dynamique (c'est à dire: à partir d'une base de données ou CMS), ce qui est loin d'être trivial.

    InformationsquelleAutor Joel Coehoorn
  3. 3

    Vous pouvez regarder la CSS Zen Garden pour d'excellents exemples de la façon de faire ce que vous voulez. Beaucoup d'exemples de mises en page par le biais de liens sur la droite pour voir les différentes façon de se déplacer tout en utilisant strictement CSS.

    InformationsquelleAutor Nick Craver
  4. 3

    Il ya un couple de façons de le faire aujourd'hui. Le premier fonctionne sur plusieurs navigateurs mais elle est plus limitée:

    1. À l'aide de la CSS pour afficher des valeurs de table-caption, table-row et table-cell permettre à la verticale de la commande d'au plus trois éléments contrôlés exclusivement avec les CSS.

    2. C'est beaucoup plus récente et ne fonctionne dans tous les navigateurs récents (oui, il échouera dans IE9): Utilisation de la flexbox propriétés CSS.

    Vous pouvez voir des exemples vivants et en savoir plus sur ces techniques à l' "c'est sensible" modèles de page. Les deux dont je parle dans la section intitulée "de la Source de Commande Shift"

    InformationsquelleAutor pieroxy
  5. 2

    Vous n'avez pas besoin de position:absolute sur chaque élément pour faire ce que vous voulez.

    Vous venez de l'utiliser sur quelques éléments clés et alors vous pouvez les placer où vous le souhaitez, de déplacer tous les éléments contenus dans le long avec l'élément racine de la section.

    InformationsquelleAutor workmad3
  6. 1

    Je pense que le facteur le plus important est de placer vos éléments html dans une manière qui fait sens du point de vue sémantique, et avec de la chance, votre mise en page en CSS n'aurez pas à faire beaucoup trop de travail. Par exemple, votre site d'en-tête sera probablement le premier élément de la page, suivie par la commune de navigation, puis sous-navigation, le contenu et le pied de page (liste incomplète).

    Probablement autour de 90 à 95% des modèles que vous aurez envie de travailler avec devrait être relativement simple à manipuler que des balises en quelque chose comme ce que vous êtes après. l'autre de 5 à 10% sera toujours possible, avec un peu plus d'effort, mais la question que vous devez vous poser est: "Combien de fois suis-je susceptible de vouloir mon en-tête du site positionné dans le coin inférieur droit de la page?"

    J'ai toujours trouvé que la mise en page d'un site n'est pas trop difficile à manipuler, après le fait, si vous voulez changer radicalement le look et la sensation, au moins en comparaison avec un sol en place recode.

    </2c>

    InformationsquelleAutor ZombieSheep
  7. 1

    Vous pouvez placer des boîtes individuelles complètement indépendant de la source de commande à l'aide de position:absolute. De sorte que vous pouvez déplacer la tête vers le bas de la page et le pied de page vers le haut à l'aide de CSS.

    Note cependant que c'est genereally mauvais pour l'accessibilité: Vous devez avoir de l'ordre du contenu de la source plus ou moins dans le même ordre que vous les présenter pour le lecteur. La raison en est qu'un lecteur d'écran ou un appareil similaire présenteront le contenu dans l'ordre qu'il est défini dans la source plutôt que de l'ordre visuel défini par votre CSS.

    InformationsquelleAutor JacquesB
  8. 0

    Bon point sur l'en-tête de toujours être le premier et le pied de page de la dernière! Mais j'aimerais passer ma publicité DIV en haut, à droite.

    L'autre chose que j'ai entendu sur est de mettre le DIV du contenu d'abord, Google vous paie plus d'attention (des mots-clés pertinents en haut de la page des scores plus élevés)...ou est-ce un mythe? Faire qui exigent de la sorte de CSS truc je suis renseignés à ce sujet aussi.

    • hormis comment google voit la page, ce n'est pas une mauvaise idée de mettre votre contenu en premier de toute façon. il se charge tout d'abord, plus les lecteurs d'écran va frapper en premier, ce qui est évidemment bon pour l'accessibilité.
    InformationsquelleAutor Magnus Smith