web-dev-qa-db-fra.com

La barre de navigation supérieure chevauche le contenu principal

Je suis en train de convertir ma page de destination de Bootstrap à Semantic-UI. La page a une position fixe en haut de la barre de navigation. Le contenu principal est divisé en deux colonnes (3-cols et 9-cols). La colonne de gauche est utilisée pour afficher une barre latérale et la colonne de droite est utilisée pour le contenu actuel.

J'ai essayé de copier et coller la page de démonstration de Semantic-UI. La barre de navigation a une hauteur de 45px. J'ai remarqué que les premiers 45 pixels du contenu principal se chevauchent.

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>

<div id="navbar" class="ui fixed inverted main menu">
  <div class="container">
    <div class="title item">
      <b>Dashboard</b>
    </div>
  </div>
</div>

<div id="maincontent" class="ui bottom attached segment pushable">
    
  <div id="sidebar" class="ui visible left vertical sidebar menu">
    <a class="item">First Item</a>
    <a class="item">Second Item</a>
    <a class="item">Third Item</a>
    <a class="item">Fourth Item</a>
    <a class="item">Fifth Item</a>
  </div>
    
  <div id="content" class="pusher">
    <div class="ui basic segment">
      <h3 class="ui header">Application Content</h3>
      <p>First paragraph...</p>
      <p>Second paragraph...</p>
      <p>Third paragraph...</p>
    </div>
  </div>

</div>

Ma solution actuelle consiste à ajouter un espace réservé de 45px haut après la barre de navigation.

<div style="height:45px"></div>

Je suis sûr que de bons noms de style css peuvent corriger le chevauchement du contenu. 

htmlcssgrid-layoutsemantic-ui
13
stanleyxu2005

La solution est beaucoup plus simple. Il vous suffit d'ajouter un remplissage à votre conteneur principal:

<div id="navbar" class="ui fixed inverted main menu">
 <!-- header content here -->
</div>
<div id="content" class="ui container">
 <!-- main content here -->   
</div>

Et ajoutez dans votre CSS:

.ui#content{
  // padding should be the same as header height
  padding-top: 55px;
}
6
Ronen

Vous devez envelopper le contenu de votre page dans la classe de grille:

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>

<div id="navbar" class="ui fixed inverted main menu">
 <div class="container">
    <div class="title item">
      <b>Dashboard</b>
    </div>
  </div>
</div>
<div class="ui grid">
    <div class="row">
         <div class="column">
            <div id="maincontent" class="ui bottom attached segment pushable">
                  <div id="sidebar" class="ui visible left vertical sidebar menu">
                    <a class="item">First Item</a>
                    <a class="item">Second Item</a>
                    <a class="item">Third Item</a>
                    <a class="item">Fourth Item</a>
                    <a class="item">Fifth Item</a>
                  </div>
                  <div id="content" class="pusher">
                    <div class="ui basic segment">
                      <h3 class="ui header">Application Content</h3>
                      <p>First paragraph...</p>
                      <p>Second paragraph...</p>
                      <p>Third paragraph...</p>
                    </div>
                  </div>
            </div>
         </div>
    </div>
</div>

2
niba

Ce que vous pouvez faire est de définir une hauteur sur la div de contenu, puis de définir le débordement: scroll. De cette façon, tout contenu long défilera dans la div et il ne remontera pas la page et sous la barre de navigation.

1
I_Khanage