Navigation Wörter unterstreichen, Farbänderung beim Hovern etc

Fannibal · 13. Mai 2018

Dankeschön! Hab mal geschaut was du anders gemacht hast und hätte echt nicht gedacht, dass Änderung wie von inline-block zu block dazu beitragen, dass der Strich sich der Wortlänge anpasst.

Wieso sollte man dich hassen?

Hab da noch ne Fragen zum Code.

Was macht das "class="ca/cb/cc""? Hast du das einfach nur geschrieben, falls man speziell an diesem Link etwas ändern möchte geschrieben oder gibts da nochn anderen Zweck?

Code

<li><a  class="ca" title="Seite 1" href="#">Seite 1</a></li>

Oh und beim scrollen, jetzt wo du es netterweise noch gemacht hast:

Was muss ich ändern/hinzufügen, wenn ich möchte, dass die Leiste nicht sofort beim runterscrollen verschwindet sondern erst nach evtl. 2x runterscrollen?

basti1012 · 13. Mai 2018

Zitat von Fannibal
Was macht das "class="ca/cb/cc""? Hast du das einfach nur geschrieben, falls man speziell an diesem Link etwas ändern möchte geschrieben oder gibts da nochn anderen Zweck?
Code
<li><a  class="ca" title="Seite 1" href="#">Seite 1</a></li>
weil ich schreibfaul bin.

Sinn voll währe es normale namen wie linkhome oder link1 oder sonst was zu geben.

Sinn der sache ist das man später ,wenn man will direkt auf den link zugreifen kann,bzw den style ändern und co. Eigentlich das gleiche wie eine ID doch mit CLASS kannst du mehrere Links und Einträge die den gleichen CLASS Namen haben auf einmal ändern ,was bei der ID nicht sein darf und auch nicht gehen dürfte

Fannibal · 13. Mai 2018

Okay, danke

Fannibal · 14. Mai 2018

Wie krieg ich das hin, dass die Navigation linksbündig ist? Wenn ich zb beim left statt 0px 150px hinschreibe, dann wirds zwar nach links geschoben aber dann auch dieses Citrøn. Da hab ich dann auch ein Problem. Das Citron wird beim drauf drücken auch unterstrichen, was ich aber nicht will. Das soll im Prinzip als Logo dienen. Und es soll in die selbe Zeile wie die Navigation, wir krieg ich das hin?

HTML

<!DOCTYPE HTML>

<html lang="de">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>



 *{

     margin-left:0px;

     padding:0px;

 }

 body{

     height:1500px;

     overflow:scroll;

}

#inhalt{

     position:fixed;

     top:0px;

 left:0px;
    
     text-align: right;

     width:70vw;

}

ul{

  display:flex;

}

 

#tabmenue li {

     list-style: none;
     width: 20%;
     display:inline;
background: white;
 

}

 

 

#tabmenue a {

     color: black;

     font-size:13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    line-height: 22.4158px;

     text-decoration:none;

     display:inline-block;
    

 

}

 

#tabmenue A:link,

#tabmenue A:visited {

   color:black;

   padding: 10px;
    background: white;

   border-bottom: 5px solid transparent;
    

}


    #tabmenue a:hover { 
        color:gray;}

#tabmenue a:focus {

   background: #black;

   padding: 3px;

   border-bottom: 3px solid black;

   transition: all 0.5s ease;

}
    #logo
    {text-align:left; }

</style>

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

 

 </head>

 <body>

 

<div id="inhalt">

 

    <div id="tabmenue">
        <div id="logo">
            <h1><a href="#">Citrøn</a></h1>
        </div>

        <ul> 

            <li><a  class="ca" title="Home" href="#">Home</a></li>

            <li><a class="cb" title="Zitrone" href="#">Zitrone</a></li>

            <li><a  class="cc" title="Kochabend" href="#">Kochabend</a></li>

            <li><a  class="cd" title="Kontakt" href="#">Kontakt</a></li>

        </ul>

    

    </div> </div>

 
<script>



function someAction(e) {

  var text = document.getElementById('inhalt');

  



  if (e.deltaY > 0) {

    $('#inhalt').fadeOut();  }

  else if (e.deltaY < 0) {

             $('#inhalt').fadeIn();

  }

}





window.addEventListener('mousewheel', someAction, false);

 



</script>



</body>

</html>

Alles anzeigen

basti1012 · 14. Mai 2018

Ich verstehe nicht, was du mit linksbündig meinst. Weil wenn du left 150 pixel himschreibst geht das menü normalerweise nach rechts . Kannst du mir das mal genauer erklären.

Du machst das Citroën ja auch in ein <h1> rein ? soll die schrift grösser sein als der rest ??

EDIT

kuck dir das mal an und sag mal was da noch geändert werden muß

*** Link entfernt, weil nicht mehr erreichbar ***

Fannibal · 14. Mai 2018

Frauen mit links und rechts halt lol meinte Rechtsbündig sorry

Also im Prinzip ist das Perfekt (danke!) nur halt die Nav nach rechts und Citron links also da wo es gerade ist. Kannst du mir sagen, was du da ändern müsstest um das jetzt rechtsbündig zu machen? Ich seh da nur Zahlen und Inline, Block und versteh nicht, wieso das die Position ändert

basti1012 · 14. Mai 2018

Ob rechts link egal. ich bin meistens auch schwer von Begriff genau wie jetzt . Soll das so aussehen

*** Link entfernt, weil nicht mehr erreichbar ***

oder soll erst die navigation kommen und danach das zitrön

gibt ja nicht viele möglichkeiten

1.citrön - home -zitrone-kochabend- kontakt

2.home -zitrone-kochabend- kontakt-citrön

3citrön - home -zitrone-kochabend- kontakt

4home -zitrone-kochabend- kontakt-citrön

5 oder mittig geht auch

so jetzt haben wir alle Möglichkeiten durch .Wie brauchst du es den jetzt?

Arne Drews · 14. Mai 2018

Ich frage mich immer noch, was bei einem Klick auf ein Menüpunkt im Produktivmodus passieren soll, sprich: wie wird der Content geladen?

Steckt da ein Ajax-Request hinter oder die Standard Funktionalität der <a>-Tags?

Denn wenn auf Klick ein Standard HTTP-Request erfolgt ( also kein Ajax! ), sehe ich noch nicht, dass die CSS Pseudoklasse :active hinterher greift.

basti1012 · 14. Mai 2018

Zitat von Arne Drews

Ich frage mich immer noch, was bei einem Klick auf ein Menüpunkt im Produktivmodus passieren soll, sprich: wie wird der Content geladen?

Steckt da ein Ajax-Request hinter oder die Standard Funktionalität der <a>-Tags?

Denn wenn auf Klick ein Standard HTTP-Request erfolgt ( also kein Ajax! ), sehe ich noch nicht, dass die CSS Pseudoklasse :active hinterher greift.

Stimmt. So greif jetzt nach den standart<a> naturlich nicht das active . Aber da sie ja bis jetzt nix dagegen gesagt hat könnte die ajax methode wohl passen. Fals das doch mit <a> laufen soll muß sie halt auf eins der ersten Beispielen zurück greifen

Fannibal · 14. Mai 2018

Arne Drews Die Frage ist hoffentlich nicht an mich gerichtet? Ich verstehe nämlich kein Wort

@ Basti1012

Also so wie du es gemacht hast, nur dass das Citron ganz links ist also so:

citron

home -zitrone-kochabend- kontakt

basti1012 · 14. Mai 2018

also citrön links und menü rechts ?

die frage wahr an dich,mich, bzw hat er eine feststellung gemacht was das Script angeht. Hast du deine Seite schon Online ?? Dann läst sich die frage am einfachsten klären ?

wenn du jetzt die seite wechselst ,und der neue Inhalt angezeigt wird ,ist der Strich dann noch da wo er hinsollte ,oder ist er dann weg ?

Fannibal · 14. Mai 2018

ja citron links menü rechts

Und nein hab ich noch nicht

basti1012 · 14. Mai 2018

Da das Menü sowieso schon position fixed hat habe ich das auch mit position gemacht.

Eigentlich solte man das vermeiden damit man es später einfacher hat um es responsiv zu machen.

Aber beim Fenster zusammen schieben sieht es zumindest gut aus und es bleibt alles da wo es sein sollte.

Ist zwar nicht die beste Lösung aber es geht

*** Link entfernt, weil nicht mehr erreichbar ***

Zitat von Fannibal

Und nein hab ich noch nicht

Was Arne Drews eben meinte ist .Wenn du ein normales Menü hast wo ein Link über <a href="link">home</a> eingebunden ist und keine hilfe von Ajax kommt ,tut eine normales Seite einen Reload durchführen. Nach einen Reload sind sämtliche einstellungen und klicks weg -

Also wenn du auf HOME klickst und dann da der Strich ist ,ist nach den Reload der Strich wieder weg.

Du sagtest ja mal am Anfang das du damit die Seite markieren willst wo du gerade bist .

Was so nicht geht weil wenn reload dann Einstellung weg .

Um daszu erreichen das der Unterstrich immer da ist wo du gerade bist ,könnte man die Url auslesen ,oder mit Localstorage die Seite wieder markieren wo du gerade bist . Es gibt auch noch andere möglichkeiten ,die ich aber meistens nicht nutze.

Dann gibt es ajax ,was viele Seiten schon nutzen weil die Seitenladezeit meistens schneller ist und die Einstellungen nicht verloren gehen .

Wenn du dann Home klickst macht die Seite kein Reloade und der Strich bleibt dann da.

Sobald du das weiß was du nutzen tust oder willst können wir nach einer Lösung suchen .

Ich hoffe man konnte das verstehen was ich versuchte zu erklären

Arne Drews · 14. Mai 2018

Ich finde JavaScript und Ajax super und verwende das in fast allen meiner Projekte.

Aber für mein Empfinden sollte eine grundlegende Funktionalität einer Website auch heute noch komplett ohne Scripte funktionieren.

Ich als Entwickler weiß ja nie, was für lokale Browser-Einstellung oder Plugins meine Besucher installiert haben.

Es gibt etliche Script-Blocker, die immer beliebter werden. Da macht es für mich keinen Sinn, grundlegende Menü-Funktionalität auf JS/Ajax zu begrenzen.

OnTop ja, als Kosmetik und Usability. Aber nicht als grundlegende Funktion.

Es sei denn, man ist sich bewußt, dass man damit ungewollt User ausschliesst.

Fannibal · 14. Mai 2018

Habs verstanden. Ich lass es aber erstmal so, wenns mich später stört kann ichs ja noch ändern. Das mit dem responsive könnte später schon n Problem werden, da es am Ende auf jeden Fall responsive sein soll

Bin direkt an nem neuen Problem:

Wie füge ich einen Hintergrund ein, der dann auch nur auf der einen Seite bleibt? Oft kann man ja von der Hauptseite runterscrollen und geht im Prinzip durch die ganzen Verlinkungen, die auch in der Navigation zu sehen ist und die Seiten haben ja dann andere Bilder etc. Für die Startseite wollte ich haltn Bild einfügen aber weiß auch nicht in welchen Bereich ich das schreiben muss

Und hier der Kasten mit den Worten "Erfahre mehr über unsere Kochabende". Wie krieg ich das mittig hin? Ich find den Abstand zwischen Text und Kasten zwar gut aber nicht, dass es links statt mittig ist

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 *{
     margin-left:0px;
     padding:0px;
 
 }
 body{
     height:1500px;
     overflow:scroll;
}
#inhalt{
  display:flex;
     position:fixed;
     top:0px;
    background: white;
left:0px;
     text-align:center;
     width:99vw;
}
ul{
  display:flex;
 
}
  #tabmenue{
    position:absolute;
     width:50%;
 right:0;
  margin-right:20px;
  }
#tabmenue li {
     list-style: none;
     width:12.5vw;
 display:inline-block;
background: white;
 
}
 
 
#tabmenue a {
     color: black;
     font-size:13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  
     text-decoration:none;
     display:inline-block;
 
 
}
 
#tabmenue A:link,
#tabmenue A:visited {
   color:black;
   padding: 10px;
    background: white;
   border-bottom: 5px solid transparent;
          
}
    #tabmenue a:hover { 
        color:gray;}
#tabmenue a:focus {
   background: #black;
   padding: 3px;
   border-bottom: 3px solid black;
   transition: all 0.5s ease;
       
}
   .logo{
     width:40%;
     height:50px;
     display:block;
       text-decoration:none;
       color:yellowgreen;
     font-size:29px;
    letter-spacing: 1px;
    text-transform: uppercase;
 padding: 14px 0px 0px 0px ;
       font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";

  }
  #logo{
    width:20vw;
    padding-left:0px;
 
       margin-left:20px;
  }
  
    #banner
    {
        padding-top: 10em;
        text-align: center;
    }
    
    #banner .title h2
    {
        font-size: 4em;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    }
    
    #banner .title .byline
    {
        font-size: 2em;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    }
    
    #banner .button
    {
        margin-top: 2em;
        padding: 1.2em 2em;
        border: 2px solid rgba(0,0,0,1.00);
        border-radius: 6px;
        font-weight: 700;
        font-size: 1em;
        display: block;
         font-size:12px;
    letter-spacing: 1px;
    text-transform: uppercase;
       font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
        color: black;
    }
    
    
  
</style>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
 
 </head>
 <body>
 
<div id="inhalt">
        <div id="logo" >
           <a class="logo" href="#">Citron</a>
        </div>
    <div id="tabmenue">
 
        <ul> 
            <li><a  class="ca" title="Home" href="#">Home</a></li>
            <li><a class="cb" title="Zitrone" href="#">Zitrone</a></li>
            <li><a  class="cc" title="Kochabend" href="#">Kochabend</a></li>
            <li><a  class="cd" title="Kontakt" href="#">Kontakt</a></li>
        </ul>
    
    </div> </div>
 
        <div id="banner" class="container">
        <div class="title">
            <h2>Zitronen.</h2>
            <span class="byline">Gekocht. Getrocknet. Eingelegt.</span>
        </div>
        <ul class="actions">
            <li><a href="#" class="button">Erfahre mehr über unsere Kochabende</a></li>
        </ul>
    </div> 
     
<script>
function someAction(e) {
  var text = document.getElementById('inhalt');
  
  if (e.deltaY > 0) {
    $('#inhalt').fadeOut();  }
  else if (e.deltaY < 0) {
             $('#inhalt').fadeIn();
  }
}
window.addEventListener('mousewheel', someAction, false);
 
</script>
</body>
</html>

Alles anzeigen

basti1012 · 14. Mai 2018

Du mußt drauf achten was vorher schon mal in der css geschrieben wurde. Ich hatte <ul> schon mal werte gegeben und du hast unten auch für dein button <ul> genommen .Da hat dein button was von den ersten ul was mit bekommen .

Tolle erklärung ich weiß.Ich kann es nicht besser .

Sinnvoll wäre es von anfang an mit fle4x-boxen zu arbeiten ,das erleichtert das responsive arbeiten später .

Nur das zu erklären kann ich nicht .Ich weiß ja auch nicht wie fit du in html css bist ?

Ich könnte dir vorschlagen du machst erstmal weiter und zum schluß bauen wir das dann mit flex-boxen um . Wenn ich weiß wie es aussehen soll ist das dann auch kein Problem.

Hier ist erstmal dein button mittig

*** Link entfernt, weil nicht mehr erreichbar ***

Nicht wundern habe div raus gemacht ,weil ich noch kein sinn drin sah das es ein ul >li button ist .

Wegen dein Bild mußt du mir mal genauer erklären.

Du willst ein Bild haben ( Hintergrundbild ) ???

Was Hinter alles sein soll ? Also hintergrundbild ,und es soll stehen bleiben ( fixed ) oder wie? Und was heist nur auf einer Seite?

So das die rechte seite zb ein blaues Bild hat und die linke kein bild oder wie soll ich das verstehen?

Du merkst schon ich bin etwas schwer von begreifen

Fannibal · 15. Mai 2018

Mach dich selbst nicht runter, bis jetzt hab ich deine Erklärungen alle verstanden.

Also hier https://www.theeddynyc.com/ siehst du ja, dass sobald die Seite geladen hat, dass da ein Hintergrundbild ist und wenn du runter scrollst, geht dieser Weg und der Hintergrund ist weiß. Das möchte ich auch so haben. Geht das irgendwie mit background-image: url(...)?

Oh und habs vergessen vorher zu sagen. Den Button den du vorhin mittig gesetzt hast, die Wörter drinne sind da unterstrichen. Wie krieg ich das weg?

basti1012 · 15. Mai 2018

Zitat von Fannibal

Oh und habs vergessen vorher zu sagen. Den Button den du vorhin mittig gesetzt hast, die Wörter drinne sind da unterstrichen. Wie krieg ich das weg?

text-decoration:none;

wegen den anderen kucke ich später bin gerade auf den sprung

Fannibal · 15. Mai 2018

Okay, hab das mit dem Unterstrich hingekriegt, danke

Edit:

Gibts ne Möglichkeit, sich Bemerkungen im CSS/Head Bereich zu machen? So wie ich es hier im Body mache ? Mir ist der CSS Teil schon viel zu unübersichtlich und ich weiß gar nicht mehr was was ist

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 *{
     margin-left:0px;
     padding:0px;
 
 }
 body{
     height:1500px;
     overflow:scroll;
}
#inhalt{
  display:flex;
     position:fixed;
     top:0px;
    background: white;
left:0px;
     text-align:center;
     width:99vw;
}
ul{
  display:flex;
 
}
  #tabmenue{
    position:absolute;
     width:50%;
 right:0;
  margin-right:20px;
  }
#tabmenue li {
     list-style: none;
     width:12.5vw;
 display:inline-block;
background: white;
 
}
 
 
#tabmenue a {
     color: black;
     font-size:13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  
     text-decoration:none;
     display:inline-block;
 
 
}
 
#tabmenue A:link,
#tabmenue A:visited {
   color:black;
   padding: 10px;
    background: white;
   border-bottom: 5px solid transparent;
          
}
    #tabmenue a:hover { 
        color:gray;}
#tabmenue a:focus {
   background: #black;
   padding: 3px;
   border-bottom: 3px solid black;
   transition: all 0.5s ease;
       
}
   .logo{
     width:40%;
     height:50px;
     display:block;
       text-decoration:none;
       color:yellowgreen;
     font-size:29px;
    letter-spacing: 1px;
    text-transform: uppercase;
 padding: 14px 0px 0px 0px ;
       font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  }
  #logo{
    width:20vw;
    padding-left:0px;
 
       margin-left:20px;
  }
  
    #banner
    {
        padding-top: 10em;
        text-align: center;
 
    }
    
    #banner .title h2
    {
        font-size: 4em;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    }
    
    #banner .title .byline
    {
        font-size: 2em;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";

    }
    
    #banner .button1
    {
      width:40%;
      text-align:center;
        margin-top: 2em;
        padding: 1.2em 2em;
        border: 2px solid rgba(0,0,0,1.00);
        border-radius: 6px;
        font-weight: 700;
        font-size: 1em;
text-decoration:none;
        display: inline-block;
         font-size:12px;
    letter-spacing: 1px;
    text-transform: uppercase;
       font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
        color: black;
    }
    
    @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html {
  font-family: 'Montserrat', Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background: #fff;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, input, select, textarea {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

#container {
  border: solid 3px #474544;
  max-width: 768px;
  margin: 60px auto;
  position: relative;
}

form {
  padding: 37.5px;
  margin: 50px 0;
}

h1 {
  color: #474544;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  text-transform: uppercase;
}

.underline {
  border-bottom: solid 2px #474544;
  margin: -0.512em auto;
  width: 80px;
}

.icon_wrapper {
  margin: 50px auto 0;
  width: 100%;
}

.icon {
  display: block;
  fill: #474544;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}

.email {
    float: right;
    width: 45%;
}

input[type='text'], [type='email'], select, textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #474544;
    color: #474544;
    font-size: 1.000em;
  font-weight: 400;
  letter-spacing: 1px;
    margin: 0em 0 1.875em 0;
    padding: 0 0 0.875em 0;
  text-transform: uppercase;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input[type='text']:focus, [type='email']:focus, textarea:focus {
    outline: none;
    padding: 0 0 0.875em 0;
}

.message {
    float: none;
}

.name {
    float: left;
    width: 45%;
}

select {
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

.subject {
  width: 100%;
}

.telephone {
  width: 100%;
}

textarea {
    line-height: 150%;
    height: 150px;
    resize: none;
  width: 100%;
}

::-webkit-input-placeholder {
    color: #474544;
}

:-moz-placeholder { 
    color: #474544;
    opacity: 1;
}

::-moz-placeholder {
    color: #474544;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #474544;
}

#form_button {
  background: none;
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#form_button:hover {
  background: #474544;
  color: #F2F3EB;
}

@media screen and (max-width: 768px) {
  #container {
    margin: 20px auto;
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 26px;
  }
  
  .underline {
    width: 68px;
  }
  
  #form_button {
    padding: 15px 25px;
  }
}

@media screen and (max-width: 420px) {
  h1 {
    font-size: 18px;
  }
 
  
  input[type='text'], [type='email'], select, textarea {
    font-size: 0.875em;
  }
}
  
</style>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
 
 </head>
 <body>
     
     <!--Logo start-->
 
<div id="inhalt">
        <div id="logo" >
           <a class="logo" href="#">Citron.</a>
        </div>
    <!--Logo Ende-->
    
    <!--Navigation Start-->
    
    <div id="tabmenue">
 
        <ul> 
            <li><a  class="ca" title="Home" href="#">Home</a></li>
            <li><a class="cb" title="Zitrone" href="#">Zitrone</a></li>
            <li><a  class="cc" title="Kochabend" href="#">Kochabend</a></li>
            <li><a  class="cd" title="Kontakt" href="#">Kontakt</a></li>
        </ul>
    
    </div> </div>
 
 <div id="banner" class="container">
        <div class="title">
            <h2>Zitronen.</h2>
            <span class="byline">Gekocht. Getrocknet. Eingelegt.</span>
        </div>
        <div class="actions">
            <a href="#" class="button1">Erfahre mehr über unsere Kochabende</a> 
        </div>
    </div> 
     
     <!--Navigation Ende-->
     
     
     <!--Kontaktformular Start-->
     
     <div id="container">
  <h1>Kontaktieren Sie uns</h1>
  </div>
  <form action="#" method="post" id="contact_form">
    <div class="name">
      <label for="name"></label>
      <input type="text" placeholder="Name" name="name" id="name_input" required>
    </div>
    <div class="email">
      <label for="email"></label>
      <input type="email" placeholder="E-Mail-Adresse" name="email" id="email_input" required>
    </div>
    <div class="telephone">
      <label for="name"></label>
      <input type="text" placeholder=" Handynummer" name="telephone" id="telephone_input" required>
    </div>
    <div class="subject">
      <label for="subject"></label>
      <select placeholder="Betreff" name="subject" id="subject_input" required>
        <option disabled hidden selected>Betreff</option>
        <option>Ich habe eine Frage</option>
        <option>Ich würde gerne am Kochabend teilnehmen</option>
        <option>Ich würde gerne ein Feedback geben</option>
      </select>
    </div>
    <div class="message">
      <label for="message"></label>
      <textarea name="message" placeholder="Nachricht hier eingeben" id="message_input" cols="30" rows="5" required></textarea>
    </div>
    <div class="submit">
      <input type="submit" value="Senden" id="form_button" />
    </div>
  </form>
</div>
     
    <!--Kontaktformular Ende-->
    
    
    <!--Script Start-->
    
<script>
function someAction(e) {
  var text = document.getElementById('inhalt');
  
  if (e.deltaY > 15) {
    $('#inhalt').fadeOut();  }
  else if (e.deltaY < 0) {
             $('#inhalt').fadeIn();
  }
}
window.addEventListener('mousewheel', someAction, false);
 
</script>
    
    <!--Script Ende-->
    
</body>
</html>

Alles anzeigen

basti1012 · 15. Mai 2018

https://codepen.io/basti1012/pen/pVOrYO?editors=1100

Kometare stehen in der css und Js damit die eine frage schon mal geklärt wäre. Das mit den Bild habe ich mal 2 rein gemacht weil dein Link was du gepostet hast hat ja mehrere zur Auswahl.

Fals du das eine meinst wo das Bild langsamer als ist als der Text das nennt man parallax http://pixelcog.github.io/parallax.js/ wofür es schon Scripte gibt.

Aber ein normales Bild was unter alles anderen liegen soll macht man normalerweise mit background-image rein

Navigation Wörter unterstreichen, Farbänderung beim Hovern etc

Jetzt mitmachen!

Teilen