zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei Flexiblen Boxen gewünscht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 28.05.2021, 10:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du lässt dir ja auch schwer helfen, du postet keinerlei relevanten Code, bzw. ein design. Lediglich eine Skizze (sofern man das so nennen kann) gibt es.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 29.05.2021, 11:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

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>
und der CSS teil:
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
    }
}
Der erste Teil geht nun wie er soll.

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.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 31.05.2021, 09:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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>
Auch hier der CSS teil:

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)
Mit Zitat antworten
  #14 (permalink)  
Alt 31.05.2021, 11:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2012
Beiträge: 16
StandBy1 befindet sich auf einem aufstrebenden Ast
Standard

WOW!

das ist einmal eine ganz andere Hausnummer als das was ich am Basteln bin.

Vielen Dank für das öffnen meiner Augen und deiner Hilfe und Arbeit.
Mit Zitat antworten
  #15 (permalink)  
Alt 31.05.2021, 13:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #16 (permalink)  
Alt 31.05.2021, 16:42
top top ist offline
Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 60
top wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #17 (permalink)  
Alt 01.06.2021, 09:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:23 Uhr.