CSS: mise en page fixe ou flottante? [fermé]

Question

Ma question porte sur la disposition fixe CSS par rapport à une disposition flottante qui s'étend sur toute la largeur du navigateur.

Pour l’instant, le problème que je rencontre est de redimensionner le générique en fonction de la largeur de la page (quelque chose que je comprends est impossible compte tenu de la mise en oeuvre actuelle du navigateur image-arrière-plan de CSS3: taille; ). À ce stade, j'ai l'impression d'être dans une impasse: est-ce que je retravaille le site pour utiliser une mise en forme CSS fixe ou est-ce que je conserve la mise en page actuelle et tente d'agrandir l'image masthead pour occuper la majeure partie de l'espace fourni? ? En outre, quels sont les avantages et les inconvénients de l'adoption d'une disposition à largeur fixe et des autres conséquences (invisibles) de l'utilisation d'une disposition sur une autre?

Le site en question sera commenté en réponse à cette question. Je ne veux pas être perçu comme essayant d’augmenter le trafic.

Modifier: d'autres idées?

Answer 1

Qu'en est-il de révéler plus ou moins d'image lorsque le navigateur est redimensionné, plutôt que de redimensionner l'image? Ce n'est pas tout à fait le même effet, mais c'est un moyen facile de remplir tout un espace avec une image.

Supposons, à titre d’exemple, que l’image d’arrière-plan de votre bloc-générique contient un logo quelconque, par exemple, une photographie de la ligne d'horizon de la ville. Ceci est, dans l'ensemble, 1600px large. Le logo se trouve à gauche de l'image tandis que le paysage urbain s'étend à l'extrême droite. Et nous supposerons que votre balisage ressemble à peu près à ceci:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

Nous pouvons définir l'élément #page sur une largeur élastique et lui appliquer une image d'arrière-plan. l'élément #masthead:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

Ce qui se passe ici, c’est que l’élément #masthead sera étendu à la largeur de l’élément #page, qui sera compris entre 800 et 1600 pixels de large (inclus), en fonction de la largeur de la fenêtre du navigateur. Lorsque l'élément #page a une largeur de 800 pixels, vous ne voyez que les 800 pixels les plus à gauche de l'horizon. quand il est 1600px large, vous voyez toute la ligne d'horizon. Ainsi, votre logo est toujours visible et, lorsque le navigateur est redimensionné, une plus grande partie du paysage urbain est révélée.

Cela nécessite de commencer par une image plus grande (au moins aussi large que votre largeur maximale, si vous choisissez l'élastique), mais le résultat est un bloc générique qui aura fière allure quelle que soit sa taille - sans compter sur, comme mentionné par le stragueur, les algorithmes de redimensionnement d’image des navigateurs.

Answer 2

De quel type d'image s'agit-il? Est-ce qu'une partie de celui-ci est répétable? Parfois, en utilisant deux calques, l’un ou l’étiquette pour un élément répétitif de l’image et un autre pour l’élément fixe.

Pouvons-nous voir un exemple? Il serait plus facile de trouver la bonne réponse à votre problème.

Answer 3

Si vous essayez d’élargir votre image d’arrière-plan à la largeur de votre page, il est préférable d’utiliser une mise en page de taille fixe car il n’existe pas de méthode multi-navigateurs permettant d’agrandir une image d’arrière-plan à différentes tailles. dépend de la résolution des visiteurs.

Les dispositions de largeur fixe offrent plus de flexibilité au concepteur, mais pas au visiteur. Si vous créez une mise en page large de X pixels, vous pourrez alors ajuster votre site Web pixel par pixel à votre guise, tandis que l'option "float". les mises en page (je les appelle des mises en page liquides) sont entièrement basées sur des valeurs en pourcentage et diffèrent donc d'un ordinateur à l'autre. Je trouve cela difficile parce que vous pouvez tester la mise en page sur votre écran sans savoir comment elle apparaît sur celle de quelqu'un d'autre, et (par exemple) une marge de 20 pixels a plus d'effet sur une présentation à largeur fixe de 768 pixels ou de 960 pixels que sur un écran d'ordinateur liquide de 1280px.

Le principal inconvénient, IMO, d’une disposition à largeur fixe est le fait qu’elle est trop petite pour les grands écrans et trop grande pour les petits. À l'origine, 768px était une disposition à largeur fixe assez standard, mais elle est maintenant trop petite alors que le monde s'éloigne de 800x600. Maintenant, 960px est assez standard, ce qui est trop grand pour 800x600 mais reste trop petit pour 1280x1024.

Tout dépend de votre public et de la cohérence de votre site. Certaines dispositions peuvent être rendues liquides et fonctionnent parfaitement, alors que d’autres doivent être corrigées (comme celle que vous avez décrite).

Answer 4

Pourquoi ne pas utiliser une balise < img & <> strong> pour votre image d'en-tête (masthead) au lieu d'utiliser une image d'arrière-plan?

Je suggérerais de ne pas redimensionner votre en-tête graphique; la plupart des navigateurs sont terribles à la mise à l'échelle de l'image (quoi, au voisin le plus proche?) et ne plairont pas à beaucoup de gens.

Je suis moi-même pour les dispositions de fluide / flotteur / liquide. En fait, la plupart de mes sites utilisent une seule colonne, je n'ai donc pas à m'inquiéter de toutes les complexités "normale". mises en page de sites ont.

Answer 5

Il est généralement déconseillé de créer une disposition dans laquelle les colonnes de texte sont étendues au navigateur. Le texte devient difficile à lire si les lignes deviennent trop longues. Je recommande de choisir un fixe avec pour la colonne de texte, environ 50 lettres de large.