Etonnamment mise en page avancée en CSS

Question

i ont une structure HTML suivant:

<div class="container"> 
    <div class="sidebar"></div> 
    <div class="content"></div> 
    <div class="subscript"></div> 
</div> 

je besoin suivant la mise en page:

┌─────────┬───────────────────────┐ 
│   │      │ 
│ sidebar │  content   │ 
│   │      │ 
│   │      │ 
├─────────┤      │ 
│   │      │ 
│ w ├─────────┬─────────────┤ 
│   │subscript│  w  │ 
└─────────┴─────────┴─────────────┘ 

w - est blanc espace

Le récipient doit avoir une largeur fixe et flexible hauteur (doit s'étendre pour s'adapter à son contenu)

La barre latérale doit avoir une largeur et une hauteur fixes et être op-aligné.

Le contenu doit être sur le côté droit de la barre latérale et prendre tout l'espace horizontal libre. Il doit être extensible verticalement, pour s'adapter à son texte

L'indice doit être positionné juste en dessous du contenu et être aligné à gauche avec lui. En outre, il doit être étendu horizontalement, pour s'adapter à son texte (abonnement)

Comment cela peut-il être fait, en utilisant du CSS pur?

Answer 1

Avancé? À peine. Plus simplement:

/* Fix page width. As per requirements, but questionable IMO. Why not liquid? */ 
.container { width: 750px; margin: 0 auto; } 

/* Sidebar on left, other elements moved to the right */ 
.sidebar { float: left; width: 150px; } 
.content, .subscript { margin-left: 150px; } 

/* Make subscript shrink its width to fit its content */ 
.subscript { display: inline; } 

Ce triche un peu en faisant la ligne de pour l'indice rendre ses dimensions de la psy à monter »son texte. Cela pourrait ou non être acceptable en fonction de ce que .subscript est réellement.

Vous pouvez faire cela de plusieurs autres manières si vous voulez que .subscript reste un élément d'affichage de bloc. Par exemple, float: left sans width explicite sur le .subscript. Ensuite, vous aurez besoin soit d'un clear: left explicite sur un nouvel élément juste avant la fin du conteneur, ou, si vous préférez ne pas modifier le balisage du tout, un hack auto-compensation sur .container (tel que le hack overflow: hidden comme mentionné par dhabersack, vérifiez les corrections de hasLayout pour cela si vous avez besoin du support IE6).

Answer 2

Cela semble être quelque chose qui pourrait être mis en œuvre sans trop de problèmes en utilisant 960.gs ou d'autres grilles CSS là-bas sans trop de problèmes. Vous obtenez assez bien les espaces gratuitement, donc nous allons les ignorer.

Vous avez besoin de fixer la largeur de la barre latérale, et il doit avoir une hauteur flexible, donc vous voulez juste une "cellule" avec une largeur (disons 9 des 24 colonnes). le contenu prend alors les colonnes restantes (par exemple 15).

Vous devez préfixer la cellule de l'indice avec quelques colonnes (la même que celle occupée par la cellule de la barre latérale), puis donner à l'indice un nombre fixe de colonnes.

Cela impliquerait quelques ajustements à votre balisage, quelque chose comme ceci:

<div class="container_12"> 
    <div class="sidebar grid_9"></div> 
    <div class="content grid_15"></div> 
    <div class="clear"></div> 
    <div class="subscript prefix_9 grid_7"></div> 
    <div class="clear"></div> 
</div> 

Answer 3

On dirait que vous pouvez utiliser une mise en page simple à deux colonnes, avec barre latérale sur la gauche et le contenu à droite, qui contient une enfant d'indice.

<style type="text/css"> 
    #container { width: 800px; overflow: hidden; } 
    #sidebar { width: 200px; float: left; } 
    #content { width: 600px; float: right; } 
    #subscript { display: inline; } 
</style> 

<div id="container"> 
    <div id="sidebar"> 
     <p>Left</p> 
    </div> 
    <div id="content"> 
     <p>Right</p> 
     <div id="subscript"> 
      <p>Bottom</p> 
     </div> 
    </div> 
</div> 

Answer 4

Je ne suis pas d'accord avec Dominic Rodger: un framework serait trop lourd pour quelque chose d'aussi simple. Bien sûr, vous devriez avoir une sorte de grille sous-jacente, mais vous n'avez pas besoin de l'intégralité de 960.gs, blueprint ou tout autre «framework» qui pollue votre balisage avec des classes inutiles.

Les frameworks nécessitent l'utilisation de noms de classes prédéfinis tels que .grid_2, .grid_12 et autres, qui vous lient éternellement à cette disposition. Ce genre de vaincre le découplage de HTML et CSS: une refonte vous obligerait à modifier à la fois votre feuille de style et votre balisage, qui se détraque rapidement. En général, je ne le recommanderais pas.

Vos exigences sont assez basiques et peuvent faire sans cadres tout à fait bien.En gros, tout ce que vous avez à faire est d'ajouter un autre conteneur à votre balisage (aussi, vous devez utiliser id au lieu de class si un seul de ces éléments peuvent exister sur une page donnée):

<div id="container"> 
    <div id="sidebar"> 
    </div><!-- #sidebar --> 

    <div id="main"> 
    <div id="content"> 
    </div><!-- #content --> 

    <div id="subscript"> 
    </div><!-- #subscript --> 
    </div><!-- #main --> 
</div><!-- #container --> 

(j'utiliser ces commentaires pour être en mesure de faire correspondre les balises de fermeture avec leur homologue, ne hésitez pas à les omettre)

maintenant, tout ce que vous avez à faire est de faire flotter les éléments en fonction de vos besoins.

#container { 
    overflow: hidden; /* don't collapse (floated children) */ 
    width: 960px; /* fixed width for entire site */ 
} 

#sidebar { 
    float: left; /* floating to the left in #container */ 
    height: 200px; /* fixed height */ 
    width: 320px; /* fixed width */ 
} 

#main { 
    float: right; /* floating to the right of #container */ 
    overflow: hidden; /* don't collapse (floated children) */ 
    width: 640px; /* width of #container - width of #sidebar */ 
} 

#content { 
    /* you shouldn't even need rules for this one */ 
} 

#subscript { 
    float: left; /* floated to be only as wide as needed for content */ 
} 

div s sont des éléments de bloc, alors à moins qu'ils ne soient flottants ou aient une largeur fixe, ils occupent tout l'espace disponible (voir #content).

Maintenant éléments flottants d'autre part ne pas une hauteur, de sorte que leur conteneur parent serait tout simplement l'effondrement (vous ne seriez pas en mesure de remplir les espaces blancs des zones avec une couleur avec #container { background: red }. Pour éviter de s'effondrer #container , overflow: hidden est nécessaire.

en fait, chaque fois que vous flottez un élément quelque part sur votre page, son conteneur parent doit avoir overflow: hidden (voir #container et #main).

de toute évidence, vous devez modifier les dimensions selon vos besoins