Rebonjour à tous pour
encore un nouveau problème ! Cette fois-ci, je bute sur une barre de navigation (
voir mes autres problèmes avec cette #!%* barre )
Fait étrange : Ma barre de navigation est très bien reliée à mon
css, et je lui ai mis une couleur, une largeur, une bordure... Mais quand il s'agit de modfier la hauteur, ça ne fonctionne plus ! Je peux modifier la police, la taille des caractères, les bords... Mais pas l'attribut
height
!
ce qui fait que je me retrouve avec une barre toute riquiqui !
Mon code html :
<span>
<ul style="display:inline">
<li><img class="logo" style="vertical-align:middle" src= "logolarge.png" alt="logo de Bar'ParKs"></li>
<li class="active"><a href="http://www.barparks.com/page_acceuil">- ACCEUIL -</a></li>
<li><a href="http://www.barparks.com/qui-nous_sommes">- QUI SOMMES-NOUS ? -</a></li>
<li><a href="http://www.barparks.com/commander">- COMMANDER -</a></li>
<li><a href="http://www.barparks.com/photos">- PHOTOS -</a></li>
<li><a href="http://www.barparks.com/commantaires">- COMMENTAIRES -</a></li>
<li><a href="http://www.barparks.com/contact">- CONTACT -</a></li>
</ul>
</span>
Et le css :
@font-face{
font-family: 'subway';
src: url('Subway-Black.eot');
src: url('Subway-Black.eot?#iefix') format('embedded-opentype'),
url('subway-black-webfont.woff') format('woff'),
url('Subway-Black.ttf') format('truetype'),
url('Subway-Black.svg#Subway-Black') format('svg');
}
body {
background-image: url(https://149359637.v2.pressablecdn.com/wp-content/uploads/2017/10/Not-Just-Another-Brick-on-the-Wall-Mural-MU1409-1-min.jpg);
}
h1 {
color: black;
margin-left: 20px;
font-family:subway, sans-serif;
}
ul {
display:table;
border: 1px solid #555;
margin: 10px;
padding: 10px;
width: 97%;
height: 200px;
background-color: #f1f1f1;
top: 100; left: 0;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}
li {
font-family: subway;
font-size: 1em;
height: 200%;
display: table-cell;
transition: padding .3s;
padding: 0px 8px 0px 8px;
}
li a {
display:table-cell;
text-align: center;
width: auto;
color: #000;
padding: 2px 8px 2px 8px;
text-decoration: none;
}
li.active {
display: table-cell;
background-color: #7CFC00;
color: white;
}
li:hover:not(.active) {
display: table-cell;
background-color: #555;
color: white;
padding: 0px 25px 0px 25px;
border: 1px solid #444;
}
.logo {
text-align: middle;
height: 70px;
width: 70px;
}
.banner {
position: fixed;
}
.texte_barre {
display:inline-block;
border: 1px solid #555;
list-style-type: none;
margin: 10px;
padding: 10px;
width: 97%;
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
top: 500px;
}
Je vous serai très reconnaissant de me répondre ! Merci d'avance !
