28172 sujets

CSS et mise en forme, CSS3

Création menu CSS

Bonjour à toutes et à tous Smiley smile

Je ne suis pas un super calé en css mais j'essai de m’entraîner. Cependant je bloque et je souhaite un coup de pouce pour pourvoir faire ceci.

upload/51507-menus-a-re.png

J'ai un fichier Html qui accompagne. Sans rien ajouter ni modifier au html j'aimerais réaliser les 5 menus différents comme sur l'exemple d'image ci-dessus.
Je bloque sérieusement je ne sais pas comment m'y prendre donc si quelqu'un peu me donner un coup de pouce afin de m'éclairer.

Voici le Html. Je souhaite dans un premier temps intégrer le css directement dans le html.

Merci pour votre aide.


<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Créez des menus simple</title>
	<style type="text/css">
	/** Reset des styles du navigateur courant **/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
		font-family:Arial, sans-serif;
		font-size:13px;
	}
	ul {
		list-style: none;
	}
	</style>
</head>
<body>
	
<nav id="nav1">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

<nav id="nav2">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

<nav id="nav3">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

<nav id="nav4">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

<nav id="nav5">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

</body>
</html>
flexman a écrit :
Bonjour à toutes et à tous Smiley smile

Je ne suis pas un super calé en css mais j'essai de m’entraîner. Cependant je bloque et je souhaite un coup de pouce pour pourvoir faire ceci.


J'ai un fichier Html qui accompagne. Sans rien ajouter ni modifier au html j'aimerais réaliser les 5 menus différents comme sur l'exemple d'image ci-dessus.
Je bloque sérieusement je ne sais pas comment m'y prendre donc si quelqu'un peu me donner un coup de pouce afin de m'éclairer.


Bonjour,

essai tout d'abord de mettre en ligne tes 'menu' (commun a tous), de mettre des fonds de couleurs et des arrondis... en gros pour le moment, tu n'as rien fait n'y tenter, difficile de t'aider sans le faire pour toi Smiley smile http://codepen.io/anon/pen/eHtxB
Merci pour ta réponse.

Pour le premier menu j'ai tenté de faire ça mais l’alignement vertical des items ne fonctionne pas je doit mal m'y prendre et je n'arrive pas à bien créer l'effet de survol du bouton avec changement d'état.

http://codepen.io/anon/pen/HcEdC

Merci Smiley smile
Bonjour.

Le vertical-align middle fonctionne que dans certains cas bien précis. Le plus simple ici, lorsque que tu as une hauteur fixe, et de coller sur tes liens un line-height de la même hauteur que son parent. EDIT : Et pour que les liens prennent toute la hauteur du parent display:inline-block (attention au vieux navigateurs) ou alors en display:block avec float:left.

#nav1 a{
  display:inline-block;
  font-family:Arial, sans-serif;
  font-size:14px;
  color:#FFFFFF;
  text-decoration:none; 
  line-height:30px;
  text-align: center; 
  padding: 0px 15px;
}

Et pour le survol, il faut utiliser la pseudo classe :hover

#nav1 a:hover {
  background-color:#000;
  color:#aaa;
}

Modifié par SolidSnake (17 Sep 2013 - 18:00)
Bonjour,

Merci pour votre aide. Je commence à comprendre le truc.

Voici mon boulo. si il y à des erreurs de code dans le css ou si on peu faire plus simple au niveau css je suis preneur pour tout conseil Smiley smile

Au fait dans mon code je fait appel à des images que j'ai en local.

http://codepen.io/anon/pen/gnEei
Sujet clos
Aller à