Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Publié dans : Liens, listes, menus, curseurs - Tous blogs
13styles proposent des menus à réaliser en HTML et CSS, tel que celui-ci
Première étape :
Vous cliquez sur le menu désiré puis sur download the zip file
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
Vous avez maintenant sur votre PC :
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes images :
En HTML de l'endroit où vous voulez ce menu :
En rajoutant ce qui est en rouge
En personnisant les adresses des images en violet : vous les avez noté lors la deuxième étape.
Si votre blog est sur OverBlog, vous effacez ce qui est en rouge
En bleu, vous remplacez par les URL de destination
En vert, vous personnalisez avec ce qui apparaîtra au survol de la souris
En orange, vous remplacez par la dénomination de vos liens
Première étape :
Vous cliquez sur le menu désiré puis sur download the zip file
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.
Vous avez maintenant sur votre PC :
- un dossier comportant des images
- un fichier style.css
- un fichier index.html
Deuxième étape :
Dans l'administration de votre blog - Documents - Mes images :
- vous créez un répertoire ayant le nom de votre menu
- vous y enregistrez les images
- vous notez leur adresse
En HTML de l'endroit où vous voulez ce menu :
- vous collez le contenu du fichier style.css
<style type="text/css">
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%
font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;
background:#fff url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_right-ON.gif) no-repeat top
right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
</style>
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%
font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;
background:#fff url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893
url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://idata.over-blog.com/0/37/17/67/menudoplhin/dolphin_right-ON.gif) no-repeat top
right;height:33px;}
/* ---------------------- END Dolphin nav ---------------------- */
</style>
En rajoutant ce qui est en rouge
En personnisant les adresses des images en violet : vous les avez noté lors la deuxième étape.
- vous collez ensuite le contenu du fichier index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>13styles.com Dolphin Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Home</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus" class="current"><span>About Us</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Services</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Our Work</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
</body>
</html>
<?php //PHP ADODB document - made with PHAkt 3.6.0?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>13styles.com Dolphin Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Home</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus" class="current"><span>About Us</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Services</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Our Work</span></a></li>
<li><a href="http://www.13styles.com" title="css website navigation menus"><span>Contact Us</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Si votre blog est sur OverBlog, vous effacez ce qui est en rouge
En bleu, vous remplacez par les URL de destination
En vert, vous personnalisez avec ce qui apparaîtra au survol de la souris
En orange, vous remplacez par la dénomination de vos liens
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Sommaires Pour les Blogs OverBlog
- Premiers pas en V2
- Gestion quotidienne
- Ecritures dans les modules
- Ecritures dans les articles et pages
- Ecritures dans les fenêtres et albums photos
- Modifier les Fonds
- Placer des images
- Ajouter, déplacer ou masquer
- Design complet et Idées de Mise en page
- Aspect des Ascenseurs, Puces et Curseurs
- Cadres,lignes et bordures
- Effets d'Ecriture et de Texte
- Effets d'images et Diaporamas
- Créer et transformer des Images
- Placer des documents
- Musique, son, vidéo et télé
- Cadres, tableaux, lignes
- Liens, listes et menus
- Interactivité et gadgets
- Indicateurs,compteurs et Protection
- référencement, communautés et flux RSS
Dernières Astuces
- Changer plusieurs fois la couleur des liens au survol de la souris - Privilège
- Créer des infobulles avec Prototip - Privilège
- Créer un pop up avec message
- Changer un texte au passage de la souris
- Créer des textes animés en flash
- Créer votre signature manuscrite
- Créer un smiliz
- Ecrire en chinois
- Ecrire en hieroglyphes
- Ecrire en Bretzel
Publicité
Coin Films
Coin Jeux Vidéos
Coin Loisirs Exterieurs
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Commentaires