28172 sujets

CSS et mise en forme, CSS3

[Résolu] Onglets placés sur le côté et non haut dessus.

Bonjour,

Après avoir (je crois) retourné la moitié des tutoriaux pour créer des "pages à onglets", je e tourne vers vous : je souhaiterais créer un site dont la navigation serait régler par des onglets mais je souhaiterais non pas les placer en haut de ma page (comme la grande majorité des sites) mais sur le côté droit de ma page; un espèce de carnet d'adresses en gros. Malheureusement, je ne suis pas parvenu à trouver mon bonheur jusqu'à présent.

Quelqu'un peut-il m'aider ?
Modifié par erakor (28 Jun 2008 - 21:17)
Bonjour,

je suppose que tu veux parler d'un menu de navigation auquel cas ces tutoriels devraient t'aider. Si ça n'est pas le cas une image de ce que tu cherches à obtenir ne serait pas superflue Smiley cligne !

En passant, ce n'est pas pour rien que l'on place généralement ces menus en haut (horizontalement) ou à gauche (verticalement) mais pour des raisons d'ergonomie : ils servent d'aiguillage général et doivent être facilement trouvés (visuellement et/ou par le biais d'une tabulation).

A+
Merci,

Seulement, le layout que j'aimerais obtenir ressemble à l'image jointe.
Ca aide ?

PS : aucun souci avec les navigations horizontales, mes sites précédents sont mis en page de cette manière. upload/15942-layout.jpg
erakor a écrit :
PS : aucun souci avec les navigations horizontales, mes sites précédents sont mis en page de cette manière.
Que ça ne te pose à toi aucun soucis, je n'en ai aucun doute ! Je pensais plus à certains de tes visiteurs Smiley langue !

Quoi qu'il en soit, voilà un petit test :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#global {
	width: 900px;
	margin: 5px auto;
	height: 800px;
	background-color: #FFFFFF;
}

#menu {
	float: right;
	list-style-type: none;
	list-style-image:none;
	list-style-position: outside;
	padding: 0;
	margin: 0;
	width: 250px;
}

#menu li {
	padding: 0;
	margin: 0;
	height: 150px;
}

#menu li a {
	padding: 0;
	display: block;
	background-color: #e4007a;
	height: 90%;
	text-align: center;
	line-height: 7;
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}

#menu li a.active {
	background-color: #61559d;
}

#menu li a:hover,
#menu li a:focus,
#menu li a:active {
	background-color: #61559d;
}

#menu li a.active, #menu li a.active:hover {
	background-color: #61559d;
}

#contenu {
	margin-right: 250px;
	height: 100%;
	background-color: #61559d;
	padding: 5px;
}

-->
</style>
<!--[if lt IE 7]>
<style type="text/css">

/* Corection du three pixel job */
#contenu {
	position: relative;
	left: 3px;
}

</style>
<![endif]-->

</head>
<body>
<div id="global">
<ul id="menu">
<li><a href="#" class="active">Onglet 1</a></li>
<li><a href="#">Onglet 2</a></li>
<li><a href="#">Onglet 3</a></li>
</ul>
<div id="contenu">
<p>du contenu...</p>
</div>
</div>
</body>
</html>

A+
Très classe !

J'apprécie ! Même les couleurs (arbitraires) y sont Smiley ravi ...

Grand merci.

Bonne soirée
Modifié par erakor (29 Jun 2008 - 00:01)
Sujet clos
Aller à