|
|||
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> 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; } } |
Sponsored Links |
|
|||
wozu brauchst du die überhaupt? wenn du einen Abstand haben willst verwende doch padding. Dann kannst du diese :before und :after Selektoren hier rausschmeißen, die werden hier überhaupt nicht gebraucht.
|
Stichwörter |
fixe größe, pseudoelemente, schrumpft |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
How To Use Structural Pseudo Classes and Pseudo Element Selectors | kadees | Ressourcen | 1 | 09.10.2011 10:14 |
How To Use Structural Pseudo Classes and Pseudo Element Selectors | kadees | CSS | 0 | 09.10.2011 02:44 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 20:04 |
Validator Fehler und komm nicht drauf... | letslounge | (X)HTML | 3 | 14.09.2006 21:07 |
Pseudo Element: after | Mssmar | CSS | 2 | 26.05.2006 00:01 |