Mise en page de largeur de fluide à l'aide de CSS

Question

J'essaie de créer une page dont l'en-tête couvre la page.

l'en-tête contient des éléments de menu et ressemble à quelque chose comme ceci (ASCII rendu ci-dessous)

<------ Fixed Width ----------> <----------- Variable Width (Depends on Screen Width) --> 

----------------------------------------------------------------------------------------- 
    LOGO HERE (Fixed Width)  | Menu One | Menu Two | menu Three | Menu Four  
           |    |   |   |     
----------------------------------------------------------------------------------------- 

J'ai conçu ce en HTML comme ceci:

<div id="topMenu"> 
    <div id="topMenuLogo"><!-- flash logo stuff here --></div> 
    <div id="topMenuContainer"> 
     <div id="topMenuTopBar" class="right-align"> 
      <div class="useroption floatleft">Action 1</div> 
      <div class="useroption floatleft">Action 2</div> 
      <div class="spacer">&nbsp;</div> 
     </div> 
     <div id ="topMenuNavBar"> 
      <div id=topmenuMenuContainer"> 
       <ul> 
       <li>Menu One</li> 
       <li><!-- Other menus follow below ...... --></li> 
       </ul> 
      </div> 
     </div> 
     <div class="spacer">&nbsp;</div> 
    </div> 
    <div class="spacer">&nbsp;</div>   
</div> 

où la classe CSS 'entretoise' correspond le motif {hauteur: 1px; effacer: les deux;}

Je veux être en mesure d'écrire ce qui précède afin que la page se développe dynamiquement pour s'adapter à l'écran quelle que soit la résolution. Le logo a une largeur fixe donc cela ne change pas, mais je veux que l'élément de plongée topMenuContainer ajuste dynamiquement sa largeur en fonction de la taille de l'écran. En fait, cet élément contiendra les éléments suivants:

1. Un élément topMenuContainer qui dilate ou se contracte dépend de la résolution d'écran

2. Un topMenuTopBar qui flottait droit dans l'élément topMenuContainer

3. A topMenuNavBar que est flottant à gauche dans l'élément topMenuContainer

Je serais très reconnaissant si quelqu'un cou ld montre le CSS requis pour structurer l'extrait HTML ci-dessus de la manière que j'ai décrite.

Answer 1

Cela devrait être votre # 1 ressource pour les questions générales de mise en page comme celles-ci:

http://layouts.ironmyers.com/

Vous trouverez une mise en page CSS que vous pourriez vouloir sur son site. Si vous ne connaissez pas encore CSS, vous pouvez consulter les tutoriels à W3Schools:

http://www.w3schools.com/css/