Simple mise en page CSS MasterPage

Question

Je suis impuissant, j'ai essayé ma meilleure compréhension CSS, mais ce n'est pas pour moi.

Je voudrais faire un très simple MasterPage:

• au sommet d'une div de largeur et 40 pixels de hauteur (1)
• au fond aussi une div de largeur et 40 pixels de hauteur (2)
• au milieu:
  • à gauche: une div de largeur 200 px (3)
  • sur le côté droit de la div gauche: un div avec ContentPlaceHolder (4)

Ce que je voudrais faire est: si je fais un certain site qui utilise ma page principale et placez un panneau dans la ContentPlaceHolder qui a une largeur 800px, je voudrais que mon site pour s'y adapter - top , divs moyen et inférieur pour avoir leur largeur de 1000px (200 + 800). Je ne voudrais pas non plus (et j'ai un gros problème avec ça) que le (4) descende si je redimensionne (rétrécisse) la fenêtre du navigateur - je voudrais que tous les divs soient bloqués.

Ceci est ma page html maître:

<div> 
    <div class="header"> 
    </div> 
    <div> 
     <div class="links"> 
     </div> 
     <div class="content"> 
     </div> 
    </div> 
    <div class="footer"> 
    </div> 
</div> 

Quel genre de CSS dois-je d'écrire pour faire ce travail finalement?

Answer 1

Vous ne savez pas si vous avez vérifié cela ou pas, mais nous utilisons le YUI-Grids CSS Framework pour nos mises en page. Cela nous évite d'avoir à passer beaucoup de temps sur CSS, ce qui ne nous permet pas d'être des développeurs.

Il y a même un grid builder qui vous permettra de mise en page graphique une page, puis copiez et collez le code HTML requis pour y arriver :)

Answer 2

Pour éviter divs flottaient d'être « pressé » hors de l'alignement vous voulez, vous utilisez généralement soit la largeur ou la largeur minimale.

Par exemple, dans ce code, la div contenant les liens et le contenu ne sera jamais inférieure à 1000 pixels. Si l'écran est inférieur à 1000 pixels, une barre de défilement s'affiche.

<div style="min-width: 1000px"> 
    <div class="links"></div> 
    <div class="content"></div> 
</div> 

Vous pouvez également utiliser la largeur au lieu de min-width:

<div style="width: 1000px"> 
    <div class="links"></div> 
    <div class="content"></div> 
</div> 

La différence entre les deux est simple: si vous spécifiez min largeur, la div peut atteindre être plus grand si elle a besoin à. Si vous spécifiez width, la div sera exactement la taille que vous avez spécifiée. Sachez que la largeur minimale n'est pas prise en charge par IE6.

Answer 3

Voici un coup rapide sur CSS/Markup spécifique pour ce problème.

Markup:

<!-- Header, etc. --> 
<div class="contentView"> 
    <div class="links"> 
    </div> 
    <div class="content"> 
    </div> 
</div> 
<!-- Footer, etc. --> 

CSS:

.contentView { 
    /* Causes absolutely positioned children to be positioned relative to this object */ 
    position: relative; 
} 

.links { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
} 

.content { 
    padding-left: 200px; 
} 

Vous voudrez peut-être votre pied de page à être "collant". Vérifiez ici pour plus d'informations à ce sujet: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Cela dépend de ce que le design demande. Cela rend la section des liens plus d'une boîte flottante sur la gauche que d'une colonne par exemple.

Cela finit par ressembler à ceci (.content est vert, .links est rouge):