-
Faire un menu arrondi (4 liens)
Code à mettre dans la partie CSS.
Etant donné que le code CSS est très long, j'ai déjà rendu le code un peu plus lisible. Les mots en noir sont des commentaires, ils ne seront pas pris en compte dans votre code css.
/* MENU */
Les 3 premières lignes représentent les bords du cadre. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
La dernière ligne représente la couleur du fond. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
/* DESCRIPTION */
COLOR désigne la couleur du texte. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : calibri.
Le X désigne la taille de la police d'écriture.
/* TITRE DU BLOG */
Le premier COLOR désigne la couleur du titre alors que le deuxième COLOR désigne la couleur du fond du titre. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
Remplacer POLICE par la police d'écriture que vous souhaitez. Ex : Times New Roman.
Le X désigne la taille de la police d'écriture.
/* BARRE */
COLOR désigne la couleur de la barre en haut. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
Le X désigne la taille de la barre.
/* LIENS */
COLOR désigne la couleur de fond. Remplacer COLOR par le code couleur ou la couleur en anglais de votre choix.
Pour le reste des valeurs, vous pouvez les modifier comme vous souhaitez. Il faut juste chipoter pour que tout soit correct.
/* MENU */
#sidebarss{
border-left: solid 1px COLOR;
border-right: solid 1px COlOR;
border-bottom: solid 1px COLOR;
position: fixed;
top: 25px;
left: 60px;
padding-top: 2px;
width: 250px;
padding-bottom: 2px;
text-align: center;
border-radius: 0px 0px 500px 500px;
background: COLOR;
}
/* IMAGE */
#contentx img{
max-width: 250px;
text-align: center;
border-radius: 0px 0px 500px 500px;
}
/* DESCRIPTION */
#info{
display: block;
width: 230px;
padding: 10px;
margin-bottom: -10px;
text-align: center;
color: COLOR;
font-family: POLICE;
font-size: Xpx;
}
#info a{
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}
/* TITRE DU BLOG */
#title{
width: 240px;
padding: 5px;
text-align: center;
color: COLOR;
margin-top: -10px;
background-color: COLOR;
font-family: POLICE;
font-size: Xpx;
}
/* BARRE */
#linksbox{
display: inline-block;
width: 250px;
text-align: center;
background-color: COLOR;
height: Xpx;
}
/* LIENS */
#lb{
display: inline-block;
width: 250px;
margin-left: 45px;
}
#lb a{
text-decoration: none;
display: block;
float:left;
width: 30px;
height: 30px;
margin-right: 5px;
margin-top: 10px;
line-height: 30px;
padding: 2px;
text-align: center;
background-color: COLOR;
border-radius: 100px 100px 0px 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#lb a img{
margin-top: 3px;
}
#parceiros {
opacity: .99;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
#parceiros:hover a {
opacity: .50;
}
#parceiros a {
opacity: .80;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
#parceiros a:hover {
opacity: .99;
}Code à mettre dans la partie HTML.
Remplacer TEXTE par ce que vous voulez indiquer.
Remplacer NOM DU LIEN 1 par le nom de votre lien.
Remplacer LIEN 1 par l'url de votre lien.
Faites la même chose pour les 4 liens.
Remplacer TITRE par le titre de votre blog.
Remplacer URL DE L'IMAGE par l'url de votre image.
<div id="sidebarss">
<div id="linksbox"> </div>
<div id="info" style="text-align: center;">TEXTE</div>
<div id="lb">
<div id="parceiros" style="text-align: center;"><a title="NOM DU LIEN 1" href="LIEN 1"><img src="http://ekladata.com/QhfrsqQPpNCAHJod2GA109bVLzM.png" alt="" /></a> <a title="NOM DU LIEN 2" href="LIEN 2"><img style="margin-top: 7px;" src="http://ekladata.com/mNTVQhp1yD2s1SnZhiOra4ZeScM.png" alt="" /></a> <a title="NOM DU LIEN 3" href="LIEN 3"><img src="http://ekladata.com/e15pADqNenBiE29EBJ8li33m-AA.png" alt="" /></a> <a title="NOM DU LIEN 4" href="LIEN 4"><img src="http://ekladata.com/8xz_z3isTTRU0cAEC62gHWHT_q8.png" alt="" /></a></div>
</div>
<div id="title">TITRE</div>
<div id="contentx"><img src="URL DE L'IMAGE" alt="" /></div>
</div>
-
Commentaires
je te l'ai pris merci beaucoup!!! :)
-
Lundi 13 Février 2017 à 19:32
Pas de problème !
-
Lundi 13 Février 2017 à 19:35
Au fait! tu te souviens de Shiny (Just Love)? c'est moi, j'ai fait ce compte pour mes TPE est-ce que tu pourrais me donner ton avis vite fait sur mon blog?
-
Lundi 13 Février 2017 à 19:36
Oh oui je me souviens de toi ! Comment tu vas ? Je vais essayer de passer demain. :D
-
ahah ça va merci! et toi? ça fait hyppppper long :')
merci beaucoup!!! :D (le blog n'est pas fini mais c'est pas grave)
superbecode! Dommage que je ne sais pas bien l’iputiliser,même si tes explications sont très claires.Ce que j’ai fait sur mon blog est tout simplement une catastrophe
Les codes CSS ainsi sont difficiles à appliquer sur Eklablog. Peut-être que maintenant ce code ne fonctionne plus..
Bonjour, ce code est très utile! Mais je suis vraiment nulle en CSS et il n'y a absolument rien qui marche sur mon blog... j'aimerais bien le mettre, ce serais possible de me dire pourquoi le code ne marche pas?
Suivre le flux RSS des commentaires
Ajouter un commentaire
Purpel in the face
-
Bienvenue sur Purpel in the face ! Un blog créé et géré par Lockpine depuis 2014. Ce blog regroupe des heures passées sur Internet à faner. Aucun mot ne serait assez correct pour le décrire au vu de son existence douteuse. Mais je vous rassure, on est parfois normal ici.
-
23 ansBelgique
Etudes • Psychologie
League of Legends addict
Everyone you meet is fighting a battle you know nothing about. Be kind. Always.
Créer mon blog
Super tuto, enfin moi, je le trouve très compréhensible et accessible à tous. Je n'avais pas encore trouvé de tutoriel pour faire ce genre de menu... Maintenant c'est fait, merci Lockpine :)
De rien ! Je suis contente que ce soit compréhensible parce que c'est plutôt compliqué à expliquer et comprendre, surtout pour les personnes qui n'ont jamais fait de HTML et de CSS.
Je commence petit à petit à m'initier aux codes CSS et HTML... C'est grâce à des tutoriels comme les tiens que j'arrive à peu près à faire des trucs corrects sur des blogs test xD
Pour ma part, j'ai eu les bases à l'école. Evidemment, je suis loin de savoir tout faire mais je sais faire quelques petits trucs. OpenClassrooms est un site qui permet de comprendre beaucoup de choses. On nous le conseille souvent à l'école.
Vous avez une option "Informatique et codage" en Belgique ? Je vais jeter un petit coup d'oeil à ton site, en espérant que je comprenne mieux l'univers des codes CSS et HTML...
On a une option "Informatique". Nous avons programmation (L'année passée HTML, CSS, Python. Cette année, Java), informatique (Toute la théorie de l'informatique), système d'exploitation et logiciels (Utiliser Word, excel, etc) et multimédia (Images matricielles et vectorielles, retouche de photos, etc).