Décaler le corps par rapport au menu en CSS
Ochosias
-
notobe Messages postés 2222 Statut Membre -
notobe Messages postés 2222 Statut Membre -
Bonjour,
Je rencontre actuellement un problème au niveau du design de mon site web.
J'ai plusieurs blocs (header, menu, corps, footer) et j'aimerais avoir le header en haut, le menu à gauche, le corps à coté du menu, et le footer en dessous de tout. Mon seul problème dans cette configuration est de mettre mon corps à coté.
En fait ce que je veux est tout simple à faire avec un float et un width sur le menu, accompagné d'un margin-left pour mon corps, ca fontionne. Là ou ça se complique, c'est que mon menu est alimenté par une base de données, et donc la taille du menu est amené à changé (en largeur, je ne souhaite pas coupé les liens du menu), et avec le width, soit le menu est trop grand, soit trop petit en cas de changement.
Je pensais que cela était possible avec les positionnements, (comme un positionnement absolue sur le corps) mais rien n'y fait, impossible d'arriver au résultat attendu avec float ou position.
J'aimerais donc savoir s'il est possible de réaliser cela en CSS.
Si quelqu'un a une quelconque idée, je lui en serait très reconnaissant :)
Je rencontre actuellement un problème au niveau du design de mon site web.
J'ai plusieurs blocs (header, menu, corps, footer) et j'aimerais avoir le header en haut, le menu à gauche, le corps à coté du menu, et le footer en dessous de tout. Mon seul problème dans cette configuration est de mettre mon corps à coté.
En fait ce que je veux est tout simple à faire avec un float et un width sur le menu, accompagné d'un margin-left pour mon corps, ca fontionne. Là ou ça se complique, c'est que mon menu est alimenté par une base de données, et donc la taille du menu est amené à changé (en largeur, je ne souhaite pas coupé les liens du menu), et avec le width, soit le menu est trop grand, soit trop petit en cas de changement.
Je pensais que cela était possible avec les positionnements, (comme un positionnement absolue sur le corps) mais rien n'y fait, impossible d'arriver au résultat attendu avec float ou position.
J'aimerais donc savoir s'il est possible de réaliser cela en CSS.
Si quelqu'un a une quelconque idée, je lui en serait très reconnaissant :)
A voir également:
- Décaler le corps par rapport au menu en CSS
- Menu déroulant excel - Guide
- Décaler colonne excel - Guide
- Plan rapport de stage - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
4 réponses
Si je comprends bien, ton menu est à gauche.
Si tu le mets flottant à droite, sans spécifier de largeur pour ton content, ça devrait s'adapter automatiquement à la largeur de ton menu.
Si tu le mets flottant à droite, sans spécifier de largeur pour ton content, ça devrait s'adapter automatiquement à la largeur de ton menu.
Je viens d'essayer ta solution, mais malheureusement cela ne fonctionne pas, si je fais ça les 2 se chevauche.
Pour essayer d'être un peu plus clair, voici ce que j'aimerais :
-------------------------------------
| Header |
-------------------------------------
| - Menu | |
| - Menu | Corps avec texte |
| - Menu | Corps avec texte |
| - Menu | Corps avec texte |
| - Menu | |
-------------------------------------
| Footer |
-------------------------------------
Donc la structure est toute simple, mon menu n'est pas modifiable, dans le sens ou c'est une liste, avec nowrap, donc la largeur du menu dépend de la longueur du texte tiré de la base de données, d'où l'importance de laisser la taille du menu adaptable et donc de ne pas utiliser de width.
De plus, j'aimerais que chaque div ait sa propre bordure, séparé du reste, donc il faudrait que tout le div soit décalé, et pas seulement le texte contenu dedans.
Le float me permet de réaliser cette dernière solution, c'est à dire aligner le texte du corps sur le menu, mais pas aligner le div sur le menu. C'est donc pour réaliser ça que j'ai besoin de votre aide, car je ne sais pas comment faire (si cela est possible).
Merci.
Pour essayer d'être un peu plus clair, voici ce que j'aimerais :
-------------------------------------
| Header |
-------------------------------------
| - Menu | |
| - Menu | Corps avec texte |
| - Menu | Corps avec texte |
| - Menu | Corps avec texte |
| - Menu | |
-------------------------------------
| Footer |
-------------------------------------
Donc la structure est toute simple, mon menu n'est pas modifiable, dans le sens ou c'est une liste, avec nowrap, donc la largeur du menu dépend de la longueur du texte tiré de la base de données, d'où l'importance de laisser la taille du menu adaptable et donc de ne pas utiliser de width.
De plus, j'aimerais que chaque div ait sa propre bordure, séparé du reste, donc il faudrait que tout le div soit décalé, et pas seulement le texte contenu dedans.
Le float me permet de réaliser cette dernière solution, c'est à dire aligner le texte du corps sur le menu, mais pas aligner le div sur le menu. C'est donc pour réaliser ça que j'ai besoin de votre aide, car je ne sais pas comment faire (si cela est possible).
Merci.
Mon problème reste le même, le corps prend toute la page, et le menu vient se rajouter par dessus, à droite. Le texte du corps s'aligne bien sur le menu, de la même manière que lorsque le menu était flottant à gauche.
Mais les bordures droites (ou gauche en fonction du float) du corps et du menu sont superposées, et ce à l'extrémité de la page. Seul le texte s'aligne, et non le bloc div.
Mais les bordures droites (ou gauche en fonction du float) du corps et du menu sont superposées, et ce à l'extrémité de la page. Seul le texte s'aligne, et non le bloc div.
Tu n'aurais pas un width déclaré dans le corps par hasard ?
Car normalement, celui-ci ne doit pas superposer le menu.
Un truc comme ça ne pose aucun problème de superposition :
D'ailleurs, je suis en train de me demander pourquoi j'ai été chercher si compliqué... si le menu est flottant à gauche ça marche très bien aussi ! ;)
Car normalement, celui-ci ne doit pas superposer le menu.
Un truc comme ça ne pose aucun problème de superposition :
<div style="float:right"> <ul> <li>Item 1</li> <li>Item 2</li> <li>item plus long</li> </ul> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim rutrum dolor ut fermentum. Integer porttitor arcu non odio mattis nec vulputate elit tempor. Etiam quis aliquam lacus. In scelerisque vestibulum erat. Curabitur magna quam, dapibus in hendrerit at, auctor ut elit. Vestibulum ac metus lorem, ac placerat dui. Proin lacinia metus ut lorem pretium pellentesque. Integer ut est neque. Cras euismod diam et massa varius tempor. Integer condimentum adipiscing eros, rutrum molestie odio pulvinar a. Maecenas ultrices semper lacus, id posuere sem pretium vel. Quisque posuere porta justo, ut dignissim mi consequat a. Integer a tortor at mi hendrerit tincidunt vitae quis tellus. </p> </div>
D'ailleurs, je suis en train de me demander pourquoi j'ai été chercher si compliqué... si le menu est flottant à gauche ça marche très bien aussi ! ;)
Essaye avec ce code, tu comprendra mieux ce que je veux dire :)
<div style="float:left; border-style:solid; border-width:2px; border-color: red;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>item plus long</li>
<li>item plus long 2</li>
<li>item plus long 3</li>
</ul>
</div>
<div style="border-style:solid; border-width:4px; border-color: green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim rutrum dolor ut fermentum. Integer porttitor arcu non odio mattis nec vulputate elit tempor. Etiam quis aliquam lacus. In scelerisque vestibulum erat. Curabitur magna quam, dapibus in hendrerit at, auctor ut elit. Vestibulum ac metus lorem, ac placerat dui. Proin lacinia metus ut lorem pretium pellentesque. </p>
</div>
Encore une fois, c'est bien les div eux même que je veux décaler et pas seulement le texte ;) La raison est que j'utilise les bordure pour le design du site, et ce sur chacun des blocs (menu et corps séparés)
<div style="float:left; border-style:solid; border-width:2px; border-color: red;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>item plus long</li>
<li>item plus long 2</li>
<li>item plus long 3</li>
</ul>
</div>
<div style="border-style:solid; border-width:4px; border-color: green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim rutrum dolor ut fermentum. Integer porttitor arcu non odio mattis nec vulputate elit tempor. Etiam quis aliquam lacus. In scelerisque vestibulum erat. Curabitur magna quam, dapibus in hendrerit at, auctor ut elit. Vestibulum ac metus lorem, ac placerat dui. Proin lacinia metus ut lorem pretium pellentesque. </p>
</div>
Encore une fois, c'est bien les div eux même que je veux décaler et pas seulement le texte ;) La raison est que j'utilise les bordure pour le design du site, et ce sur chacun des blocs (menu et corps séparés)
Ahhhh, oui, bien sûr. Je ne parlais que du texte...
C'est sur que là, c'est moins évident. Car on ne peut pas encore en CSS définir la taille d'un élèvement en fonction de celle d'un autre (ça doit venir, mais pas encore implémenté).
Donc, non, pas de solution en CSS.
Tu ne peux que faire une coupe mal taillée en estimant la largeur max que peut atteindre ton menu et fixant la marge en conséquence.
C'est sur que là, c'est moins évident. Car on ne peut pas encore en CSS définir la taille d'un élèvement en fonction de celle d'un autre (ça doit venir, mais pas encore implémenté).
Donc, non, pas de solution en CSS.
Tu ne peux que faire une coupe mal taillée en estimant la largeur max que peut atteindre ton menu et fixant la marge en conséquence.
Ok, c'est bien ce qui me semblait, ayant fait a peu près tous les sites sur la question depuis quelques jours ^^
Merci quand même pour ton aide, et pour avoir confirmé que cela n'était pas possible avec les div. Il ne reste donc que les tableaux, bien que cela ne soit pas correct d'un point de vu w3c.
Merci quand même pour ton aide, et pour avoir confirmé que cela n'était pas possible avec les div. Il ne reste donc que les tableaux, bien que cela ne soit pas correct d'un point de vu w3c.
bien que cela ne soit pas correct d'un point de vu w3c.
Non, ce n'est pas exactement ça ;)
L'histoire de la mise en page par tableau est néfaste pour des questions d'accessibilité si ceux-ci sont mal fait : tableaux x fois imbriqués, détournement de balises à des fins de présentation (th par exemple) etc. Et puis il y a aussi que cela rend le code plus lourd et plus difficilement maintenable. Donc la mise en page sans tableaux doit être privilégiée, certes, mais ce n'est pas formellement incorrect lorsqu'on ne peut vraiment pas faire autrement.
Certaines pages sans tableaux, où il y a une absence totale de sémantique (du code rien qu'avec des div par exemple, sans hn, sans p etc.), avec du js obstrusif et autres joyeusetés, sont bien plus incorrectes qu'une page avec un tableau simple où le reste du code est parfaitement correct sémantiquement parlant.
Bon courage pour la suite :)
Non, ce n'est pas exactement ça ;)
L'histoire de la mise en page par tableau est néfaste pour des questions d'accessibilité si ceux-ci sont mal fait : tableaux x fois imbriqués, détournement de balises à des fins de présentation (th par exemple) etc. Et puis il y a aussi que cela rend le code plus lourd et plus difficilement maintenable. Donc la mise en page sans tableaux doit être privilégiée, certes, mais ce n'est pas formellement incorrect lorsqu'on ne peut vraiment pas faire autrement.
Certaines pages sans tableaux, où il y a une absence totale de sémantique (du code rien qu'avec des div par exemple, sans hn, sans p etc.), avec du js obstrusif et autres joyeusetés, sont bien plus incorrectes qu'une page avec un tableau simple où le reste du code est parfaitement correct sémantiquement parlant.
Bon courage pour la suite :)
Malheureusement je ne peux pas tester ça dans l'immédiat, c'est au boulot, mais j'essaie demain à la première heure.
En tout cas, merci pour ta réponse.