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
Modifié par Tryno (08 Jan 2019 - 10:44)
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)
