Stef, danke! Jetzt versteh ich auch langsam mal das Margin, Border, Padding Prinzip
Beiträge von Fannibal
-
-
Bin mir dessen bewusst dass es am Uppercase liegt. Wenn ich den aber entferne, dann wird auch der Platzhalter "Name, Nachricht hier eingeben, Handynummer etc" klein und das ist nicht das, was ich will
-
Danke
Ich hab leider nicht endende Fragen.
Beim Kontaktformular ist es ja so, dass Name, Nachricht hier eingeben, Handynummer etc groß geschrieben sind, was ich auch so will. Wenn man aber in diese Felder dann was schreibt, wird es auch groß geschrieben. Was muss ich machen, damit es normal also groß und klein geschrieben wird?
https://www.w3schools.com/code…asp?filename=FREKVUMMYDNQ
Andere Frage:
Wie krieg ich über und unter dem Impressum einen Strich? Also nicht so einen Strich sondern einen der einen etwas größeren Abstand zum Wort hat?
-
Danke, so ist es perfekt.
Ich weiß nicht ganz so recht wie ich die Links in ne andere Farbe (Grau) hinbekomme. Und irgendwie wird auch oben das Wort "Impressum" nicht angezeigt.
-
Ja genau, jetzt funktioniert es bei mir auch normal aber Das Bild ist jetzt zu lang. Also egal welches Bild ich nehme, es ist zu lang, sieht man ja auch bei deinem Beispiel. Wenn man etwas runter scrollt, dann sieht man dass das Bild noch n Stück weiter geht. Ich möchte ja dass man es vollständig sieht, ohne dass man noch scrollen muss also: Seite betreten und volles Bild sehen ohne Scrollen. Das hattest du ja schon für mich gemacht gehabt aber irgendwie ist das im neuen Code wieder weg bzw funktioniert so nicht mehr
-
Okay, das mit dem Abstand hab ich jetzt komplett geregelt. Ist so wie ich es haben will.
Jetzt hab ich aber doch Probleme mit dem Hintergrundbild. Wenn ich das Bild einfüge, dann wirds zwar gezeigt aber der footer ist plötzlich oben.
-
Ah, das mit dem Bildhintergrund ging schon so wie ich es gemacht habe. Hab nur #bild geschrieben obwohl ich im Body es als Bild geschrieben hab. Also hätte ein großes B statt ein kleines B sein sollen.
Das mit dem Abstand hab ich auch. Margin war voher auf 100 und ich hatte es heute Morgen auf 350 geändert, da ich den Abstand vom "Erfahre mehr über unsere Kochabende" und "Kontaktieren Sie uns" vergrößern wollte, was zwar auch geklappt hat aber dann ist halt auch der große Abstand von "Kontaktieren Sie uns" und dem Rest des Kontaktformulars enstanden. Jetzt muss ich gucken, wie ich einen Abstand von "Erfahre mehr über unsere Kochabende" und "Kontaktieren Sie uns" hinkriege, so dass es wie zwei verschiedene Seiten aussieht, weil es ja im Prinzip auch 2 verschiedene Seiten sind
-
Wie meinst du das?
https://www.w3schools.com/cssref/pr_background-image.asp Hier wird doch auch immer nur der Bildname eingefügt.
Und wenn ich dann die Internetseite angebe, von wo ich das Bild habe, wird es trz. nicht angezeigt. Oder meinst du was anderes?
-
Wie krieg ich den Abstand im Kontaktformular zwischen dem "Kontaktieren sie uns" und dem unteren Bereich wo dann Name, Email etc steht kleiner?
-
Was muss ich denn in dieses Value eintragen?
Es muss ja nicht ohne Flexboxen sein
Und irgendwie zeigt es mein Hintergrundbild nicht ein. Hab das eig. so reinkopiert wie du es gemacht hast
Siehst du da einen Fehler?
-
Ich meinte das Bild, dass man sofort sieht, sobald man auf die Seite geht also das Bild wo man den Laden von vorne sieht. Ich schau mir dann mal das Parallax teil an
Und mein Problem ist halt, dass wenn ich einfach ein Hintergrundbild einfüge, dann ist es zu groß also ich muss runter scrollen um alles zu sehen aber ich möchte, dass das Bild komplett zu sehen ist, sobald man die Seite lädt also wie auf der Seite die ich eben hier geschrieben hatte.
Außerdem ist rechts immer so eine Lücke. Auch bei der Navigation. Der Strich geht nicht komplett durch bis zur rechten Seite. Ich häng mal ein Bild drin davon. Sieht man aber auch bei deinem Beispiel, wenn man die 1 wegmacht (Musste einfach dieses 99vw zu 100 ändern, jetzt gehts) -
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
Alles anzeigen<!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>
-
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?
-
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
Alles anzeigen<!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>
-
ja citron links menü rechts
Und nein hab ich noch nicht
-
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
-
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
-
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
Alles anzeigen<!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>
-
-
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?
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?
-
Ich lass die Sache mitm scrollen mal weg, ist wahrscheinlich noch zu kompliziert für mich.
Und das mit dem a versteh ich nicht ganz. Der Strich ist doch unter a? Da steht ja nicht li