zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden divs vertikal zentriert ausrichten (Formular)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2016, 19:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2013
Beiträge: 12
Momro befindet sich auf einem aufstrebenden Ast
Standard divs vertikal zentriert ausrichten (Formular)

Hallo zusammen,

ich habe ein typisches Formular mit einigen Zeilen. Links Beschreibung, rechts Eingabefeld. Ich möchte das ganze jetzt in den jeweiligen Zeilen vertikal zentriert ausgerichtet haben, aber leider habe ich dafür keine Lösung finden können.

Als Beispiel hier ein Fiddle: https://jsfiddle.net/a0w5ofqa/

Habt ihr mir einen Tipp, was man da machen könnte? - Danke schonmal im Voraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2016, 19:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Die Beschreibung (Seminar, Termin Ort u.s.w.) sollte mittels des label-Elements erzeugt werden um eine Verknüpfung mit dem input-Element herzustellen.

Unnötige Elemente sollten gelöscht werden.

Die Ausrichtung erfolgt dann mittels des Flexbox-Modells: display: flex;

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.02.2016, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2013
Beiträge: 12
Momro befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Antwort!

Ohne DIVs, mit Label und mit Flex sieht es leider noch nicht viel besser aus:
https://jsfiddle.net/vda1bszt/

So wie ich das sehe, ist immer noch alles vertikal nach oben ausgerichtet, und den Abstand weiß ich jetzt leider auch nicht, wie man den wieder hinbekommt :-/

Und was meinst du mit "unnötige Elemente sollten gelöscht werden"?
Mit Zitat antworten
  #4 (permalink)  
Alt 21.02.2016, 19:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Und was meinst du mit "unnötige Elemente sollten gelöscht werden"?
Deine übermäßige Verwendung von div-Elementen, auch bekannt unter der Krankheit Divitis. Eine Heilung ist zwar schwierig, aber möglich - wenn der Patient mitarbeitet.

Zitat:
mit Flex sieht es leider noch nicht viel besser aus
Zum Flexbox-Modell gehören natürlich noch einige zusätzliche CSS-Anweisungen.

Zitat:
ist immer noch alles vertikal nach oben ausgerichtet,
Das ist auch gut so. Keine Ahnung warum Anfänger immer alles zentrieren wollen. Ich habe trotzdem mal ein Beispiel für eine vertikale Zentrierung der Zeilen mit Flexbox erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Formular 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         width: 94%;
         margin: 1rem auto;
      }
      form div {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
      }
      form div>* {
         padding: 0.3rem 0.5rem;
         margin: 0.5rem;
      }
      form div :nth-child(2n+1) {
         flex: 1 1 30%;
      }
      form div :nth-child(2n+2) {
         flex: 1 1 60%;
      }
   }

   </style>
</head>
<body>
   <h2>Senden Sie uns eine Nachricht:</h2>
   <section>
      <form id="formular" action="#" method="post">
         <div>

            <!-- autofocus gegebenenfalls löschen -->
            <label for="seminar">Seminar:</label>
            <input type="text" id="seminar" name="seminar" autofocus />

            <label for="terminort">Termin, Ort:</label>
            <input type="text" id="terminort" name="terminort" />

            <label for="reservierung">Hotelzimmer Reservierung von ... bis ...:</label>
            <input type="text" id="reservierung" name="reservierung" />

         </div>
      </form>
   </section>
</body>
</html>
Offiziell werde ich aber nie, nie, nie zugeben eine vertikale Zentrierung bei einem Formular erstellt zu haben.

Gruss

MrMurphy

Geändert von MrMurphy (21.02.2016 um 20:00 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.02.2016, 19:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2013
Beiträge: 12
Momro befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Deine übermäßige Verwendung von div-Elementen, auch bekannt unter der Krankheit Divitis. Eine Heilung ist zwar schwierig, aber möglich - wenn der Patient mitarbeitet.
[...]
Das ist auch gut so. Keine Ahnung warum Anfänger immer alles zentrieren wollen.
Danke für den Code. Sieht ja wirklich gut aus, auch wenn ich's noch kaum verstehe, aber ich probier einfach mal etwas damit.

Dein arroganter Ton war aber unnötig. Ohne den wärst du echt nett rübergekommen. Schade.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.02.2016, 20:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
wenn ich's noch kaum verstehe
Mal ein paar Infos zu Flexbox:

CSS3 Flexbox Tipps Tutorial Anleitung

Das Modell der flexiblen Boxen

CSS Flexible Box Layout Module - verschiedene Beispiele einzelner CSS3-Flexbox-Eigenschaften

Videos deutschsprachig:

https://www.youtube.com/watch?v=yTkV2_eJox0

https://www.youtube.com/watch?v=hlgsOIPvfdM

https://www.youtube.com/watch?v=xyLa...ScbpeX&index=4

Gruss

MrMurphy

Geändert von MrMurphy (21.02.2016 um 20:29 Uhr)
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
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
Wie kann ich Text innerhalb eines DIVs vertikal ausrichten? neffetshd CSS 9 22.11.2010 08:57
Bild vertikal zentriert in einem <div> ausrichten wolfgke CSS 3 07.09.2006 17:12
Vertikal zentriert ausrichten ... neurologic scientist CSS 4 03.08.2006 16:57
DIVs innerhalb eines DIV vertikal ausrichten Hausmeista CSS 5 21.06.2006 00:50


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.