Hallo!
Ich brauche mal Hilfe von euch.
Und zwar bin ich gerade dabei mir eine eigene Website zu Coden oder wie ihr Profis es auch nennt.^^
Nun will ich 3 Elemente die Transparent sind auf die Seite setzen. Dabei soll das mittige Element breiter als rechts und links sein. Nur will das irgendwie nicht so wie ich mir denke...
Hier einmal die Codes:
index.html:
HTML
<!doctype html>
<html lang='de'>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>AlpakaDavid | Homepage</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Startseite</a></li>
<li><a href='galerie.html'>Galerie</a></li>
<li><a href='news.html'>News</a></li>
<li><a href='kontakt.html'>Kontakt</a></li>
</ul>
</div>
<div style="display: flex;align-content: center;justify-content: space-around;">
<div id="LBox" class="Zentriert">LBox</div>
<div id="MBox" class="Zentriert">MBox</div>
<div id="RBox" class="Zentriert">RBox</div>
</div>
</body>
<html>style.css:
Code
body {
background:url(Images/background.jpg) no-repeat;
background-size:100% auto;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: flex;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
align-items: center;
justify-content: center;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
position:absolute;
left: 35%;
right: 35%;
border: 6px solid #424242;
border-radius: 50px;
font-family: 'Oswald', sans-serif;
background: white;
box-shadow: 1px 1px 0 #424242, 2px 2px 0 #424242, 3px 3px 3px rgba(0, 0, 0, 0.35);
}
#cssmenu > ul > li > a {
padding: 20px 25px;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #424242;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
width:99%;
margin:auto
}
.Zentriert {
line-height: 200px;
}
#LBox {
background: rgb(0, 0, 0);
opacity: 0.3;
width: 20%;
}Ansonsten schon mal danke im voraus.
