Header fixieren

saschafiedler

Hallo.

Ich versuche gerade ein Theme nach meinen Vorstellungen anzupassen. Einige Sachen konnte ich schon ändern, andere noch nicht.
Eben wollte ich den Header fixieren, was mir auch für die Startseite ganz gut gelang. Leider funktioniert das nicht ganz so flüssig mit den anderen Seiten. Dort wird der Inhalt entweder verdeckt, ohne das man scrollt, oder die Überschriften und Suchfelder scrollen 'über' den Header hinweg, anstatt 'darunter'.

Könnt ihr mir sagen, wo da das Problem liegt? Ich habe euch mal den extrem gekürzten Stylesheet eingefügt und hier zum Download (An den Post anghängen ging nicht...), mein Problemkind da ich mich mit CSS noch nicht besonders gut auskenne... ;) Achja, der rotmarkierte Teil beim Header, den habe ich eingefügt, damit der Header fixiert ist...

Code

h1 {
	float: left;
	font-size: 1.8em; /* 18px */
	line-height: 60px;
	text-transform: uppercase;
}


	h1 a {
		font-size: 1.0em;
	}


h2 {
	font-size: 1.8em;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 -18px;
	padding: 0 0 33px;
}


h3 {
	font-family: "Georgia", "Times New Roman", serif;
	font-size: 2.2em;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 -18px;
	padding: 0 0 33px;
}


h4 {
	font-size: 1.2em;
}


h5 {
}


h6 {
}


p {
	font-size: 1.2em;
	line-height: 1.5;
	margin: 18px 0;
}


/* Top Area */


.top-area {
	width: 100%;
}


/* Header Styling */


.header_wrapper {
	height: auto;
	width: 100%;
	[COLOR="Red"]position: fixed;[/COLOR]
}


	.header {
		height: auto;
		min-height: 60px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
		width: 920px;
	}
	
		.header .hidden-title {
			left: -10000px;
			position: absolute;
			top: -10000px;
		}
		
		.header .logo {
			float: left;
			height: auto;
			max-height: 100px;
			width: auto;
		}


.header .menu ul {
	left: 340px;
	list-style-type: none;
	margin-top: 20px;
	position: absolute;
}


	.header .menu li {
		float: left;
		font-weight: 900;
		padding: 0 30px 0 0px;
		position: relative;
		text-transform: uppercase;
	}
	
		.header .menu li ul {
			display: none;
			left: -15px;
			padding: 25px 0 0;
			position: absolute;
			top: -5px;
			width: 150px;
		}
		
			.header .menu li ul li {
				padding: 10px 15px;
				width: 120px;
			}
		
		.header .menu li:hover ul {
			display: block;
		}
/* Home Styling */


.showcase-nav {
	display: none;
	list-style-type: none;
	margin: 0 auto;
	padding: 40px 20px 0;
	text-align: center;
	width: 920px;
}


	.showcase-nav li {
		display: inline;
		margin: 0 -10px 0 0;
		text-align: center;
		padding: 15px 7px 8px 7px;
	}
	
		.showcase-nav a {
			display: inline-block;
			height: 15px;
			width: 15px;
			-moz-transition: none;
			-o-transition: none;
			-webkit-transition: none;
			transition: none;
		}
		
		.showcase-nav a.active-item {
			cursor: default;
		}


.showcase {
	margin: 0 auto;
	padding: 40px 20px;
	width: 920px;
}


	.showcase li {
		list-style-type: none;
	}


	.showcase .showcase-item {
		display: none;
	}
	
		.showcase .first-item {
			display: block;
		}


	.item-device {
		float: left;
		width: 280px;
	}
		
		.device-media {
			cursor: pointer;
			-moz-border-radius: 1px;
			-o-border-radius: 1px;
			-webkit-border-radius: 1px;
			border-radius: 1px;
			-moz-transition: all .2s ease;
			-o-transition: all .2s ease;
			-webkit-transition: all .2s ease;
			transition: all .2s ease;
		}
		
		.device-media:hover {
			opacity: .8;
		}
/* Contact Styling */


.contact-wrapper {
	width: 100%;
}
		
.contact-form {
	margin: 0 auto;
	padding: 12px 20px;
	width: 920px;
}


	.contact-form p {
		font-weight: 900;
	}


	.contact-inputs {
		float: left;
		margin-bottom: -20px;
		width: 280px;
	}
				
		.contact-inputs p {
			margin: 12px 0 20px 0;
			padding: 10px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
		}
		
			.contact-inputs input {
				border: 0;
				font-size: 1.0em;
				width: 100%;
			}
			
		.contact-textarea {
			float: right;
			width: 600px;
		}
			
			.contact-textarea p {
				margin: 12px 0 12px;
				padding: 10px;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
			}
		
				.contact-textarea textarea {
					border: 0;
					font-size: 1.0em;
					height: 147px;
					resize: none;
					width: 100%;
				}
			
			.contact-form .wpcf7-submit {
				background-color: transparent;
				border: 0;
				cursor: pointer;
				float: right;
				font-size: 1.5em;
				margin: 0;
				padding: 0;
				-moz-transition: all .2s ease;
				-o-transition: all .2s ease;
				-webkit-transition: all .2s ease;
				transition: all .2s ease;
			}
				
	.contact-form .wpcf7-response-output {
		border: 0;
		float: right;
		font-size: 1.2em;
		font-weight: 900;
		margin: 0;
		padding: 0 0 30px 5px;
	}
	
	.contact-form span.wpcf7-not-valid-tip {
		background: none;
		border: 0;
		float: right;
		left: 0px;
		margin-top: -22px;
		position: relative;
		top: 0;
		width: auto;
	}


/* Blog Styling */


	/* Action Bar */
	
	.action-bar-wrapper {
		margin-bottom: -1px;
	}
	
	.action-bar {
		height: 60px;
		margin: 0 auto;
		padding: 30px 20px;
		position: relative;
		width: 920px;
	}
	
		.action-bar h2 {
			line-height: 60px;
			padding: 0;
		}
		
		.searchform {
			margin: -54px 0 0 320px;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
		
			.searchform form {
				display: block;
				padding: 3px 10px;
				position: relative;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
			}
		
			.searchfield {
				border: 0;
				border-radius: 5px;
				display: block;
				padding: 7px 0;
				width: 100%;
			}
			
			.searchsubmit {
				border: 0;
				cursor: pointer;
				height: 18px;
				position: absolute;
				right: 10px;
				top: 11px;
				width: 17px;
			}
			
	.action-bar a {
		float: right;
		font-weight: 900;
		margin-top: -30px;
	}		
/* Contact Styling */
			
	.contact-form {
		margin: 0 auto;
		padding: 12px 5%;
		width: 90%;
	}
	
		.contact-form p {
			margin-bottom: 32px;
		}
	
		.contact-inputs {
			float: none;
			margin-bottom: 0;
			width: 100%;
		}
					
			.contact-inputs p {
				margin: 12px 0 20px 0;
				padding: 10px;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
			}
				
			.contact-textarea {
				float: none;
				width: 100%;
			}
				
				.contact-form .wpcf7-submit {
					margin: 5px 0 0;
				}
					
		.contact-form .wpcf7-response-output {
			padding: 20px 0 20px 5px;
		}
/* Action Bar */
	
	.action-bar-wrapper {
		margin-bottom: -1px;
	}
	
	.action-bar {
		height: 60px;
		margin: 0 auto;
		padding: 30px 5% 20px;
		position: relative;
		width: 90%;
	}
	
		.action-bar h2 {
			display: none;
			line-height: 60px;
			padding: 0;
		}
		
		.searchform {
			margin: 0;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			width: 100%;
		}
		
			.searchform form {
				display: block;
				padding: 3px 10px;
				position: relative;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
			}
		
			.searchfield {
				border: 0;
				border-radius: 5px;
				display: block;
				padding: 7px 0;
				width: 100%;
			}
			
			.searchsubmit {
				border: 0;
				cursor: pointer;
				height: 18px;
				position: absolute;
				right: 10px;
				top: 11px;
				width: 17px;
			}


	.blog-post {
		margin: 0;
		padding: 20px 5%;
		width: 90%;
	}
	
		.post-info {
			float: none;
			padding: 20px 0 0;
			width: 100%;
		}
	
		.post-content {
			float: none;
			padding: 30px 0 0;
			width: 100%;
		}

Alles anzeigen

Ich bin für jede Hilfe sehr dankbar.

Sascha

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header fixieren

Jetzt mitmachen!