Hé j'ai une petite barre de navigation qui est divisée en 2 sections: section gauche et section droite. La section de gauche contient une icône de flèche et la section de droite doit contenir 2 icônes: enveloppe et triangle d'exclamation. J'ai essayé de positionner la section droite dans le coin droit de la barre de navigation (qui est une div). jusqu'à présent pas de succès, j'ajoute le code ci-dessous:

.arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
        position: absolute;
        float:right;
        margin:0px;
        padding:0px;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>
0
Brk 6 mars 2016 à 14:16

5 réponses

Meilleure réponse

Supprimer l'élément de style de positionnement absolu de l'ID #upper_right_menu

.arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
        float:right;
        margin:0px;
        padding:0px;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>
1
Farrukh Faizy 6 mars 2016 à 11:22

Essayez de poursuivre la solution display:table;

.arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:table;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>
0
Peter Wilson 6 mars 2016 à 11:56

C'est ma solution

#upper_right_menu{
    position: absolute;
    top: 0px;
    right: 0px;
}
0
Ibrahim Khan 6 mars 2016 à 14:50

Vous pouvez utiliser les boîtes flexibles CSS et simplement supprimer les { {X0}} depuis votre barre de navigation .upper_menu

Voir cette démo en direct

.arrow {
  color: gray;
  font: bold 11px "Helvetica";
  padding: 2px;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
nav{
}
.arrow:after {
  background: gray;
  color: #FFF;
  content: ">";
  display: inline-block;
  font: bold 11px "Georgia";
  height: 25px;
  line-height: 25px;
  margin-left: 2px;
  text-align: center;
  width: 25px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.upper_menu {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #F2F6F7;
  width: 100%;
  height: 20%;
}

#upper_right_menu {
  margin: 0px;
  padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="upper_menu">
    <div id="upper_left_menu">
      <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
      <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
      <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>
1
elreeda 6 mars 2016 à 11:24

Il suffit de modifier:

#upper_right_menu{
    position: absolute;
    float:right;
    margin:0px;
    padding:0px;
}

À

#upper_right_menu{
    position: absolute;
    right: 0;
    top: 0;
}
1
SIMDD 6 mars 2016 à 12:00