nicht angemeldet
Hallo
ist es möglich mein HTML Formular ohne weiteren Klassen zu gestalten?
Ja. Ich habe mal ein Beispiel-CSS erstellt, dass ohne Änderungen an deinem zweiten Quelltext funktioniert:
#anfrage-startseite {
width: 96%;
margin: 1rem;
display: flex;
flex-wrap: wrap;
}
#anfrage-startseite :nth-child(1),
#anfrage-startseite :nth-child(3),
#anfrage-startseite :nth-child(5) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 26%;
order: 1;
}
#anfrage-startseite :nth-child(2),
#anfrage-startseite :nth-child(4),
#anfrage-startseite :nth-child(6) {
margin-bottom: 1rem;
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 26%;
order: 2;
}
#anfrage-startseite :nth-child(7) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
order: 3;
}
#anfrage-startseite :nth-child(8) {
margin-right: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
order: 3;
}
#anfrage-startseite :nth-child(9),
#anfrage-startseite :nth-child(11) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 34%;
order: 4;
}
#anfrage-startseite :nth-child(10),
#anfrage-startseite :nth-child(12) {
margin-right: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
order: 5;
}
#anfrage-startseite :nth-child(13) {
margin-right: 1rem;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 6;
}
}
@media only screen and (max-width: 750px) {
#anfrage-startseite {
width: 98%;
padding: 0.5rem;
margin: 1rem 0;
}
#anfrage-startseite :nth-child(1n+1) {
margin-right: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 51%;
order: 0;
}
}
Weitere Anpassungen sind natürlich noch möglich und sinnvoll.
Und noch mal der gesamte Quelltext:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Formular Layout 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%;
line-height: 1.3;
}
body {
margin: 0;
}
#anfrage-startseite {
width: 96%;
margin: 1rem;
display: flex;
flex-wrap: wrap;
}
#anfrage-startseite :nth-child(1),
#anfrage-startseite :nth-child(3),
#anfrage-startseite :nth-child(5) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 26%;
order: 1;
}
#anfrage-startseite :nth-child(2),
#anfrage-startseite :nth-child(4),
#anfrage-startseite :nth-child(6) {
margin-bottom: 1rem;
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 26%;
order: 2;
}
#anfrage-startseite :nth-child(7) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
order: 3;
}
#anfrage-startseite :nth-child(8) {
margin-right: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
order: 3;
}
#anfrage-startseite :nth-child(9),
#anfrage-startseite :nth-child(11) {
margin-right: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 34%;
order: 4;
}
#anfrage-startseite :nth-child(10),
#anfrage-startseite :nth-child(12) {
margin-right: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(50% - 1rem);
order: 5;
}
#anfrage-startseite :nth-child(13) {
margin-right: 1rem;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 6;
}
}
@media only screen and (max-width: 750px) {
#anfrage-startseite {
width: 98%;
padding: 0.5rem;
margin: 1rem 0;
}
#anfrage-startseite :nth-child(1n+1) {
margin-right: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 51%;
order: 0;
}
}
</style>
</head>
<body>
<section>
<form action="" id="anfrage-startseite">
<label for="name">Ihr Name <span class="req">*</span></label>
<input type="text" name="name" id="name" value="" required>
<label for="mail">Ihre E-Mail Adresse <span class="req">*</span></label>
<input type="email" name="mail" id="mail" value="" required>
<label for="telefon">Ihre Rückrufnummer</label>
<input type="tel" name="telefon" id="telefon" value="">
<label for="nachricht">Ihre Anfrage</label>
<textarea name="nachricht" id="nachricht" required></textarea>
<label for="budget">Wie hoch ist das Budget?</label>
<select name="budget" id="budget">
<option value="">Bitte auswählen</option>
<option value="500€ - 1.000€">500€ - 1.000€</option>
<option value="1.000€ - 2.000€">1.000€ - 2.000€</option>
<option value="2.000€ - 3.500€">2.000€ - 3.500€</option>
<option value="3.500€ - 5.000€">3.500€ - 5.000€</option>
<option value="5.000€ - 6.500€">5.000€ - 6.500€</option>
<option value="6.500€ - 8.500€">6.500€ - 8.500€</option>
<option value="10.000€+">10.000€+</option>
</select>
<label for="terminplanung">Terminplanung?</label>
<select name="terminplanung" id="terminplanung">
<option value="">Bitte auswählen</option>
<option value="Sofort">Sofort</option>
<option value="In den nächsten 4 Wochen">In den nächsten 4 Wochen</option>
<option value="In den nächsten 2 Monaten">In den nächsten 2 Monaten</option>
<option value="3 Monate - 4 Monate">3 Monate - 4 Monate</option>
<option value="5 Monate und mehr...">5 Monate und mehr...</option>
</select>
<button type="button" id="anfrage-abschicken">Anfrage abschicken</button>
</form>
</section>
</body>
</html>
Und kurzzeitig noch mal auf meinem Testaccount zum direkten Ausprobieren:
http://boratb.bplaced.net/index8.html
Gruss
MrMurphy
Der Martin
Gunnar Bittersmann
Matthias Apsel