|
|||
Das soll ja nicht das Problem sein
mein aktueller HTML Code: HTML-Code:
<div class="form_kontakt"> <div class="grid_1"> <div class="ico"> <label for="name"> <i id="name" class="fa fa-user"></i> </label> </div> <div class="input_text"> <input type="text" class="input_textfeld" id="name" name="name" placeholder="Name *"> </div> <div class="error_message">Error1</div> </div> <div class="grid_1"> <div class="ico"> <label for="e-mail"> <i id="e-mail" class="fa fa-envelope"></i> </label> </div> <div class="input_text"> <input type="email" class="input_textfeld" id="e-mail" name="e-mail" placeholder="E-Mail *"> </div> <div class="error_message">Error2</div> </div> <div class="grid_1"> <div class="ico"> <label for="ort"> <i id="ort" class="fas fa-home"></i> </label> </div> <div class="input_text"> <input type="text" class="input_textfeld" id="ort" name="ort" placeholder="Ort"> </div> <div class="error_message">Error3</div> </div> <div class="grid_1"> <div class="ico"> <label for="telephone"> <i id="telephone" class="fas fa-home"></i> </label> </div> <div class="input_text"> <input type="tel" class="input_textfeld" id="telephone" name="telephone" placeholder="Telefon / Mobil"> </div> <div class="error_message">Error4</div> </div> </div> <div class="form_kontakt"> <div class="parent"> <div class="ico"> <label for="betreff"> <i id="subject-icon" class="fa fa-edit"></i> </label> </div> <div class="div2"> <input type="text" class="input_textfeld" id="betreff" name="betreff" placeholder="Betreff *"> </div> <div class="div3">Error5</div> <div class="div4"> <label for="nachricht"> <i id="nachricht" class="fa fa-comment"></i> </label> </div> <div class="div5"> <input type="text" class="input_textfeld" id="subject" name="subject" placeholder="Betreff *"> </div> <div class="div6">Error6</div> <div class="div7"> </div> <div class="div8"> </div> <div class="div9">Error7</div> <div class="div10"> </div> <div class="div11"> </div> <div class="div12">Error8</div> </div> </div> Code:
.form_kontakt { display: flex; flex-flow: row wrap; align-items: center; max-width: 52em; } .grid_1 { display: grid; grid-template-columns: 3em 20em; grid-template-rows: 3em 1em; grid-column-gap: 0px; grid-row-gap: 0px; margin-bottom: 1em; margin-right: 1em; } .ico { display: flex; justify-content: center; align-items: center; border: #CCCCCC 1px solid; border-top-left-radius: 5px; border-bottom-left-radius: 5px; opacity: 0.7; } .input_text { border: #CCCCCC 1px solid; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-left: none; opacity: 0.7; } .input_textfeld { width: 99%; height: 100%; padding-left: 0.5em; } .input_text { min-width: 100%; } .error_message { grid-area: 2 / 2 / 3 / 3; min-width: 100%; } .parent { display: grid; grid-template-columns: 3em 44em; grid-template-rows: 3em 1em 6em 1em 5em 1em 4em 1em; grid-column-gap: 0px; grid-row-gap: 0px; } .div1 { grid-area: 1 / 1 / 2 / 2; border: #CCCCCC 1px solid; } .div2 { grid-area: 1 / 2 / 2 / 3; border: #CCCCCC 1px solid; } .div3 { grid-area: 2 / 2 / 3 / 3; border: #CCCCCC 1px solid; } .div4 { grid-area: 3 / 1 / 4 / 2; border: #CCCCCC 1px solid; } .div5 { grid-area: 3 / 2 / 4 / 3; border: #CCCCCC 1px solid; } .div6 { grid-area: 4 / 2 / 5 / 3; border: #CCCCCC 1px solid; } .div7 { grid-area: 5 / 1 / 6 / 2; border: #CCCCCC 1px solid; } .div8 { grid-area: 5 / 2 / 6 / 3; border: #CCCCCC 1px solid; } .div9 { grid-area: 6 / 2 / 7 / 3; border: #CCCCCC 1px solid; } .div10 { grid-area: 7 / 1 / 8 / 2; border: #CCCCCC 1px solid; } .div11 { grid-area: 7 / 2 / 8 / 3; border: #CCCCCC 1px solid; } .div12 { grid-area: 8 / 2 / 9 / 3; border: #CCCCCC 1px solid; } @media only screen and (max-width: 870px) { .parent { grid-template-columns: 3em 20em } } Ich versuche gerade den 2ten teil zu Optimieren Ziel ist es das ich, wenn möglich alle ICO in einem CSS habe und die Errors auch in einem habe. Daran scheitere ich aber jetzt mal wieder. Ind div 7 muss ich noch eine Textarea reinmachen, bei 8 div und Textfeld und bei 9 eine Checkbox. Versuchte aber gerade erst mal alle Errors unterzubringen. |
Sponsored Links |
|
|||
In meinen Augen unnötig komplizierter Aufbau, vor allem die nicht sprechenden Klassen-Namen machen den Code doch für mich unleserlich. Ich weiß da zB nicht sofort, was "div9" sein soll, ohne mir den Code im Detail anzusehen.
Deshalb hier mal mein Vorschlag, auch mit grid + flexbox aufgebaut: Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"> <div class="contact-form"> <div class="form-wrap name-wrap"> <label class="control-wrap"> <i id="name" class="fa fa-user"></i> <span class="sr-only">Name</span> <input type="text" class="input_textfeld" name="name" placeholder="Max Mustermann"> </label> <ul class="error_list"> <li> <p> Error 1 </p> </li> <li> error 2 </li> </ul> </div> <div class="form-wrap email-wrap"> <label class="control-wrap"> <i id="name" class="fa fa-user"></i> <span class="sr-only">E-mail</span> <input type="text" class="input_textfeld" name="email" placeholder="Max.Mustermann@gmx.de"> </label> <ul class="error_list"> <li> <p> Error 1 </p> </li> <li> error 2 </li> </ul> </div> <div class="form-wrap place-wrap"> <label class="control-wrap"> <i id="name" class="fa fa-user"></i> <span class="sr-only">Ort</span> <input type="text" class="input_textfeld" name="place" placeholder="Musterstraße 10"> </label> <ul class="error_list"> <li> <p> Error 1 </p> </li> </ul> </div> <div class="form-wrap phone-wrap"> <label class="control-wrap"> <i id="name" class="fa fa-phone"></i> <span class="sr-only">Telefon</span> <input type="text" class="input_textfeld" name="phone" placeholder="+49 123 456 789"> </label> <ul class="error_list"> <li> <p> Error 1 </p> </li> </ul> </div> <div class="form-wrap betreff-wrap"> <label class="control-wrap"> <i id="name" class="fa fa-phone"></i> <span class="sr-only">Betreff</span> <textarea type="text" class="input_textfeld" name="betreff" placeholder="Nachricht für Kontaktaufnahme"></textarea> </label> <ul class="error_list"> <li> <p> Error 1 </p> </li> </ul> </div> </div> Code:
.sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .control-wrap { display: flex; } .control-wrap .fa { width: 3em; height: 3em; text-align: center; line-height: 3em; border: 1px solid #ccc; border-radius: 5px 0 0 5px; } .error_message { margin-left: 4em; } .error_list { list-style: none; padding-left: 3.2em; color: red; } .control-wrap .input_textfeld { display: inline-block; border-radius: 0 5px 5px 0; border: 1px solid #ccc; width: 100%; } .contact-form { display: grid; gap: 10px; grid-template-areas: "name email" "place phone" "betreff betreff" "text text"; } @media only screen and (max-width: 870px) { .contact-form { grid-template-areas: "name" "email" "place" "phone" "betreff" "text"; } } .name-wrap { grid-area: name; } .email-wrap { grid-area: email; } .place-wrap { grid-area: place; } .phone-wrap { grid-area: phone; } .betreff-wrap { grid-area: betreff; } Eine erklärung bezüglich der labels: placeholder ist kein Ersatz für den Text in einem label, der placeholder soll ein Beispiel sein für das, was einzugeben ist. Ich habe den Text in den labels mit "sr-only" ausgblendet, das heißt nur leute mit screenreader können diesen dann lesen. Die anderen bekommen hier die Icons zu sehen. Geändert von cloned (31.05.2021 um 09:48 Uhr) |
|
|||
Wenn man weiß was gewünscht ist, ist es auch einfacher konkret zu helfen
Freut mich, wenn es hilfreich ist. Man kann bei meinem Bsp auch die "form-wrap" elemente mit display: grid stylen, aber ich denke so wie es jetzt ist sollte es auch passen. |
|
|||
Einen kleinen Fehler scheint cloned aus deinem Beispiel noch versehendlich übernommen zu haben: Eine ID darf auf einer HTML-Seite nur einmal vorkommen!
id="name" dürfte hier auch nicht nötig sein und kann komplett entfernt werden. |
|
|||
Stimmt, das habe ich komplett übersehen. Ich habe die Id bei den input feldern entfernt, aber bei den anderen Elementen nicht einmal wahrgenommen. An der Stelle braucht es auch keine ID. Habe die label + input - elemente anders aufgebaut, so dass nur das name-Attribut relevant ist.
Danke für den Hinweis! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Drei Boxen mit gleicher Höhe in allen Browsern | felicesinger | CSS | 22 | 09.04.2016 05:35 |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 17:01 |
Mitwachsende Container: 4 Boxen | Cu Chullain | CSS | 1 | 08.09.2010 19:57 |
Boxen beim Seitenladen zuklappen (ohne "Flackern") | Plasm | Javascript & Ajax | 5 | 08.01.2010 17:42 |
css 2 boxen in einer box brauche hilfe !! | beavis-2005 | CSS | 9 | 13.01.2006 20:06 |