18073 sujets

Questions générales et questions de débutants

Je cherche un tuto!

et zou

<!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" xml:lang="fr" lang="fr">
<head>
<title>Un menu avec multiples survols sans preload d'images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
background-color: #F5E9CF;
}
ul, li {	/* utilisation de liste pour le menu */
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}
ul {
position: absolute;	/* positionnement pour IE5 et IE5.5 */
top: 50px;
left: 20%;
background: transparent url(g01/newsletter.jpg) top left no-repeat;	/* arrière-plan général du menu */
width: 160px;
padding-top: 57px;
text-align: center;
}
li {display: inline;}	/* correction pour IE5 et IE5.5 */

li a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 160px;
color: #660000;
font-size: 17px;
font-family: georgia, serif;
text-decoration: none;
line-height: 25px;	/* hauteur de ligne pour éviter les paddings */
}
li a:hover {
color: #fff;
background: transparent url(g01/newsletter.jpg) top left no-repeat;
}
a#menu1:hover {	/* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -327px;
}
a#menu2:hover {
background-position: 0% -357px;
}
a#menu3:hover {
background-position: 0% -387px;
}
a#menu4:hover {
background-position: 0% -417px;
}
a#menu5:hover {
background-position: 0% -447px;
}
a#menu6:hover {
background-position: 0% -477px;
}
a#menu7:hover {
background-position: 0% -507px;
}
-->
</style>
</head>
<body>
<ul>
	<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
	<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>

	<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
	<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
	<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
	<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
	<li><a id="menu7" title="menu7" accesskey="7" href="#">Menu 7</a></li>
</ul>

<div style="position: absolute; bottom:0; left:20px; color:black">
<h1 style="font-size: 1.6em; margin: 0 0 5px 0">Une seule image pour tout le menu, et pas de preload !</h1>
<p>Raphaël GOETTER -  www.alsacreations.com  - <a style="color:black" href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></p>
</div>

</body>
</html>

Modifié par Maxwell (17 Jun 2005 - 04:20)
Administrateur
Salut Fleuretta et bienvenue sur le forum Smiley smile

Lorsque tu fais un clic droit sur la page, tu n'as pas une option "voir le code source" ? Smiley confus
Bonjour Messieurs! Smiley cligne Smiley biggrin

Lorsque je click droit je ne vois rien, aucune option pour voir le code source. Y'a une raison? Smiley confus

Merci de me l'avoir donné mais j'aimerais comprendre pourquoi je ne suis pas capable de le voir sinon je serais obligé de vous déranger à toute les fois! Smiley confused Smiley cligne Smiley biggrin

Merci encore et Bonne Journée! Smiley smile
Fleuretta a écrit :
Bonjour Messieurs! Smiley cligne Smiley biggrin

Lorsque je click droit je ne vois rien, aucune option pour voir le code source. Y'a une raison? Smiley confus

Merci de me l'avoir donné mais j'aimerais comprendre pourquoi je ne suis pas capable de le voir sinon je serais obligé de vous déranger à toute les fois! Smiley confused Smiley cligne Smiley biggrin

Merci encore et Bonne Journée! Smiley smile

Salut,
quel est ton navigateur ?

C'est assez étrange Smiley ohwell

<mod blague>
Rohh Raphaël, t'as encore foutu un script qui empeche le click droit pour pas te faire piquer tes tutos tssssss Smiley biggol
</mod blague>
bonjour,

sous Firefox, je te conseilles de telecharger la Dev Bar, ce qui te permettra d'avoir tout sous la main en permanence.

Sous IE, pour voir le code source, tu clique sur Affichage --> source
en faisant ceci IE ouvrira un logiciel qui doit se trouver sur ton pc du style notpad ou un autre. pour un confort de lecture, je te conseille de telecharger Notepad++. Il permet l'affichage des balises en couleur Smiley smile

amicalement,
Bonjour,

Comme devbar sous Firefox, j'utilise webdeveloper.xpi, tape ça sous google, télécharge le fichier, et ouvre le (fichier / ouvrir) avec Firefox. Au prochain démarrage de Firefox tu auras une superbe barre de menus très pratique pour développer avec plein de fonctions sympas (edit css, validation XHTML et CSS...) Smiley cligne

@Philippe: est ce qu'il en existe une autre ou parlais tu de la même?

Bonne journée
Bonjour à tous! Smiley lol

Je suis avec IE.

Si je reprends la procédure: Je vais sur l'image du menu choisit et je click droit. C'est tout? Et bien si c'est ça non je n'ai pas de code source. Rien de tout cela. Et je n'ai pas le mot Affichage non plus. Ce qui apparait est exactement la même chose que si je voulais sauvegarder l'image. Smiley confus

Merci encore de votre aide! Smiley smile
Salut Fleuretta !

Non, tu clics dans le vide sur la page Web, puis sélectionne l'onglet "Afficher la source', tu auras alors la source (code) de ce petit menu très bien fait Smiley smile
Merci! C'était le petit détail qui fait toute la différence!!! Smiley cligne Smiley smile

Autre chose! Lorsque j'ai trouvé cette façon de faire un menu j'ai ,avant tout ,trouvé l'exemple avec la face de bébé et celle que je parle ici était une variation. J'ai beau faire le tour autant comme autant je ne retrouve pas la face de bébé. Je suis folle, ou pas réveillée (8hr AM à Québec) mais une chose est certaine j'ai pas rêvé à cette face de bébé.

Elle est ou cette face de bébé? Smiley decu

Merci encore et Bonne Journée!
Désolé mais ce n'est pas ça . Toi tu parles du ptit garçon moi je parle d'un ptit bébé , beaucoup plus jeune que le ptit garçon. Un vrai bébé! Smiley biggrin

Merci quand même!

Bonne journée!
Sujet clos
Aller à