1. Accueil
  2. Question et réponse
  3. mise en page Pied de page et Vertical

mise en page Pied de page et Vertical

2013-02-07 5 views
1

Intercalaires voudrais poser quelques questions sur cet exemple:mise en page Pied de page et Vertical

enter image description here

Quelle est la meilleure façon de faire cette mise en page 3 colonnes ces jours-ci? Bien sûr, il y avait des tables et maintenant il y a des divs etc etc. Qu'est-ce que le dernier meilleur moyen d'accomplir cela? Si ça dépendait de moi, j'aurais un container div contenant 3 autres. Défini à width: 33%; et display: inline;

De même, comment obtenir ces diviseurs verticaux? Là encore, autant que je sache, vous l'utilisez dans un tableau et n'affichez que certaines bordures par lesquelles vous obtenez un effet de règle verticale.

Mais quel est le meilleur moyen d'obtenir cet effet ces jours-ci? Avoir html5 et css3 dans votre boîte à outils ..

Merci d'avance!

Source

2013-02-07 Tiwaz89

+1

qu'entendez-vous par "séparateurs horizontaux"? seulement voir les verticales. –

+0

@RainDiao - Ah mec! Je voulais dire vertical, désolé je vais le changer rapidement. – Tiwaz89

Répondre

4

Essayez cette

HTML

<div class="outer"> 
<div class="wrap"> 
<div class="sub">Lorem Ipsum</div> 
<div class="sub">Lorem Ipsum </div> 
<div class="sub">Lorem Ipsum </div> 
</div> 
</div>

CSS

.outer { 
    background: #734e91; 
    padding: 12px; 
} 
.wrap { 
    margin: 0 auto; 
} 
.sub { 
    padding: 12px; 
    width: 32%; 
    height: 150px; 
    background: #734e91; 
    display: table-cell; 
    border-right: solid #a175c4 1px; 
} 
.sub:last-child { 
    border: 0px; 
}

DEMO UPDATED

Source

2013-02-07 11:02:24 Sowmya

+0

BOOM! Nice, ça marche parfaitement! Vous avez des compétences. – Tiwaz89

+0

@DeanGrobler wait .. Prenez le nouveau code qui vient d'être mis à jour – Sowmya

+0

Ah sympa, oui c'est mieux. Merci :) – Tiwaz89

1

Commander Twitter Bootstrap (http://twitter.github.com/bootstrap/), cadre Gumby (http://gumbyframework.com/)

Ces cadres peuvent vous fournir des fonctionnalités tout trouvé pour la barre horizontale. Sinon, utilisez des bordures. Définir toutes les frontières, sauf droit aussi transparent couleur

Source

2013-02-07 10:49:04 Sparky

+0

Merci, même si je connais déjà ces frameworks. Je veux savoir comment vous obtenez l'effet avec le html pur et CSS. Merci quand même! – Tiwaz89

+0

Ces frameworks, comme vous devez le savoir, sont basés sur du HTML pur et du CSS. Vous pouvez éditer leur html et css très facilement pour les effets que vous désirez. Avez-vous aussi essayé le framework Less Css? Si ce n'est pas le cas, il peut répondre à votre requête: http://lesscss.org/ – Sparky

1

La façon css3 de faire des colonnes utilise "column-*" family of properties

Ils sont désormais pris en charge par tous les principaux navigateurs et il devrait y avoir aucun problème avec eux.

Personnellement, j'utilise ces styles dans mon home site et ils fournissent des mises en page très flexibles (avec peut-être quelques petites imperfections).

Source

2013-02-07 10:52:39 johnfound

+0

pas pris en charge dans IE comme indiqué dans le lien .. –

+0

@KhurramIshaque: La question portait sur les dernières technologies. Qu'est-ce que IE a à faire ici? : P – johnfound

+0

parce que le contenu du site utilisant des colonnes css3 ne s'affichera pas pour les utilisateurs IE. –

1

La meilleure façon dépend de ce que vous voulez réaliser. Comment les colonnes devraient-elles se comporter pour redimensionner la fenêtre?

Si je faisais quelque chose comme dans l'image, j'utiliserais probablement une largeur fixe pour pouvoir contrôler la largeur de ligne du texte.

En utilisant inline-block, vous pouvez obtenir des colonnes qui se sont effondrés et placés sous l'autre sur un écran plus petit (comme un téléphone)

Essayez de comprendre le premier comportement aout désiré.

EDIT: Oups, j'ai mal lu et confondu horizontalement avec vertical ;-) Je pense que les autres réponses explique son assez cependant.

Corrigez-moi si je me trompe mais je pense que la propriété de la colonne css3 est pour plusieurs colonnes pour le même corps de texte.

Source

2013-02-07 10:54:09 Jonatan

+0

Merci d'avoir développé la réponse. C'est vrai que cela dépend de la fonctionnalité que vous voulez. En outre, oui, la propriété column est, comme vous le dites, utilisée pour créer des colonnes du même corps de texte. Donc, probablement pas la meilleure option dans ce cas. – Tiwaz89

1

Je recommande d'utiliser box-sizing: border-box; (une alternative au modèle de boîte de css standard).

Que fait box-sizing: border-box;? Si vous définissez la largeur d'un div (par exemple 33%) et ajoutez des bordures et des paddings, cela affecte plus le calcul de votre div. Il reste 33% du parent avec (33% - (frontières + paddings)).

Le modèle de boîte standard les ajoute à 33% (33% + bordures + paddings dans notre cas).

balisage HTML:

<div class="footer"> 
    <div class="footer-item item1"></div> 
    <div class="footer-item item2"></div> 
    <div class="footer-item item3"></div> 
</div>

CSS:

.footer { 
    box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */ 
} 

.footer-item { 
    width: 33%; 
    float: left; 
} 

.footer-item + .footer-item { 
    border-left: 1px solid black; 
}

Source

2013-02-07 11:09:58 kleinfreund

4

jsFiddle Démo: http://jsfiddle.net/yDXLp/3/

<style> 
    footer { 
     background-color: #eee; 
     margin: 10px auto; 

    } 
    footer h2 { 
     font-size: 1.5em; 
     font-weight: bold; 
    } 
    footer > div, 
    footer > .divider { 
     display: inline-block; 
     vertical-align: middle; 
    } 
    footer > div { 
     padding: 1%; 
     text-align: center; 
     width:30%; 
    } 

    footer > .divider { 
     font-style: normal; 
     height: 240px; 
     border: 1px solid #888; 
     -webkit-box-shadow: 1px 2px 1px #ccc; 
     box-shadow: 1px 2px 1px #ccc; 
    } 
</style> 

<footer> 
    <div> 
     <h2>Our Client</h2> 
     <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
     <button>Read more</button> 
    </div> 
    <i class="divider"></i> 

    <div> 
     <h2>Pay Rates</h2> 
     <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
     <button>Read more</button> 
    </div> 
    <i class="divider"></i> 
    <div> 
     <h2>About US</h2> 
     <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
     <button>Read more</button> 
    </div> 
</footer>

Source

2013-02-07 11:16:16

Questions connexes

 Questions connexes