Problèmes de positionnement de mon menu

Messages postés
16
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
9 septembre 2019
-
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>

Je vous remercie de votre réponse la plus rapide, 
Lermie12 
Afficher la suite 

1 réponse

Meilleure réponse
1
Merci
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.

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 60288 internautes nous ont dit merci ce mois-ci

lermie12
Messages postés
16
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
9 septembre 2019
-
J'ai donc modifié la balise
<style>
en
<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.
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.
lermie12
Messages postés
16
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
9 septembre 2019
> tokitokai -
ok merci beaucoup ;) je regarde ca demain et je vous repond
Commenter la réponse de tokitokai