Menu vertical à gauche

Version imprimable

Bonjour,

J'ai un problème sur mon site. J'ai un menu vertical à gauche et des éléments à droite de ce menu. Les éléments sont très bien affichés jusqu'à ce qu'ils passent sous le menu et à ce moment-là, ils ont des tailles très différentes.

Voici la page en question : http://baptiste-wicht.developpez.com/tutoriels/java

J'aimerais donc que les éléments qui sont après le menu prenne toute la largeur de l'espace possible comme le 7 tutoriel qui est affiché.

J'ai essayé en spécifiant une taille de 100, mais à ce moment là, ils sont tous affichés après le menu et j'ai un gros trou à droite du menu.

Voici le CSS pour le menu et le div de contenu qui englobe tous les table des tutoriels.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 div#menu { width:150px; float:left; padding-top:20px; padding-left:20px; padding-right:20px; } div#content { text-align:justify; margin-left:20px; }
Voici le table pour un tutoriel (répété x fois) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <table class="object" cellpadding="0" cellspacing="0"> <tr> <td class="topLeft" style="color:#FFFFFF;" width="80%">....</td> <td class="topRight" style="color:#FFFFFF;" width="20%">...</td> </tr> <tr> <td colspan="2">...</td> </tr> <tr> <td class="bottomLeft">...</td> <td class="bottomRight">...</td> </tr> </table>
et les propriétés CSS du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 table.object{ background:#FAFAFA; border: 1px solid #000000; } td.topLeft{ background-color: #5272A9; text-align:left; border-bottom: 1px solid #000000; padding: 2px; } td.topRight{ background-color: #5272A9; text-align:right; border-bottom: 1px solid #000000; padding: 2px; } td.bottomLeft{ text-align:left; border-top: 1px solid #000000; padding: 2px; } td.bottomRight{ text-align:right; border-top: 1px solid #000000; padding: 2px; }
Est-ce que quelqu'un voit une solution ?

Merci d'avance.

05/12/2009, 15h43
Baptiste Wicht
J'ai trouvé une première solution pour faire quelque chose de joli avec :
Code:

1 2 3 4 5 table.object{ width:97%; background:#FAFAFA; border: 1px solid #000000; }
et
Code:

1 2 3 4 5 div#content { width:85%; text-align:justify; margin-left:200px; }
sur la page http://baptiste-wicht.developpez.com/tutoriels/java, ça rend bien, mais c'est dommage de perdre 200px de large sur une page textuelle comme http://baptiste-wicht.developpez.com...l/java/update/.
07/12/2009, 00h40
kaiser59

Salut,

Rétréci #divarticle (sinon se placera toujours en dessous) et met le en float left si ce n'est pas déjà fait ainsi que #divmenu.

Sinon pourquoi ne reprends tu pas une partie du css de tutorial java qui affiche bien ?
07/12/2009, 08h09
Baptiste Wicht

Merci pour l'aide, je viens de réussir à résoudre le problème ce matin :D

En fait, j'ai fait une margin sur le contenu pour aligner le tout à gauche et pour les pages de contenu, j'ai réussi à faire passer proprement le contenu en dessous du menu en y ajoutant un padding.
07/12/2009, 14h11
Bisûnûrs

Tu n'as pas dû reporter les modifications sur la page à la racine de ton dossier java.

Sinon, c'est pas super top sur les petites résolutions, chaque table d'un tutoriel sort du gabarit sur la droite. Tu devrais peut-être enlever le width:85% sur le div #content.

Et puis, une dernière remarque, les dossiers dans le web sont reconnus avec un slash à la fin de l'URL. Le navigateur s'en sort si on ne le met pas, mais il va d'abord essayer de chercher un fichier nommé java dans ton dossier tutoriels qu'il ne va pas trouver et remplira donc des logs d'erreur. Donc tu devrais corriger tous les liens de ton menu pour rajouter le slash final qui spécifie que c'est bien un dossier et non un fichier.
07/12/2009, 14h54
Baptiste Wicht

Citation:

Envoyé par Bisûnûrs

Tu n'as pas dû reporter les modifications sur la page à la racine de ton dossier java.

Je vois pas de quelle page tu parles, il me semble que j'ai répercuté les modifications

Citation:

Envoyé par Bisûnûrs

Sinon, c'est pas super top sur les petites résolutions, chaque table d'un tutoriel sort du gabarit sur la droite. Tu devrais peut-être enlever le width:85% sur le div #content.

Merci pour le commentaire, je vais regarder ce qu'il en est ;)

Citation:

Envoyé par Bisûnûrs

Et puis, une dernière remarque, les dossiers dans le web sont reconnus avec un slash à la fin de l'URL. Le navigateur s'en sort si on ne le met pas, mais il va d'abord essayer de chercher un fichier nommé java dans ton dossier tutoriels qu'il ne va pas trouver et remplira donc des logs d'erreur. Donc tu devrais corriger tous les liens de ton menu pour rajouter le slash final qui spécifie que c'est bien un dossier et non un fichier.

Merci pour l'information, je ne savais pas :ccool:

Je vais corriger ça dès que possible :)
07/12/2009, 15h02
Bisûnûrs

Citation:

Envoyé par Baptiste Wicht

Je vois pas de quelle page tu parles, il me semble que j'ai répercuté les modifications

En fait, sur la page article :
http://baptiste-wicht.developpez.com...l/java/update/
Le texte passe bien sous le menu, ce que tu souhaites il me semble.

En revanche, sur ton index java :
http://baptiste-wicht.developpez.com/tutoriels/java/
La liste des articles ne passe pas sous le menu et donc on perd donc les 200px de marge que tu as mis. C'est à ce niveau là que tu n'as pas reporté les modifications, non ? Ou alors j'ai mal lu le sujet. :aie:
07/12/2009, 15h06
Baptiste Wicht

Citation:

Envoyé par Bisûnûrs

En fait, sur la page article :
http://baptiste-wicht.developpez.com...l/java/update/
Le texte passe bien sous le menu, ce que tu souhaites il me semble.

En revanche, sur ton index java :
http://baptiste-wicht.developpez.com/tutoriels/java/
La liste des articles ne passe pas sous le menu et donc on perd donc les 200px de marge que tu as mis. C'est à ce niveau là que tu n'as pas reporté les modifications, non ? Ou alors j'ai mal lu le sujet. :aie:

Ben, c'est moi qui ai fait ça :aie:

Je trouvais plus joli d'avoir les longues listes de blocs alignées.
07/12/2009, 15h15
Bisûnûrs

Ben c'est pas ce que j'avais compris en lisant ça :

Citation:

Envoyé par Baptiste Wicht

Voici la page en question : http://baptiste-wicht.developpez.com/tutoriels/java

J'aimerais donc que les éléments qui sont après le menu prenne toute la largeur de l'espace possible comme le 7 tutoriel qui est affiché.

:aie:

Mais de toute façon tu as raison, c'est plus joli comme c'est actuellement, donc je pense que l'on peut clore le débat. :mrgreen:
07/12/2009, 15h33
Baptiste Wicht

Citation:

Envoyé par Bisûnûrs

Ben c'est pas ce que j'avais compris en lisant ça :

:aie:

Mais de toute façon tu as raison, c'est plus joli comme c'est actuellement, donc je pense que l'on peut clore le débat. :mrgreen:

:aie: Effectivement, j'en ai pas parlé là, mais à un pote, je me suis enmelé les pinceaux. Mea culpa :aie:
07/12/2009, 16h23
Baptiste Wicht

Citation:

Envoyé par Bisûnûrs

Et puis, une dernière remarque, les dossiers dans le web sont reconnus avec un slash à la fin de l'URL. Le navigateur s'en sort si on ne le met pas, mais il va d'abord essayer de chercher un fichier nommé java dans ton dossier tutoriels qu'il ne va pas trouver et remplira donc des logs d'erreur. Donc tu devrais corriger tous les liens de ton menu pour rajouter le slash final qui spécifie que c'est bien un dossier et non un fichier.

En fait, j'y pensais même plus mais ce sont pas des dossiers, ce sont des pages PHP dynamiques et j'utilise de l'URL Rewriting (via .htaccess) sur ces pages pour les rediriger sur les pages PHP, par exemple :

Code:

RewriteRule tutoriels/java[/]{0,1}$ tutos.php?cat=1 [L]

Donc à mon avis, ça ne devrait pas impacter les performances de mettre le / ou non, je me trompe ?
07/12/2009, 17h55
Bisûnûrs

Non non, si c'est de l'URL Rewriting et non des dossiers ça ne change rien, tu peux laisser comme ça, c'est très bien !