Bonjour

Je cherche à faire un menu comme celui dans l'image, mais à la verticale. C'est à dire les items de mon menu à la verticale. Je sais faire des menus à la vertical (il suffit de les lister avec un float). Mais le truc c'est que je veux que les items du menu soit accompagné du rectangle qui entoure le contenu même de la page. Comme dans l'image. (Si possible je cherche à faire ça uniquement en css pas de Js) si pas possible, j'irai avec le js. Des idées sur comment débuter?

début de piste à étudier, il y a surement beaucoup mieux

tu donnes une classe à la page / onglet actuel (ça je pense que dans tous les cas il faudra le faire)

ensuite, dans ton css, tu ajoutes des propriétés supplémentaires à cette classe, à toi de voir lesquelles. (changer le background-image + height pour cacher la bordure[solution dégueulasse] / enlever la bordure en bas de Overview, et s'arranger pour qu'elle soit formée par les autres éléments?)

Tu fait des balise <ul> et <li> et tu ajoute du CSS pour modifier les <ul> et <li> sur le net tu trouvera du CSS deja fait et tu modify

Regarde là : http://www.districtsolutions.co.uk/candidates/ et inspecte le code

Citation : nightmat

Regarde là : http://www.districtsolutions.co.uk/candidates/ et inspecte le code

J'ai regardé, effectivement à priori on pourrait croire que c'est une bonne idée, Si on cliques sur "Job seekers" on va sur la page http://www.districtsolutions.co.uk/candidates/
Et on se rend compte que les images du menu sont dans le répertoire /_images/template/ exemple : /_images/template/tab_candidates_1.gif
Donc suffit de créer autant de répertoire qu'il y a de sous menu, et de copier autant de fois l'ensemble des images.
MAIS (il y a un mais), pour un menu avec avec beaucoup d'onglets il faut multiplier les images, du coup à chaque fois que l'on change de page le navigateur doit les charger, par ce qu'elles sont dans des répertoire différents (au moins la première fois) je ne trouve pas ca terrible.
et 2ème mais : c'est de l'URL rewriting, http://www.districtsolutions.co.uk/candidates/ n'est pas le dossier candidates de http://www.districtsolutions.co.uk/ c'est plutôt districtsolutions.co.uk/index.php?page=candidates (ou quelque chose dans le genre),
ce qui me fait penser à ca ? l'image districtsolutions.co.uk/candidates/_images/template/tab_candidates_1.gif n'existe pas, mais par contre l'image districtsolutions.co.uk/_images/template/tab_candidates_1.gif existe...

La seule solution : programmer en php le html qui doit être affiché en fonction de la page.

Citation

programmer en php le html qui doit être affiché en fonction de la page.

Peux-tu clarifier ce point SVP

bien sure, par exemple :

<ul>
<li <?php if($page="accueil.php") echo 'id="page_en_cours"';?>>accueil</li>
<li <?php if($page="page1.php") echo 'id="page_en_cours"';?>>page1</li>
<li <?php if($page="page2.php") echo 'id="page_en_cours"';?>>page2</li>
<li <?php if($page="page3.php") echo 'id="page_en_cours"';?>>page3</li>
</ul>

En fait mon problème n'est pas vraiment de naviguer entre les pages, mais plutôt de faire le design des items sous cette forme en verticale. (de préférence sans image)

je précise la question

Ce que je cherche à faire c'est le menu simple comme indiqué ci-dessous sauf que je veux les items à la verticale. Avec l'effet de trait qui souligne le menu, sauf que dans ce cas il devra être vertical. Lorsque l'usager clique sur un item, le trait qui souligne la bordure disparait et on sens que l'item appartient au contenu puisque de même couleur, pas de trait séparateur

J'ai bien compris, par contre ce que je ne comprend pas c'est : qu'est ce qui te bloque ? dans le principe il faut suivre le code que j'avais mis avant (avec ul et les li)

Merci pour ta réponse.

En fait c'est le côté design qui bloque.

Je n'est pas l'effet de l'encadré du contenu et de l'item du menu sélectionné.

Suffit de le définir dans le css, c'est pour ca que j'ai rajouté <?php if($page="accueil.php") echo 'id="page_en_cours"';?> pour pouvoir différencier le menu correspondant à la page actuelle et lui donné un aspect différent

lol Mais le problème justement c'est de pouvoir faire cet effet en CSS.

il n'y a rien de compliqué, quelques ligne de border:...; et c'est tout

Bonjour,

Ce sujet a un titre qui ne décrit pas correctement le sujet, ou il est écrit en majuscules.

La présentation de votre message étant néanmoins correcte, nous ne fermons pas le sujet, mais vous êtes invité(e) à modifier son titre en éditant votre premier message.

Cette modification doit être faite dans les plus brefs délais, sans quoi nous serons dans l’obligation de clore le sujet .


Voici quelques correspondances pour vous aider à choisir au mieux votre titre :

• Faites des titres explicites
• Un effort sur les titres svp
• Bien poster un topic dans le forum programmation
• Bien poster un topic dans le forum recrutements pour vos projets

Si vous êtes l'auteur du topic, vous pourrez uniquement le changer en éditant le premier post du topic à l'aide de l'icône .



Merci de votre compréhension

essayes ceci :

#menu li {
	background-color:#99CCFF;
	border-color:#6699FF;
	border:1px solid;
	width:30px;
	height:150px;
	color:#006699;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}	
	
#menu li a {
	background-color:#99CCFF;
	border-color:#6699FF;
	border:1px solid;
	width:30px;
	height:150px;
	color:#006699;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}	
	
#menu li a:hover {
	background-color:#CCCCFF;
	border-color:#6699FF;
	border:1px solid;
	width:30px;
	height:150px;
	color:#003366;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bolder;
	}

ensuite tu créés ta div menu et à l'intérieur tu fais ton <ul><li> </li></ul>