Comment déplacer mon menu en CSS/HTML ?
Résolu
Maxime_Swen
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
<ital>Bonjour,
J'ai créé mon menu en html/css mais je n'arrive pas à le déplacer (en haut à droite). Quelqu'un sait ?</ital>
Code HTML:
Code CSS:
J'ai créé mon menu en html/css mais je n'arrive pas à le déplacer (en haut à droite). Quelqu'un sait ?</ital>
Code HTML:
<div class='ribbon'> <a href='#'><span>-</span></a> <a href='#'><span>Nous trouver</span></a> <a href='#'><span>Services</span></a> <a href='#'><span>Contact</span></a> </div>
Code CSS:
a { display: block ; background: #FEFEFE ; color: #FEFEFE ; font: 1em "font-weight sans-cherif",Arial,sans-serif ; line-height: 1em ; text-align: center ; text-decoration: none ; padding: 4px 0 ; list-style-image : none; } - .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #FEFEFE; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:#848484; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon span { background:#FEFEFE; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#8A0808; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #FEFEFE; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #FEFEFE; border-bottom:0.5em solid #fff; } /* Effect 15: scale down, reveal */ .cl-effect-15 a { color: rgba(0,0,0,0.2); font-weight: 700; text-shadow: none; } .cl-effect-15 a::before { color: #fff; content: attr(data-hover); position: absolute; transition: transform 0.3s, opacity 0.3s; } .cl-effect-15 a:hover::before, .cl-effect-15 a:focus::before { transform: scale(0.9); opacity: 0; } font-weight: 100
A voir également:
- Menu html css
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide