Brauche nochmal dringend Hilfe
Ich muss den CSS Code kommentieren was was macht, aber ich weiß nicht wie ich hier erlären soll was das Position: relative macht. Und was das vh bei höhe definiert weiß ich auch nicht so ganz.
Brauche nochmal dringend Hilfe
Ich muss den CSS Code kommentieren was was macht, aber ich weiß nicht wie ich hier erlären soll was das Position: relative macht. Und was das vh bei höhe definiert weiß ich auch nicht so ganz.
Vielen Dank!!
Bei codepen ist es bei mir auch nicht so
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"/>
<title>Schreinerei Brettner | Startseite</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
</head>
<body>
<div class="header">
<img class="logo" src="logo.png">
<img id="togg" src="icon.png">
<ul id="menu"><span id="X">X</span>
<li><a class="active" href="index2.html">Startseite</a></li>
<li><a href="ueberUns.html">Über uns</a></li>
<li><a href="Leistungen.html">Leistungen</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</div>
<footer>
<span class="footer"> <a class="copyright">©</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a> <a class="impressum" href="impressum.html">Impressum</a> </span>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('#togg').click(function(){
$('#menu').fadeIn()
});
$('#X').click(function(){
$('#menu').fadeOut();
})
$('#X').click(function(){
$('#dunkel').css('display','none');
$('#menu').fadeOut();
})
$('#togg').click(function(){
$('#dunkel').css('display','block');
})
</script>
<div id="dunkel"></div>
</body>
</html>
Alles anzeigen
body {
margin:0;
padding:0;
width:100%;
height: auto;
background-size: cover;
background-image: url(hintergrund.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.header img#togg {
display: none;
position: absolute;
right:20px;
top:9px;
}
.header {
width:100%;
background-color:#FAEDD6;
height:70px;
}
.header img.logo {
width: 192px;
height: auto;
position: absolute;
margin-left: 1%;
}
.header ul {
margin: auto;
width: 79%;
padding:17px 0 23px 0;
text-align: center;
float: right;
}
.header ul li {
display: inline;
font-family: 'Jura', sans-serif;
font-size: 152%;
padding: 0 27px;
}
.header ul li a {
text-decoration: none;
color: black;
}
.header ul li a:hover {
border-bottom: 4px solid #78342f;
}
.header ul li a.active {
border-bottom: 4px solid #78342f;
}
footer {
background-color: #FAEDD6;
height: 42px;
width: 100%;
position: fixed;
bottom: 0px;
}
footer span.footer {
position: absolute;
top:8px;
color: #151515;
font-family: 'Roboto', sans-serif;
margin:auto auto auto 2%;
letter-spacing: 0.5px;
}
footer span a {
text-decoration: none;
color:black;
}
footer span a.copyright {
font-family: 'Roboto: 300', sans-serif;
font-size: 20px;
}
footer span a.strich {
margin: 0 5px;
}
footer span a.impressum:hover {
text-decoration-line: underline;
}
@media screen and (min-width:850px) {
.header ul {
display: block !important;
}
#X,#togg{
display:none;
}
}
@media screen and (max-width: 850px) {
.header img#togg{
display: block;
}
#menu{
display:block;
margin-left:-200px;
width:200px;
height:500px;
background-color:black;
padding-top: 34px;
position: relative;
z-index: 10;
height: 88vh;
}
.header ul li a, .header ul li a.active {
color: white;
}
#X{
position:absolute;
right:173px;
top:6px;
cursor:pointer;
color:white;
font-family: 'Jura', sans-serif;
font-size: 24px;
font-weight: bold;
}
.header ul li {
display:block;
margin-top: 19px;
list-style: none;
}
#dunkel{
width:100vw;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:3;
background:black;
opacity:0.6;
display:none;
}
}
Alles anzeigen
Ist zwar nicht ganz wie ich es mir vorgestellt habe aber es ist in Ordnung
Bekommt man es irgendwie hin das wenn man die Seite in der Größe für Handy neu lädt das dann nicht direkt schon die Navigation offen ist sondern sie sich erst öffnet wenn man drauf klickt?
Das mit dem das der schwarze Bereich immer so hoch wie der verwendete Bildschirm ist klappt nicht so ganz, man muss immer noch ein bisschen runter scrollen, geht das auch anderster oder nur so?
Erstmal vielen Dank!!
Ich habe es jetzt soweit hinbekommen, es gibt nur drei Sachen die ich noch gerne ändern würde aber keine Ahnung habe wie.
Erstmal das das Logo wie auf dem Bild im Hintergrund ist und sich nicht überschneidet, dann das der schwarze Bereich immer so hoch ist wie der verwendete Bildschirm und das der Hintergrund wenn die Navigation offen ist so abgedunkelt ist wie man es oft kennt von mobilen Seiten.
Ich habe den Code kopiert und nur den JavaScript Teil mit <script> in den head eingefügt und es geht immer noch nicht. Habe es als erstes mit Firefox ausprobiert und jetzt Chrome runter geladen aber es geht bei beiden nicht
Bei mir funktioniert es nicht obwohl ich den Code kopiert habe
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"/>
<title>Schreinerei Brettner | Startseite</title>
<link rel="stylesheet" type="text/css" href="index2.css">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
</head>
<body>
<section id="menubar">
<a class="menubutton" href="#menu"><img class="icon" src=""> </a>
</section>
<div class="header">
<img id="togg" onclick="openNav()"src="icon.png">
<ul id="menu"><span id="X">X</span>
<li><a class="active" href="">Startseite</a></li>
<li><a href="">Über uns</a></li>
<li><a href="">Leistungen</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</div>
<footer>
<span class="footer"> <a class="copyright">©</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a> <a class="impressum" href="impressum.html">Impressum</a> </span>
</footer>
<script>
$('#togg').click(function(){
$('#menu').fadeIn()
});
$('#X').click(function(){
$('#menu').fadeOut();
})
</script>
</body>
</html>
Alles anzeigen
body {
margin:0;
padding:0;
width:100%;
height: auto;
background-size: cover;
background-image: url(hintergrund.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
#menubar {
position: absolute;
right:20px;
top:9px;
}
#menubar a.menubutton {
display: none;
}
.header {
width:100%;
background-color:#FAEDD6;
height:70px;
}
.header img {
width: 192px;
height: auto;
position: absolute;
margin-left: 1%;
}
.header ul {
margin: auto;
width: 79%;
padding:17px 0 23px 0;
text-align: center;
float: right;
}
.header ul li {
display: inline;
font-family: 'Jura', sans-serif;
font-size: 152%;
padding: 0 27px;
}
.header ul li a {
text-decoration: none;
color: black;
}
.header ul li a:hover {
border-bottom: 4px solid #78342f;
}
.header ul li a.active {
border-bottom: 4px solid #78342f;
}
footer {
background-color: #FAEDD6;
height: 42px;
width: 100%;
position: absolute;
bottom: 0px;
}
footer span.footer {
position: absolute;
top:8px;
color: #151515;
font-family: 'Roboto', sans-serif;
margin:auto auto auto 2%;
letter-spacing: 0.5px;
}
footer span a {
text-decoration: none;
color:black;
}
footer span a.copyright {
font-family: 'Roboto: 300', sans-serif;
font-size: 20px;
}
footer span a.strich {
margin: 0 5px;
}
footer span a.impressum:hover {
text-decoration-line: underline;
}
@media screen and (min-width:850px) {
.header ul {
display: block !important;
}
#X,#togg{
display:none;
}
}
@media screen and (max-width: 850px) {
#menubar a.menubutton ,#togg{
display: block;
}
.header ul {
display: none;
}
#menu{
display:none;
margin-left:-200px;
width:200px;
height:500px;
background:#123456;
}
#X{
position:absolute;
right:180px;
top:0px;
cursor:pointer;
color:white;
}
}
.header img{
width:40px;
height:40px;
}
Alles anzeigen
Es ist eine Webseite einer ausgedachten Schreinerei die ich für die Schule machen muss, also nicht wundern
<!DOCtYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"/>
<title>Schreinerei Brettner | Startseite</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
</head>
<body>
<section id="menubar">
<a class="menubutton" href="#menu"><img class="icon" src="icon.png"> </a>
</section>
<div class="header">
<img src="logo.png">
<ul>
<li><a class="active" href="">Startseite</a></li>
<li><a href="">Über uns</a></li>
<li><a href="">Leistungen</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</div>
<footer>
<span class="footer"> <a class="copyright">©</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a> <a class="impressum" href="impressum.html">Impressum</a> </span>
</footer>
</body>
</html>
Alles anzeigen
body {
margin:0;
padding:0;
width:100%;
height: auto;
background-size: cover;
background-image: url(hintergrund.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
#menubar {
position: absolute;
right:20px;
top:9px;
}
#menubar a.menubutton {
display: none;
}
.header {
width:100%;
background-color:#FAEDD6;
height:70px;
}
.header img {
width: 192px;
height: auto;
position: absolute;
margin-left: 1%;
}
.header ul {
margin: auto;
width: 79%;
padding:17px 0 23px 0;
text-align: center;
float: right;
}
.header ul li {
display: inline;
font-family: 'Jura', sans-serif;
font-size: 152%;
padding: 0 27px;
}
.header ul li a {
text-decoration: none;
color: black;
}
.header ul li a:hover {
border-bottom: 4px solid #78342f;
}
.header ul li a.active {
border-bottom: 4px solid #78342f;
}
footer {
background-color: #FAEDD6;
height: 42px;
width: 100%;
position: absolute;
bottom: 0px;
}
footer span.footer {
position: absolute;
top:8px;
color: #151515;
font-family: 'Roboto', sans-serif;
margin:auto auto auto 2%;
letter-spacing: 0.5px;
}
footer span a {
text-decoration: none;
color:black;
}
footer span a.copyright {
font-family: 'Roboto: 300', sans-serif;
font-size: 20px;
}
footer span a.strich {
margin: 0 5px;
}
footer span a.impressum:hover {
text-decoration-line: underline;
}
@media screen and (min-width:850px) {
.header ul {
display: block !important;
}
}
@media screen and (max-width: 850px) {
#menubar a.menubutton {
display: block;
}
.header ul {
display: none;
}
}
Alles anzeigen
Das wenn ich es kleiner schiebe die vorherige Navigation weg geht und das Menü Icon kommt habe ich schon, ich muss nur hinbekommen mit JavaScript das wenn ich auf den Icon drauf klicke das von rechts das Menü in den Bildschirm kommt. Das html und css habe ich alles nur der JavaScript Teil damit es funktioniert fehlt mir
Hallo,
ich mache gerade eine Webseite und möchte das diese auch auf dem Handy gut funktioniert. Jetzt will ich das ab einer bestimmten Bildschirmauflösung man auf den Menü Icon klickt und von rechts das Menü kommt. Vielleicht kann mir hier jemand helfen, die Sachen die ich im Internet finde verwirren mich nur.
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.