pseudo Element kollabiert mit Bildschirmgröße
Hallo zusammen,
ich habe links und rechts von meiner Kopfleiste die pseudo Elemete :before und :after.
Wenn nun der Bildschirm oder das Fenster kleiner werden werden irgendwann auch mal diese pseudo Elemente kleiner, d.h. die breite nimmt ab.
Wie kann ich verhindern oder was muss ich einstellen damit dies nicht passiert.
Hier zu die beiden Codes:
HTML-Code:
<!doctype html>
<html>
<head>
<title>Andrea Zinser | CranioSacrale Körper- und Energiearbeit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css"">
</head>
<body>
<div id="header">
<div class="hinner">
<div id="logo" style="border: solid 1px;"><img src="logo.png" width="70px;" height="70px"><span style="color:blue;">Leonard
Schmidt</span></div>
<div id="nav"><label for="show-menu" class="show-menu" style="font-size:25pt;">☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul class="menuc">
<li class="hm1"><a href="#" style="color: yellow;">Über mich</a></li>
<li class="hm1"><a href="#">Konzept</a></li>
<li class="hm1"><a href="#">Methoden</a>
<ul class="hidden methoden">
<li class="spacing"></li>
<li ><a href="#">Hakomi</a></li>
<li id="menud"><a href="#">Chen Taiji </a></li>
<li id="menud"><a href="#">Qi Gong und Meditation</a></li>
</ul>
</li>
<li class="hm1"><a href="#">Termine</a>
<li class="hm1"><a href="#">Medien</a>
<ul class="hidden medien">
<li class="spacing"></li>
<li><a href="#">Bilder</a></li>
<li id="menud"><a href="#">Videos</a></li>
</ul>
</li>
<li class="hm1"><a href="#">Kontakt</a>
<ul class="hidden kontakt">
<li class="spacing"></li>
<li><a href="#">Kontakt</a></li>
<li id="menud"><a href="#">Impressum</a></li>
<li id="menud"><a href="#">Datenschutz</a></li>
<li id="menud"><a href="#">Links</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
und das CSS:
Code:
/*Strip the ul of padding and list styling im*/
*{
margin:0;
padding:0;
}
#header {
position:fixed;
top:0px;
left:0px;
height:75px;
width:100%;
overflow:hidden;
background-image: url('wald.png');
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#header::before, #header::after
{
display:inline;
width:2em;
height:75px;
content: '';
}
#header .hinner
{
width: 100%;
max-width: 1200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
webkit-box-align: center;
moz-box-align: center;
ms-flexbox-align: center;
webkit-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#logo
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
webkit-box-align: center;
moz-box-align: center;
ms-flexbox-align: center;
webkit-flex-align: center;
align-items: center;
position: relative;
z-index: 1;
}
#nav
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
z-index: 1;
}
li
{
list-style-type:none;
float:left;
}
li a {
display: block;
float:block;
height: 50px;
width: 100px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
li:hover a {
background: rgba(255, 255, 255, 0.3);
}
/*Style for dropdown links im*/
li:hover ul a {
width:170px;
height: 50px;
z-index: 1;
text-align: left;
padding: 0 10px;
color: #000000;
background: #ffffff;
}
/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
color: #000000;
background: #f2f2f2;
}
/*Hide dropdown links until they are needed im*/
li ul {
position:absolute;
display: none;
}
li ul li {
display: block;
float: none;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
position:fixed;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
width: 50px;
height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #ffffff;
text-align: center;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
display: block;
}
.spacing
{
height:12.5px;
background-color: transparent;
}
/*Responsive Styles*/
@media only screen and (max-width : 979px){
/*Make dropdown links appear inline*/
ul {
position:fixed;
top: 75px;
z-index: 1;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 0px;
margin-left:-50px;
top:75px;
}
li a
{
background: #ffffff;
color: #000000;
}
/*Hover state for top level links im*/
li:hover a {
background: #f2f2f2;
}
/*Style for dropdown links im*/
li:hover ul a {
background: #ffffff;
}
/*Make all menu links full width*/
ul li, li a {
float: none;
}
.hidden
{
position:relative;
top:0;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
position:absolute;
}
ul.methoden
{
top:100px !important;
right:100px;
}
ul.medien
{
top: 200px !important;
right:100px;
}
ul.kontakt
{
top: 250px !important;
right:100px;
}
.spacing
{
height:0px !important;
background-color: transparent;
}
}
Vielen lieben Dank |
