Comment construire une largeur fixe disposition flottante pour HTML5 et CSS3 programmation

category Ordinateurs et logiciels / Programmation / Html

Mises fluides sont formidables. Ils sont très flexibles, et ils ne sont pas difficiles à construire en HTML5 et CSS3. Parfois, cependant, il est agréable à utiliser une mise en page à largeur fixe, surtout si vous voulez que votre mise en page de se conformer à une image de fond particulier.

Sommaire

  • Mise en page à largeur fixe

    • La caractéristique principale d'une mise en page à largeur fixe est l'utilisation d'une mesure fixe (pixels presque toujours), plutôt que les mesures de pondération utilisés dans une mise en page fluide.

    image0.jpg

    Comment mettre en place le code HTML

    Comme d'habitude, le code HTML est minime. Il contient quelques divs nommés.

    fixedWidth.html
    Mise en page à largeur fixe
    La colonne de gauche
    Colonne de droite
    Footer

    Fixer la largeur avec CSS

    Après le code HTML est mis en place, vous pouvez utiliser les CSS pour appliquer le schéma à deux colonnes.

    Voici le code CSS:

    #header {background-color: # e2e393-border-bottom: 3px solide noir-text-align: center-width: 800px; padding-top: 1em -} {# gauche float: left; largeur: 200px; clear: left; border-right: 1px solid black-height: 30em-overflow: auto-padding-right: .5em -} {# droit float: left; largeur: 570px; hauteur: 30em-overflow: auto-padding-left: .5em- } #footer {width: 800px; text-align: center-background-color: # e2e393-border-top: 3px noir double-clair: Bothwell}

    Tout est assez simple:




    1. Colorer chaque élément pour voir ce qui se passe.

      Commencez en donnant à chaque div une couleur de fond différente de sorte que vous pouvez voir ce qui se passe.

    2. Déterminer la largeur totale de la mise en page.

      Choisissez une largeur de cible pour la mise en page entière. 800 pixels a été choisi parce qu'il est d'une largeur raisonnable standard.

    3. Ajuster la largeur des éléments de la page à l'échelle.

      Il est souvent plus facile de commencer avec des éléments comme l'en-tête et pied de page qui prennent souvent toute la largeur de la conception.

    4. Flotter les colonnes.

      Flotteur chaque colonne vers la gauche.

    5. Définir la largeur des colonnes.

      Commencer en faisant la largeur des colonnes ajouter à la largeur de l'ensemble du dessin. Plus tard, vous aurez un peu pour ajuster les marges et les frontières.

    6. Désactivez la colonne de gauche.

      Assurer la colonne de gauche a le clair: gauche la règle appliquée.

    7. Définissez les hauteurs de colonne.

      Donnez à chaque colonne à la même hauteur. Cela rend les choses paraissent bien si vous ajoutez des frontières ou des couleurs de fond pour les colonnes.

    8. Réglez frontières et le rembourrage.

      Utilisez frontières, le rembourrage et la marge d'ajuster votre page pour obtenir le look que vous voulez.

    9. Ajustez à nouveau largeurs.

      Ajout de bordures, le remplissage et la marge peut modifier les largeurs des éléments existants. Après que vous avez modifié ces attributs, jeter un regard attentif à votre disposition pour être sûr qu'il ne se foiré, et modifier les différentes largeurs si nécessaire.

    Articles Similaires

    A propos Auteur
    Comment construire une largeur fixe disposition flottante centrée pour HTML5 et CSS3 programmation Comment construire une largeur fixe disposition flottante centrée pour HTML5 et CSS3 programmation

    Mises en page à largeur fixe sont communs, mais ils ont l'air un peu étrange si le navigateur est pas la largeur spécifiée dans le CSS3. Si le navigateur est trop étroit, la mise en page ne fonctionne pas, et la deuxième colonne…

    Comment construire une mise en HTML5 et CSS3 page avec le positionnement absolu Comment construire une mise en HTML5 et CSS3 page avec le positionnement absolu

    Vous pouvez utiliser le positionnement absolu pour créer anHTML5 et CSS3 mise en page. Ce processus implique des compromis. Vous avez tendance à avoir un meilleur contrôle de votre page avec le positionnement absolu (par rapport aux techniques…

    Comment construire des listes horizontales pour HTML5 et CSS3 programmation Comment construire des listes horizontales pour HTML5 et CSS3 programmation

    Parfois, vous voulez barres de boutons horizontales. Parce que les listes HTML5 ont tendance à être à la verticale, vous pourriez être tenté de penser que d'une liste horizontale est impossible. En fait, CSS3 offre tout ce que vous avez besoin…

    Comment faire pour créer des styles de page pour votre HTML5 et CSS3 site de modèle Comment faire pour créer des styles de page pour votre HTML5 et CSS3 site de modèle

    Avec un cadre HTML en place, vous pouvez commencer à travailler sur la CSS pour créer des styles de page sur votre site. La meilleure façon d'intégrer CSS3 est en suivant ces étapes:Commencez avec le schéma page de modèle.Il devrait avoir…

    Comment faire flotter un paragraphe pour HTML5 et CSS3 programmation Comment faire flotter un paragraphe pour HTML5 et CSS3 programmation

    Paragraphes et autres éléments de niveau bloc ont un comportement par défaut bien défini dans CSS3. Ils prennent toute la largeur de la page, et l'élément suivant apparaît ci-dessous. Lorsque vous appliquez l'élément à un paragraphe, le…

    Comment utiliser l'attribut clair pour contrôler la mise en page pour HTML5 et CSS3 programmation Comment utiliser l'attribut clair pour contrôler la mise en page pour HTML5 et CSS3 programmation

    Il devrait y avoir un moyen de faire le bon de travail de forme, indépendamment de la largeur du conteneur. CSSS3 fournit exactement comme un mécanisme qui est facile à travailler avec la conception de vos pages HTML5.La clair attribut est…

    Conversion des noms de propriété CSS à javascript Conversion des noms de propriété CSS à javascript

    Vous pouvez convertir les noms de propriétés CSS pour javascript. Cependant, il ya quelques choses que vous devriez vous rappeler si vous prévoyez de le faire. Lors du changement de styles avec javascript, il ya quelques règles…

    Comment créer des colonnes dans iBooks Author Comment créer des colonnes dans iBooks Author

    Par défaut, iBooks Author fonctionne votre texte sur toute la largeur de la page dans une colonne, mais vous pouvez créer des colonnes et même changer les marges et l'alignement dans la mise en page du panneau de l'Inspecteur de disposition. Il…

    Box et frontalières propriétés des feuilles de style en cascade (CSS) Box et frontalières propriétés des feuilles de style en cascade (CSS)

    Avec les propriétés de la boîte, vous pouvez positionner des objets de style n'importe où dans une fenêtre de navigateur, la position des objets par rapport aux autres objets sur la page, et d'appliquer les règles de remplissage et la boîte…

    Comment appliquer l'effet border-radius CSS3 Comment appliquer l'effet border-radius CSS3

    L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…

    Comment modifier les dispositions en CSS3 Comment modifier les dispositions en CSS3

    Il paie pour essayer quelques-uns des dispositions de CSS3 pour voir ce que vous voulez faire avec eux avant de commencer à créer un projet de production. Copiez le code source de l'exemple sur le site Dynamic Drive et le placer dans des fichiers…

    Comment faire pour coiffer les paragraphes, les titres, et les pieds avec CSS3 Comment faire pour coiffer les paragraphes, les titres, et les pieds avec CSS3

    Lorsque vous êtes style paragraphes, titres, et pieds de page, la plupart des travaux peuvent être automatiquement accompli par la création de styles tag Redéfinir pour le tag et cependant de nombreuses balises de titre que vous souhaitez…

    Comment faire pour coiffer listes et des tableaux avec CSS3 Comment faire pour coiffer listes et des tableaux avec CSS3

    Listes de style et tables est un peu différent de coiffage contenu dans le corps de la page, parce que les deux listes et des tableaux ont des étiquettes spécifiques qui peuvent être redéfinis pour contrôler la façon dont le contenu se trouve…

    Comment utiliser configurations à trois colonnes en CSS3 Comment utiliser configurations à trois colonnes en CSS3

    Mises en page à trois colonnes dans CSS3 sont couramment utilisés sur les sites qui fournissent une liste de liens génériques sur un côté de la page, contenu dans le milieu, et la publicité ou spécifiques à la page des liens de l'autre…

    » » » » Comment construire une largeur fixe disposition flottante pour HTML5 et CSS3 programmation