zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden pseudo Element kollabiert mit Bildschirmgröße

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.08.2019, 21:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
crane befindet sich auf einem aufstrebenden Ast
Standard 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;">&Uuml;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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2019, 21:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Versuche mal, deinen ::before und ::after zusätzlich eine 'min-width: 2em;' zu geben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.08.2019, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
fixe größe, pseudoelemente, schrumpft

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:33 Uhr.