J'essaie de comprendre comment avoir une barre de navigation flottante à gauche du contenu, c'est-à-dire une largeur fixe mais un conteneur qui l'entoure qui s'étend jusqu'au bord de la fenêtre tout en conservant le contenu centré sur la page.Menu flottant Largeur variable
Et voici ce que j'ai fait jusqu'à présent et une image de ce que je veux dire. http://dl.dropbox.com/u/23132/index.html
Une aide ou des idées?
une solution de Got Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
Si vous souhaitez utiliser jQuery, vous pouvez facilement calculer le décalage du corps principal et ajuster la largeur/marge/marge de la barre latérale en conséquence.
Exemple simple
Deux problèmes. Il ne centre pas la zone de contenu et la zone de menu dans une position centrée. L'autre est que la zone de contenu glisse sous le menu à des tailles plus petites. Je l'ai essayé ici. http://dl.dropbox.com/u/23132/New%20Folder/index2.html – Picard102
C'est la même technique mais je l'ai changé pour être plus proche de votre maquette, je pense. Maintient le menu et le contenu centré, sans glisser sous. http://dl.dropbox.com/u/1588084/floatmenu_2.htm –
Cela ne fonctionne toujours pas correctement. Le menu et la barre latérale doivent être dans une position fixe et quand j'essaye de faire cela avec votre version, elle tombe en morceaux. Le menu et la partie fluide vont aussi avoir un contenu qui change donc ils doivent avoir la même hauteur de façon dynamique. – Picard102
Pas de chance avec la hauteur dynamique de la zone de navigation? –
Ils hauteur dynamique semble fonctionner, la hauteur est juste dans l'exemple pour maintenir la forme sans ajouter de contenu pour la démo. – Picard102