Beiträge von Isa140

Isa140

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.

Code

#menu{
        display:none;
        margin-left:-200px;   
        width:200px;
        height:500px;
        background-color:black;
        padding-top: 34px;
        position: relative;
        z-index: 10;
        height: 88vh;
    }

Alles anzeigen

Isa140

Vielen Dank!!

Isa140

Bei codepen ist es bei mir auch nicht so

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>
        <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">&copy;</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

CSS

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

Isa140

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?

Isa140

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?

Isa140

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.

html-seminar.de/woltlab/attachment/1428/

Isa140

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

Isa140

Bei mir funktioniert es nicht obwohl ich den Code kopiert habe

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="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">&copy;</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

CSS

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

Isa140

Es ist eine Webseite einer ausgedachten Schreinerei die ich für die Schule machen muss, also nicht wundern

HTML

<!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">&copy;</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a>   <a class="impressum" href="impressum.html">Impressum</a> </span>
        </footer>
    </body>
</html>

Alles anzeigen

CSS

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

Isa140

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

Isa140

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.

Beiträge von Isa140

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript

Navigation einer Webseite mit JavaScript