Estou fazendo um html com uma figura com opacity de 0.3, e gostaria de colocar uma lista horizontal em cima dessa figura. Usei o display: inline-block mas não funcionou.
Eis o html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>GEREM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="titulo-principal">
<h1>texto</h1>
</header>
<img id="banner" src="WDWB7772.jpg">
<h2>texto</h2>
<p class="gerente">texto</p>
<ul class="ramais">
<li class="ramalger">texto</li>
<li class="ramalger">texto</li>
<li class="ramalger">texto</li>
<li class="ramalger">texto</li>
<li class="ramalger">texto</li>
</ul>
</body>
</html>Eis o CSS:
.titulo-principal {
padding-left: 30px;
}
#banner {
width: 80%;
opacity: 0.3;
display: block;
margin-left: auto;
margin-right: auto;
}
.gerente {
font-style: italic
}
.ramais {
width: 1200px;
margin: 0 auto;
padding: 50px;
}
.ramais li {
top: 100px;
display: inline-block;
text-align: center;
width: 15%;
vertical-align: top;
margin:0 1.5%;
background: gray;
margin-top: 10px;
padding: 10px 15px;
box-sizing: border-box;
}
.ramalger {
font-family: "Helvetica";
font-style: oblique;
position: absolute;
}
p{
text-align: center
}