zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menu Button läßt sich nicht fixen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.04.2016, 21:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard Menu Button läßt sich nicht fixen

Hallo zusammen!

Vielleicht kann mir ja jemand einen Tipp geben. Ich bastel gerade an einer Seite, die einen fixierten Header haben soll. Soweit so gut.
Mein Problem ist der Menubutton. Da er nicht im Header liegt, scrollt er immer mit dem Seiteninhalt mit.

Wenn ich ihn auf "fixed" setze, wandert er ganz nach links (wo er nicht hin soll). Bei "absolute" ist er zwar in der richtigen Position, läßt sich aber nicht mehr klicken.

Wenn ich ihn innerhalb des Headers platziere, habe ich das gleiche Problem wie bei "position: absolute".

Vielleicht kann mir ja jemand aufs Pferd helfen.

Lieben Dank.

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<script src="js/respond.min.js"></script>
<style type="text/css">


* { padding: 0; margin: 0;}

body { 
	font-family: sans-serif;
	background: rgba(237,237,237,1);
background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,1)), color-stop(23%, rgba(240,240,240,1)), color-stop(82%, rgba(254,254,254,1)), color-stop(100%, rgba(254,254,254,1)));
background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%);
background: -o-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%);
background: linear-gradient(to bottom, rgba(237,237,237,1) 0%, rgba(240,240,240,1) 23%, rgba(254,254,254,1) 82%, rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#fefefe', GradientType=0 );
background-size:100% 100%;
background-attachment:fixed;
}

a { text-decoration: none; color: #88A5CC;}

li { list-style-type:none;}

h1 {
	text-align:left;
	font-size:24px;
	font-weight: 200;
	margin-bottom:30px;
	color:#333;	
}

h2 {
	text-align:center;
	font-size:17px;
	font-weight: 200;
	margin-bottom:10px;
	color:#666;	
}

p{
	text-align:justify;
	font-size:16px;
	font-weight: 300;
	line-height:24px;
	margin-bottom:24px;
	color:#333;	
}

header {
	width:100%;
	height: 170px;
	position:fixed;
	margin: 0 auto;
	padding-top:5px;
	background:#fff;
	border-bottom:1px solid #EEE;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
	z-index:100;
}

#brand{
	float: left;
	width:50%;
	margin-left:25%;
	line-height:170px;
	color:E5DAC0;
	font-size:25px;
	font-weight:bolder;
}

nav {width: 100%; text-align: center;}

nav a { 
	display:block; 
	padding:15px 0;
	border-bottom: 1px solid #fff;
	color:#fff;
}

nav li:last-child a {border-bottom: none;}

nav a:hover {
	background: url(img/black.png); 
	color: C5AD74;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.3);
}

/*--------------------------------------------*/


.menu {
	width:200px;
	margin-top:250px;
	height:auto;
	position: absolute;
	z-index: 998;
	background: url(img/black.png);
	left:-210px;
	transition: all  .6s ease-in-out;
	-webkit-transition: all  .6s ease-in-out;
	-moz-transition: all  .6s ease-in-out;
	-ms-transition: all  .6s ease-in-out;
	-o-transition: all  .6s ease-in-out;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	border-right:2px solid #fff;
	border-bottom-right-radius: 10px;
	border-top-right-radius:10px;
	-webkit-box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 5px 3px 5px -1px rgba(0,0,0,0.5);
}


.menu-icon {
	padding: 10px 20px;
	background:url(img/black.png);
	color:#fff;
	cursor: pointer;
	float: right;
	position:relative;
	z-index:999;
	margin-top: 30px;
	margin-right:40px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
}

.menu-icon:hover {
	background:#2E2E2E;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.8);
}

#menuToggle{display:none;}

#menuToggle:checked ~ .menu {position: absolute; left: 0;}


main {
	width: 50%;
	height:100%;
	margin:0 20%;
	padding:0;
	background: none;
	float:left;
	color:#fff;
	clear:both;
	border-radius: 0;
	border: none; 
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

section{
	width: 100%;
	margin:0 0 50px 0;
	padding:0;
}

.bild {
	width:100%;
	margin:0 0 20px 0;
	opacity: 1.0;
	border-radius: 10px;
	border:2px solid #fff;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
}

#column {
	width:100%;
	float:left;
	min-height:120px;
	padding:20px;
	background:url(img/bg_column.fw.png) no-repeat;
	background-size: cover;
}

#column1{
	width:30%;
	height:100%;
	margin:50px 5% 50px 0;
	float:left;	
	border-radius: 10px;
	border:2px solid #fff;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
}

#column2{
	width:30%;
	height:100%;
	margin:50px 0 50px 0;
	float:left;	
	border-radius: 10px;
	border:2px solid #fff;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
}

#column3{
	width:30%;
	height:100%;
	margin:50px 0 50px 0;
	float:right;	
	border-radius: 10px;
	border:2px solid #fff;
	-webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.5);
}


</style>

</head>

<body>

<header>
	<div id="brand"><img src="img/logo.png" width="100%"></div>
</header>

<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰ Menu</label>

<nav class="menu">
	<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">about</a></li>
		<li><a href="#">work</a></li>
		<li><a href="#">impressum</a></li>
		<li><a href="#">contact</a></li>
	</ul>
</nav>

<main>
	
	<section>
	<img class="bild" src="img/2-2.jpg">
	<h1>Herzlich willkommen bei Houllich's Entrümplungsdienst</h1>
    
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est </p>
  	</section>

	<section>
    	<div id="column">
        
    	<div id="column1">
        <h2>Wohnungsauflösung</h2>
        <img src="img/fotolia_98092901.png" width="100%"> </div>
        
        <div id="column2">
        <h2>Entrümplung</h2>
        <img src="img/fotolia_98092901.png" width="100%"> </div>
        
        <div id="column3">
        <h2>Umzüge</h2>
        <img src="img/fotolia_21261513.png" width="100%"> </div>
        </div>
	</section>
</main>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.04.2016, 13:10
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von leverkusenerjung Beitrag anzeigen
Wenn ich ihn auf "fixed" setze, wandert er ganz nach links (wo er nicht hin soll). Bei "absolute" ist er zwar in der richtigen Position, läßt sich aber nicht mehr klicken.

Wenn ich ihn innerhalb des Headers platziere, habe ich das gleiche Problem wie bei "position: absolute".
Das kann ich nicht nachvollziehen. Das label Element läßt sich wunderbar klicken, wenn es im header Element platziert wird. Vielleicht musst du nur den Selektor für das click-Event den du benutzt anpassen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2016, 17:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Vielleicht musst du nur den Selektor für das click-Event den du benutzt anpassen?

Danke erst mal für deinen Kommentar. Hättest Du es vielleicht bitte ein wenig detaillierter? Ich komm nämlich nicht wirklich weiter mit deiner Antwort.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2016, 18:50
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von leverkusenerjung Beitrag anzeigen
Danke erst mal für deinen Kommentar. Hättest Du es vielleicht bitte ein wenig detaillierter? Ich komm nämlich nicht wirklich weiter mit deiner Antwort.
Woran merkst du denn, dass der Button sich nicht mehr klicken läßt?
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2016, 19:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Woran merkst du denn, dass der Button sich nicht mehr klicken läßt?

...daran, dass das .menu nicht auf den Bildschirm slided.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2016, 19:12
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von leverkusenerjung Beitrag anzeigen
...daran, dass das .menu nicht auf den Bildschirm slided.
(erste Antwort gelöscht - ich hab's verstanden)

Nachtrag: Ich hatte heute morgen nur den klick Event überprüft und nicht gesehen, dass da noch ein CSS "Event" eingebaut war, da er ja nicht funktioniert (Deine Fehlerbeschreibung ist nicht sonderlich hilfreich für jemanden der nicht neben dir sitzt und weiss wovon du sprichst).

damit der Event funktioniert muss du das Menu auch in den header einbauen.

Geändert von protonenbeschleuniger (04.04.2016 um 19:36 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 04.04.2016, 19:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2010
Beiträge: 19
leverkusenerjung befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Deine Fehlerbeschreibung ist nicht sonderlich hilfreich für jemanden der nicht neben dir sitzt und weiss wovon du sprichst).
Ich kenne das Problem. Meine Frau beschwert sich auch immer, dass ich so scheisse im Erklären bin.

Danke. Ich probier das mal aus mit dem Menu.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.04.2016, 22:13
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Ein wenig OffTopic:

Warum viele für das Verstecken / Zeigen der Navigation extra zwei „frei schwimmenden“ Elementen nehmen, ist mir nicht bekannt – vielleicht mögen manche einfach Hacks nutzen (Advanced Checkbox Hack).
Eine nutzerfreundliche Navigation könnte (sollte) ein titel-Attribut oder eine Überschrift haben.
https://www.w3.org/wiki/HTML/Elements/nav
Semantic navigation with the nav element | HTML5 Doctor

Bei einer Überschrift hat man auch gleich das „extra“ Element, was zu einem Button umgestylt werden kann.
Möglich wäre dann so ziemlich alles: pure CSS-Nav, JavaScript Effekte, Buttons Gestaltung mit Hintergrundgrafiken oder rein mit CSS gebastelte Icons, etc.
Kleines Beispiel (nur die Grundfunktionen) :

tests.emil-webdesign.net/ResponsiveNav/

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

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
Problem mit PullDown Menu auf ipad/iphone smisonline2 CSS 1 13.05.2013 18:13
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
Drop Down Menu Positionsproblem Schky CSS 4 21.04.2008 14:09
Problem mit vertikaler Navigation Krissie CSS 0 15.08.2007 13:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:30 Uhr.