26546 sujets

CSS et mise en forme, CSS3

Bonjour je souhaite une navbar fixée en haute de page cependant je rencontre un souci, les autres éléments passe sous cette même navbar.

Comment je peux faire pour que la galerie d'image reste en bas de la nav sans passer dessous ?

(Si un post demande déjà la même chose mettez juste le lien et pour le php je l'exporterais plus tard du html)

Voici le code

<!--Tryno 2018-->
<!--V 1.0-->
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
    <nav>
        <ul>
            <li><a>With Uniform</a></li>
            <li><a>Other cloths</a></li>
        </ul>
    </nav>
    <div class="view">
    <?php
    
    try
    {
       $bdd = new PDO('mysql:host=127.0.0.1; dbname=hk416; charset=utf8', 'root', ''); 
    }
    catch (Exception $e)
    {
        die('Erreur : ' . $e -> getMessage());
    }
    
    $answers = $bdd -> query('SELECT Name,Artist,Link FROM pictures');
    ?>
    
    <?php
    while ($data = $answers -> fetch())
    {
      ?>
    <div class="gallery">
        <a target="_blank" href="<?php echo $data['Link']; ?>">
            <img src="<?php echo $data['Link']; ?>" width="300" height="200">
        </a>
        <div class="desc"><h2> <?php echo $data['Name']; ?></h2><br>
            <p>Artist: <?php echo $data['Artist']; ?></p></div>
    </div>
    <?php
    }
    $answers -> closeCursor();
    ?>
    </div>   
</body>
</html>


[body{
    margin: 0;
}
div.gallery {
  display: inline-block;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: 16%;
}

div.desc {
  padding: 15px;
  text-align: center;
}

div.view{
    float: left;
}

nav{
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
}

nav ul {

  list-style-type: none;
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
  background-color: #5d507b;
}

nav ul li{
    display: inline;
}

nav ul li a{
    float: left;
    display: block;
    list-style-type: none;
    margin: 5px;
    padding: 5px;
    color: white;
    
}



Modifié par Tryno (08 Jan 2019 - 10:44)
Bonjour,

Si tu bloques tes images en dessous de la nav, comment l'utilisateur va-t-il pouvoir voir le bas de page ?

Il ne pourra jamais voir ce contenu ou bien j'ai raté quelque chose ?

Amicalement,
Quand tu as une navbar fixe, je te conseille d'ajouter à ta balise body un margin-top correspondant à la hauteur de ta nav bar. Ton contenu démarrera de ce fait toujours sous ta navbar.
Meilleure solution