Hello !
Je travaille actuellement sur un panel pour m’améliorai au niveau du HTML/CSS mais je bloque.
Donc je souhaiterai mettre des images a gauche de mon menu mais le soucis ce que je ne sais pas comment faire.
PS : Les images sont en bas de mon menu.
Codes :
Index.php
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Panel d'administration</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="barre">
Core-Panel
<ul id="profil">
<li><a href="#" src="">Profil</a></li>
</div>
<div id="menu">
<ul id="navigation">
<li><a href="#" src="">Tableau de Bord</a></li>
<li><a src="images/user.png" href="#" >Liste des membres</a></li>
<li><a href="#" src="">Catégorie</a></li>
<li><a href="#" src="">Maintenance</a></li>
<li><a href="#" src="">News</a></li>
</ul>
<img src="images/user.png">
<img src="images/setting.png">
<img src="images/tableaudebord.png">
<img src="images/categorie.png">
<img src="images/news.png"></div>
<div id="element">
</div>
</body>
</html>
style.css
body{
background-color: #CEE3F6;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
div#barre{
float: bottom;
width: left right;
height: 50px;
background-color:#000000;
border-bottom: 3px solid #6c0606;
opacity: 0.9;
}
div#menu{
float:left;
width:200px;
height:600px;
background-color:#000000;
opacity: 0.9;
}
#navigation {
width: 200px;
margin: 0;
padding: 2px;
}
#navigation li {
color: #fff ;
}
#navigation li a {
display: block ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 40px ;
text-align: center ;
text-decoration: none ;
padding: 4px 0 ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background: #151515 ;
text-decoration: underline ;
}
Yogame