Problèmes de positionnement de mon menu

Résolu/Fermé

Utilisateur anonyme - Modifié le 8 sept. 2019 à 19:07
Utilisateur anonyme - 9 sept. 2019 à 23:07

Bonjour, j'ai créer mon menu en HTML et CSS, je peux faire ce que je veux avec mais je n'arrive pas a le positionner a un endroit precis de ma page web. Quelqu'un peut m'aider svp? J'ai essayer beaucoup de solution mais le simple

position: relative; right: 0;

par exemple ne marche pas.

ps: j'ai mis 0, mais j'aimerais trouver une positon pour le positionner exactement a une endroit pas forcement 0.
voici le code de mon menu:

<div class='ribbon'>
    <a href='#'><span>Help</span></a>
    <a href='#'><span>Partenaires</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Credits</span></a>
</div>

<style>
  
    a
{
display: block ;
background: black ;
color: black ;
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:black;
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:green;
margin-top:0;
}

.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid black;
border-bottom:0.5em solid black;
}


.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid black;
border-bottom:0.5em solid black;
}




/* 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;
}


     header
     {
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 150px;
       background-color: black;
       z-index: 1;
     }
   </style>

A voir également:

Problèmes de positionnement de mon menu
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Activer bluetooth tv samsung menu caché ✓ - Forum TV & Vidéo

1 réponse

Réponse 1 / 1

tokitokai
Modifié le 9 sept. 2019 à 00:51

Salut,
et à quel endroit positionner? vous avez essayez avec des marges?
Votre balise de style est incomplète elle doit s'écrire comme ceci sinon ça ne fonctionnera pas:

<style type="text/css" rel="stylesheet">
...
</style>

N'oubliez pas de supprimer le float pour remettre le flux normal avec

clear:both;

.
Le positionnement en relatif prends en compte la position de l'élément précédent donc ça peut porter à confusion.

Utilisateur anonyme
Modifié le 9 sept. 2019 à 20:01

J'ai donc modifié la balise

<style>

<style type="text/css" rel="stylesheet">

Un. aucune difference
deux. je ne sais pas où mettre

 clear:both;

dans mon programme..
J'aimerais déplacer mon menu dans mon header tout en haut a droite.

tokitokai
Modifié le 9 sept. 2019 à 23:13

Bonsoir,
un peu compliqué toutes ces règles de positionnement... normal que vous vous y retrouvez pas.
Virez le flottant(tous les flottants) si c'est le conteneur que vous voulez positionner et par la même toutes les autres règles de positionnement qui se chevauchent sans donner le résultat voulu.
En flottant il va 'flotter par rapport aux autres éléments' et être hors du flux donc pas idéal pour ce que vous voulez faire.
clear:both se met après un élément en float pour assurer que les éléments suivants seront bien positionnés;

En gros prenez un grande inspiration, nettoyez tout positionnement et repartez sur de bonnes bases. Comme par exemple en les plaçant correctement déjà en HTML(le flux) et il n'y aura presque pas besoin de CSS pour placer où vous voulez.
Par exemple:

<header>
<h1 id="titreid">Titre</h1>
<div id='ribbon'></div>
</header>

header{
width:100%;
}
#titreid{
display:inline-block;
width:39%;
}
#ribbon{display:inline-block;
width:59%;
}

Bien sûr les div sont à éviter car ils ne veulent rien dire, vous avez les balises "nav", "section" + "article" qui remplacent avantageusement un div sans sémantique(donc référencé plutôt mal).

Ni HTML ni CSS ne sont de la programmation, ce sont des langages de balisages, plutôt équivalents à une liste de course ou une série de repères indiquant l'ordre et les paramètres à utiliser. La programmation c'est autre chose: logique mathématique et instructions qui doivent êtres traduites/nécessite un raitement par le processeur... pour résumer.

Utilisateur anonyme > tokitokai
9 sept. 2019 à 23:07

ok merci beaucoup ;) je regarde ca demain et je vous repond

Discussions similaires

les entrées et les sortées

menu caché

Comment retrouver le bouton menu de Tv Tcl

tests du greta

Déblocage du mode hôtel Philips 20HF5234/10