nicht angemeldet
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Matthias Apsel
Orlok
Der Martin
Auge
Gunnar Bittersmann
Auge
Auge
Gunnar Bittersmann
Guten Morgen,
mir gefällt dieses Suchformular sehr: https://derjobbote.de/stelle-suchen.html
Meine Frage dazu ist, ob ich wirklich so viele verschieden divs benötige um diese Aussehen zu erreichen?
<form action="#" method="post">
<input type="hidden" name="tx_dmmjobcontrol_pi1[search_submit]" value="Suchen">
<div class="groupInput clearfix">
<div class="searchKeyword clearfix">
<label class="input" for="tx_dmmjobcontrol_pi1[search][keyword]"> <span>Suchbegriff</span>
<input type="text" name="tx_dmmjobcontrol_pi1[search][keyword]" value="" class="dmmjobcontrol_input dmmjobcontrol_keyword">
</label>
</div>
<div class="searchSector clearfix">
<label class="input" for="tx_dmmjobcontrol_pi1[search][sector]"> <span>Branche</span> <select name="tx_dmmjobcontrol_pi1[search][sector][]" class="dmmjobcontrol_select dmmjobcontrol_sector"><option value="-1"></option><option value="1">Büro, Management, Verwaltung</option><option value="2">Einzelhandel, Verkauf, Vertrieb, Dialogmarketing</option><option value="14">Friseur und Kosmetik, Beauty-Branche</option><option value="3">Handwerk und Bauwesen</option><option value="4">Hotel-, Gastgewerbe, Catering, Tourismus</option><option value="5">Ingenieure und technische Berufe</option><option value="6">IT, Soft- und Hardware</option><option value="7">Land- und Forstwirtschaft, Gartenbau, Umwelt</option><option value="8">Medizin, Gesundheit, Soziales, Bildung</option><option value="9">Metall-, Maschinen-, Fahrzeugbau, KFZ</option><option value="16">öffentlicher Dienst, Verwaltung</option><option value="10">Personal, Recht, Steuern, Finanzen, Controlling</option><option value="11">sonstige Dienstleistungen, Produktion, Helfer</option><option value="12">Verkehr, Lager, Logistik</option><option value="13">Versicherung, Banken, Immobilien</option><option value="15">Werbung, Marketing, Medien</option></select> </label>
</div>
<div class="searchRegion clearfix">
<label class="input" for="tx_dmmjobcontrol_pi1[search][region]"> <span>Ort/Region</span> <select name="tx_dmmjobcontrol_pi1[search][region][]" class="dmmjobcontrol_select dmmjobcontrol_region"><option value="-1"></option><option value="8">Landkreis Rostock</option><option value="1">Ludwigslust-Parchim</option><option value="2">Mecklenburgische Seenplatte</option><option value="10">nördliches Brandenburg</option><option value="3">Nordwestmecklenburg</option><option value="4">Rostock</option><option value="5">Schwerin</option><option value="6">Vorpommern-Greifswald</option><option value="7">Vorpommern-Rügen</option></select> </label>
</div>
<div class="searchCategory clearfix">
<label class="input" for="tx_dmmjobcontrol_pi1[search][category]"> <span>Kategorie</span> <select name="tx_dmmjobcontrol_pi1[search][category][]" class="dmmjobcontrol_select dmmjobcontrol_category"><option value="-1"></option><option value="1">AN-Überlassung</option><option value="2">Ausbildung/Studium</option><option value="3">Befristung</option><option value="4">Festanstellung</option><option value="8">Franchise</option><option value="5">Freiberuflich</option><option value="10">Mini-Job</option><option value="9">Praktika, Werkstudenten</option><option value="6">Selbstständig, HGB</option></select> </label>
</div>
</div>
<div class="buttonGroup clearfix">
<input style="float: right" type="submit" name="tx_dmmjobcontrol_pi1[search_submit]" value="Suchen" class="dmmjobcontrol_submit dmmjobcontrol_search_submit">
<input style="float: right" type="submit" name="tx_dmmjobcontrol_pi1[reset_submit]" value="Zurücksetzen" class="dmmjobcontrol_submit dmmjobcontrol_search_reset">
</div>
</form>
Hallo HTML / CSS Anfänger,
Guten Morgen,
mir gefällt dieses Suchformular sehr: https://derjobbote.de/stelle-suchen.html
Meine Frage dazu ist, ob ich wirklich so viele verschieden divs benötige um diese Aussehen zu erreichen?
Es könnte sicher ohne das eine oder andere div-Element gehen. Allerdings würde ich auf float verzichten und ich halte auch den reset-button für überflüssig. Zudem würde ich auch button- statt input-Elemente verwenden.
Bis demnächst
Matthias
Hallo,
Es könnte sicher ohne das eine oder andere div-Element gehen. Allerdings würde ich auf float verzichten und ich halte auch den reset-button für überflüssig. Zudem würde ich auch button- statt input-Elemente verwenden.
vielleicht so?
section form {
display: flex;
width: 50%;
margin: 0 auto;
}
section form label {
display: none;
}
.t1 {flex: 30% 0 0;}
.t2 {flex: 30% 0 0;}
.t3 {flex: 30% 0 0;}
<section>
<form name="suche" method="post" action="">
<span class="t1">
<label for="branche">Branche</label>
<input type="text" name="branche" id="branche" value="">
</span>
<span class="t2">
<label for="ort">Ort</label>
<input type="text" name="ort" id="ort" value="">
</span>
<span class="t3">
<label for="kategorie">Kategorie</label>
<input type="text" name="kategorie" id="kategorie" value="">
</span>
<button type="submit" name="abschicken">Abschicken</button
</form>
</section>
Guten Morgen,
Meine Frage dazu ist, ob ich wirklich so viele verschieden divs benötige um diese Aussehen zu erreichen?
Och das kriegst ooch ohne div's hin. Aber div's in einem <form>? Guckst Dir mal besser <fieldset> an zum gruppieren ist das. Und mach mal den viewport kleiner, da siehst du das next problem. Idealerweise stehen dann (aufm smartphone) die <input>'s untereinander. Auf der von Dir verlinkten Seite passiert das nicht und der User muss horizontal scrollen.
mfg
Hallo,
Och das kriegst ooch ohne div's hin. Aber div's in einem <form>? Guckst Dir mal besser <fieldset> an zum gruppieren ist das. Und mach mal den viewport kleiner, da siehst du das next problem. Idealerweise stehen dann (aufm smartphone) die <input>'s untereinander.
das dürfen wir derzeit noch NICHT berücksichtigen. Wir erstellen derzeit eine kleine Seite nur für den Desktop. In den nächsten Stunden kommt dann wie wir das ganze auf ein responsives Design umstellen.
Unsere Aufgabe ist: Schaut euch im Web um und sucht euch eine einfach Suchleiste (drei Dropdowns) die euch gefällt und versucht diese nachzubauen.
OK dann schau ich mal wie ich das ohne die div's hinbekomme.
@@HTML / CSS Anfänger
das dürfen wir derzeit noch NICHT berücksichtigen. Wir erstellen derzeit eine kleine Seite nur für den Desktop. In den nächsten Stunden kommt dann wie wir das ganze auf ein responsives Design umstellen.
Au Backe! Schule? Lernt Ihr da auch was Gescheites?
Fürn Desktop Erstelltes nachträglich responsiv zu machen geht oft schief. Besser ist’s andersrum: mobile first.
Unsere Aufgabe ist: Schaut euch im Web um und sucht euch eine einfach Suchleiste (drei Dropdowns) die euch gefällt und versucht diese nachzubauen.
OK dann schau ich mal wie ich das ohne die div's hinbekomme.
Ja, geht. (Da hatte ich doch fast schon die Lösung verraten!)
Markup:
<form>
<input type="search"/>
<select></select>
<select></select>
<select></select>
<button type="reset">Zurücksetzen</button>
<button type="submit">Suchen</button>
</form>
Ergebnis:
LLAP 🖖
Hallo,
Ja, geht. (Da hatte ich doch fast schon die Lösung verraten!)
Markup:
<form> <input type="search"/> <select></select> <select></select> <select></select> <button type="reset">Zurücksetzen</button> <button type="submit">Suchen</button> </form>Ergebnis:
dieses Ergebnis hast du nur mit diesen 8 Zeilen Code und irgendeinem CSS hinbekommen?
So ganz ohne Grafiken, Tabellen und div´s? Wahnsinn
Der reset Button lasse ich weg.
@@HTML / CSS Anfänger
dieses Ergebnis hast du nur mit diesen 8 Zeilen Code und irgendeinem CSS hinbekommen?
So ganz ohne Grafiken, Tabellen und div´s? Wahnsinn
Ja.
Grafiken für die Button-Hintergründe sind unnötig, das tut linear-gradient.
Ansonsten ist Flexbox im Spiel, wobei man (fast) dasselbe auch mit display: inline-block hinbekommen könnte.
Noch ein bisschen box-shadow für den Schatteneffekt; wobei der aber völlig unnatürlich ist.
LLAP 🖖
Hallo,
Ja.
Grafiken für die Button-Hintergründe sind unnötig, das tut
linear-gradient.Ansonsten ist Flexbox im Spiel, wobei man (fast) dasselbe auch mit
display: inline-blockhinbekommen könnte.
ich habe mit Gimp eine schöne Hintergrundgrafik gemacht dazu zwei große divs in das zweite habe ich den button gepackt und in das erste drei weitere divs mit jeweils einem select und hab diesen die Breite 33,3% gegeben und float: left. Passt so und es sieht gut aus.
Hat sich also erledigt.
Hallo HTML / CSS Anfänger ,
Grafiken für die Button-Hintergründe sind unnötig, das tut
linear-gradient.
ich habe mit Gimp eine schöne Hintergrundgrafik gemacht dazu zwei große divs in das zweite habe ich den button gepackt und in das erste drei weitere divs mit jeweils einem select und hab diesen die Breite 33,3% gegeben und float: left. Passt so und es sieht gut aus.
Hat sich also erledigt.
Deine Entscheidung. Keine gute.
Bis demnächst
Matthias
Hallo,
Deine Entscheidung. Keine gute.
doch eine sehr gute Idee. Ich habe dafür eine 1 erhalten, also kann es NICHT falsch sein so wie DU behauptest. DIVs sind robust, stören keinem und sind um Sachen anzuordnen. Selbst später bei einem respnsivem Design kann man das float:right aufheben und die Felder schön untereinander platzieren.
Hallo
Deine Entscheidung. Keine gute.
doch eine sehr gute Idee. Ich habe dafür eine 1 erhalten, also kann es NICHT falsch sein so wie DU behauptest. DIVs sind robust, stören keinem und sind um Sachen anzuordnen. […]
Eine kritische Sicht ist eine gute Eigenschaft, aber du solltest deinem Lehrer gegenüber nicht weniger kritisch sein als gegenüber Leuten, die dir in einem Forum Antworten geben. Sprich, nur weil du für etwas eine gute Note erhalten hast, heißt das nicht zwangsläufig, dass es nicht falsch sein kann!
Die genannten DIV-Elemente sind dazu gedacht, einen Abschnitt auszuzeichnen, für den es kein semantisch passenderes Element gibt. Mit Betonung auf auszeichnen. DIVs sind kein Gestaltungsmittel, denn dafür ist CSS da, und dass hier eine Lösung ohne DIVs möglich gewesen wäre, hatte Gunnar in seinem Beitrag schon gesagt und sogar gezeigt (bevor er den Link zur Lösung wieder gelöscht hatte).
Aus deinem anderen Beitrag:
[…] Schade hier im Forum sitzen wohl nur Arrogante Menschen die einem etwas hinknallen ohne etwas weiter dazu zu sagen.
Dass Gunnar den Link aus seinem Beitrag wieder herausgenommen hat, hat nichts mit Überheblichkeit zu tun, sondern damit, dass es hier™ das Ziel ist, Hilfe zur Selbsthilfe zu gewähren, den Fragesteller also zu motivieren, unter Anleitung aber doch selbstständig die Lösung seines Problems zu erarbeiten, statt ihm eine fertige Lösung vor den Latz zu knallen.
Und dich anzuleiten, beziehungsweise dir Hinweise in Bezug auf die richtige Lösung zukommen zu lassen, dass hat Gunnar versucht, du bist bloß nicht darauf eingegangen.
Außerdem dürfte ein Grund gewesen sein, dass gerade weil es sich hier ja wohl um ein Schulprojekt handelt, es schlicht unfair wäre, dir die komplette Lösung praktisch ohne Eigenleistung zu servieren, damit du sie dann 1:1 abgeben kannst.
Gruß,
Orlok
Hallo,
Eine kritische Sicht ist eine gute Eigenschaft, aber du solltest deinem Lehrer gegenüber nicht weniger kritisch sein als gegenüber Leuten, die dir in einem Forum Antworten geben. Sprich, nur weil du für etwas eine gute Note erhalten hast, heißt das nicht zwangsläufig, dass es nicht falsch sein kann!
wenn mein Lehrer keine Ahnung hat, dann sollte ich ihn am Donnerstag mal fragen von was er überhaupt Ahnung hat. Ich weiß nur dass er eine Webagentur hat um die 60 Jahre ist und das was er an der Wand zeigt kommt gut rüber und vor allem sehr flüssig und schnell. Und wenn es nicht richtig gewesen wäre, warum habe ich dann eine 1 erhalten? Dann hätte er mir auch eine schlechtere Note geben können und sagen, du musst das so und so machen?
Die genannten DIV-Elemente sind dazu gedacht, einen Abschnitt auszuzeichnen, für den es kein semantisch passenderes Element gibt. Mit Betonung auf auszeichnen. DIVs sind kein Gestaltungsmittel, denn dafür ist CSS da, und dass hier eine Lösung ohne DIVs möglich gewesen wäre, hatte Gunnar in seinem Beitrag schon gesagt und sogar gezeigt (bevor er den Link zur Lösung wieder gelöscht hatte).
Wie er aber hier selber zugegeben hat: http://forum.selfhtml.org/self/2015/aug/23/suchformular/1648571#m1648571 funktioniert es nicht zuverlässig in allen Browsern. Hier habe ich aufgezählt, welche Browser funktionieren müssen: http://forum.selfhtml.org/self/2015/aug/23/suchformular/1648575#m1648575 also wäre dieses Beispiel total nach hinten losgegangen und wir bestimmt wieder bei meinen divs geladen wären oder?
Hallo,
ich habe es heute nochmals versucht aus dem Code was du einem einfach kommentarlos so hinknallst etwas zu machen
<form class="suchen">
<select></select>
<select></select>
<select></select>
<button type="submit">Suchen</button>
</form>
body {
width: 500px;
margin: 0 auto;
}
.suchen {
width: 100%;
padding: 0.5em;
background: #efefef;
display: flex;
}
.suchen select {
width: 33.33%;
padding: 3px;
margin: 5px
}
.suchen button {
display: block;
}
Mir ist es ein Rätzel wie du den Button in die zweite Zeile bekommst mit dem Background herum. Aber egal, ich musste es heute so Abgeben. Ich wollte es nur für mich nochmals testen.
Schade hier im Forum sitzen wohl nur Arrogante Menschen die einem etwas hinknallen ohne etwas weiter dazu zu sagen. Schade, kein Wunder sagt unser Lehrer meidet Selfhtml. Jetzt weiß ich was er damit meint.
Viel Spaß euch noch in eurer arroganten Runde.
Hi!
Warum dein Lehrer sagt, dass Ihr SELFHTML meiden sollt weiss ich ehrlich gesagt nicht. Vielleicht, damit ihr nicht seien Defizite aufgezaehlt bekommt?! (Ok DAS war jetzt etwas arrogant) Eventuell meint er aber auch nur die alte (veraltete) Doku?
Gunnar hat Dir keine Loesung gegeben, weil er nicht deine Aufgabe fuer dich machen wollte, nachdem herauskam, dass es wohl fuer die Schule ist. Ich hab hier auf der Arbeit grad leider keinen Browser, der aktuelles HTML/CSS beherrscht. Ich versuchs mal so:
Gunnar? zeigst Du mal eben, wie Du das gemacht hast? Interessiert auch andere. Danke! :)
Gruss Steel
@@HTML / CSS Anfänger
Schade hier im Forum sitzen wohl nur Arrogante Menschen die einem etwas hinknallen ohne etwas weiter dazu zu sagen.
Das hast du etwas in den falschen Hals gekriegt. Aber in den völlig falschen.
Ich hatte einen Codepen erstellt und hier verlinkt. Dann hab ich gelesen, dass du das für die Schule brauchst. Da werd ich einen Teufel tun und dir eine fertige Lösung präsentieren, die du dann als die deine abgeben kannst.
Also hab ich den Pen wieder gelöscht und mein Posting editiert, so dass nur noch das Markup übrigblieb (das war ja meine Aussage, dass es völlig ohne div geht), und noch einen Screenshot angehängt.
Im nächsten Posting hab ich dann auch den Deckel meiner Schatztruhe angehoben und linear-gradient, Flexbox und box-shadow vorkucken lassen.
Jetzt, wo die Aufgabe wohl durch ist, kann ich dir auch meine Lösung verraten.
Ergänzung: Funktioniert wie gezeigt im Firefox. Andere Browser könnten sich bei Flexbox oder beim Stylen von Eingabefelden und besonders select anders verhalten, so dass da noch kleine Anpassungen nötig sein könnten.
Und bevor du das nächste Mal jemandem Arroganz vorwirfst, denkst du nochmal nach. Sonst stehst du als der Arrogante da.
LLAP 🖖
Hallo,
Ich hatte einen Codepen erstellt und hier verlinkt. Dann hab ich gelesen, dass du das für die Schule brauchst. Da werd ich einen Teufel tun und dir eine fertige Lösung präsentieren, die du dann als die deine abgeben kannst.
dein Code wie ich hin hier http://codepen.io/gunnarbittersmann/pen/YXmXpy?editors=010 sehe, hätte ich nie abgeben dürfen.
a) wäre die Gefahr viel zu groß dass mein Lehrer den Code bei Google eingibt und dann auf dieses Beispiel gelangt 6!
b) wie du selber schreibst geht er wohl nicht in allen (wichtigen) Browsern. Unter wichtig zählen wir IE 9 / 10 / 11 / 12? und Edge, Firefox in der aktuellen - 2 Versionen, Google Chrome in der aktuellen Version - 2 Versionen und Opera in der aktuellen Version - 2 Versionen.
c) wenn ich mir dein Code im Browser (Google Chrome) anschaue ich in ein Select Feld klicke springt der obere Rahmen, auch hier hätte ich eine schlechte Note bekommen.
Wie du siehst komme ich um eine div Lösung nicht drum herum so dass es in allen Browsern ohne wenn und aber funktioniert.
Im nächsten Posting hab ich dann auch den Deckel meiner Schatztruhe angehoben und
linear-gradient, Flexbox undbox-shadowvorkucken lassen.
Mit Flex hatte ich hier schon Angefangen: http://forum.selfhtml.org/self/2015/aug/23/suchformular/1648534#m1648534 dann hättest du auch hier schreiben können, dass ich auf dem richtigen Weg bin. Aber egal, jetzt ist es eh schon durch.
Hallo,
hier meine überarbeitete Version, die in allen Browsern funktioniert. Zwar nicht so schön wie dein Beispiel aber immerhin.
section{
width: 500px;
margin: 0 auto;
}
.form_suche {
width: 100%;
margin-top: 3em;
padding: 1em;
box-sizing: border-box;
text-align: center;
}
.div_oben {
background-color: #efefef;
padding: 1em;
width: 100%;
}
.select_1 {
display: inline-block;
width: 30%;
}
.select_2 {
display: inline-block;
width: 30%;
}
.select_3 {
display: inline-block;
width: 30%;
}
.btn_suche {
width: 50%;
background-color: #efefef;
padding-bottom: 10px;
margin: 0 auto;
}
<section>
<form name="form1" method="post" action="" class="form_suche">
<div class="div_oben">
<div class="select_1">
<select></select>
</div>
<div class="select_2">
<select></select>
</div>
<div class="select_3">
<select></select>
</div>
</div>
<div class="btn_suche">
<button type="submit">Suchen</button>
</div>
</form>
Hi,
hier meine überarbeitete Version, die in allen Browsern funktioniert. Zwar nicht so schön wie dein Beispiel aber immerhin.
vor allem hast du immer noch zahlreiche unnötige div-Elemente drin. Zwei davon, nämlich div.div_oben und div.btn_suche, sind nicht komplett unsinnig, aber anstatt div wäre hier eher fieldset angebracht (das hat schon jemand anders vorgeschlagen), das eigentlich zur Gruppierung von Formularelementen gedacht ist.
Die anderen drei div-Elemente sind aber komplett überflüssig, denn sie "gruppieren" nur jeweils ein einziges Element. Die Formatierungen könntest du ebensogut direkt auf die select-Elemente anwenden, dafür braucht's keinen div-Container drumherum. Das würde den Code nochmal kompakter und übersichtlicher machen.
So long,
Martin
Hallo,
vor allem hast du immer noch zahlreiche unnötige div-Elemente drin. Zwei davon, nämlich div.div_oben und div.btn_suche, sind nicht komplett unsinnig, aber anstatt div wäre hier eher fieldset angebracht (das hat schon jemand anders vorgeschlagen), das eigentlich zur Gruppierung von Formularelementen gedacht ist.
Die anderen drei div-Elemente sind aber komplett überflüssig, denn sie "gruppieren" nur jeweils ein einziges Element. Die Formatierungen könntest du ebensogut direkt auf die select-Elemente anwenden, dafür braucht's keinen div-Container drumherum. Das würde den Code nochmal kompakter und übersichtlicher machen.
hab es nochmals etwas überarbeitet, was sagst du dazu?
section{
width: 500px;
margin: 0 auto;
}
.form_suche {
width: 100%;
margin-top: 3em;
padding: 1em;
box-sizing: border-box;
text-align: center;
}
fieldset {
background-color: #efefef;
padding: 1em;
width: 100%;
border: none;
}
select {
display: inline-block;
width: 30%;
}
.btn_suche {
width: 50%;
background-color: #efefef;
padding-bottom: 10px;
margin: 0 auto;
}
<section>
<form name="form1" method="post" action="" class="form_suche">
<fieldset>
<select></select>
<select></select>
<select></select>
</fieldset>
<div class="btn_suche">
<button type="submit">Suchen</button>
</div>
</form>
</section>
Hallo
hab es nochmals etwas überarbeitet, was sagst du dazu?
Nochmal ein bisschen kompakter:
form[name=form1] { /* spreche das Formular über den Wert des Attributs „name“ an */ width: 100%; margin-top: 3em; padding: 1em; box-sizing: border-box; text-align: center; }<section> <form name="form1" method="post" action=""> <!-- weitere Formularelemente --> </form> </section>
Wenn du die Klasse .form_suche ausschließlich dazu benutzt, das Suchformular zu identifizieren und sie nicht noch zusätzlich z.B. per JavaScript ansprichst, kannst du sie auch weglassen. Elemente, hier das Formular, lassen sich per CSS auch über Attribute und Attributwerte ansprechen. Hier identifiziert der Wert „form1“ des Attributs „name“ das Formular, womit die Klassenangabe obsolet wird (so sie nicht anderweitig benutzt wird).
Tschö, Auge
@@Auge
Wenn du die Klasse .form_suche ausschließlich dazu benutzt, das Suchformular zu identifizieren und sie nicht noch zusätzlich z.B. per JavaScript ansprichst, kannst du sie auch weglassen.
Auch dann kann man sie weglassen, denn …
Elemente, hier das Formular, lassen sich per CSS auch über Attribute und Attributwerte ansprechen.
… das ist in JavaScript genauso möglich wie in CSS.
Im Fall von name sogar ganz einfach: document.form1
LLAP 🖖
Hallo
Wenn du die Klasse .form_suche ausschließlich dazu benutzt, das Suchformular zu identifizieren und sie nicht noch zusätzlich z.B. per JavaScript ansprichst, kannst du sie auch weglassen.
Auch dann kann man sie weglassen, denn …
Elemente, hier das Formular, lassen sich per CSS auch über Attribute und Attributwerte ansprechen.
… das ist in JavaScript genauso möglich wie in CSS.
Im Fall von
namesogar ganz einfach:document.form1
Du hast natürlich, insbesondere in Sachen Formulare, die schon immer™ direkt ansprechbar waren, recht. Ich wollte nur vermeiden, für den OP eine weitere Baustelle aufzumachen. Manchmal ist es besser, eine Sache fertig zu machen, ohne sich dabei in -zig Ästen von Nebenwirkungen von Änderungen zu verheddern. Das gilt insbesondere dann, wenn man diesen Baum nicht als ganzes sehen und überblicken kann, weil man zu nahe am zu bearbeitenden Ast steht oder aufgrund fehlender Erfahrungen mit Ästen schlecht sieht.
Tschö, Auge
Hallo,
form[name=form1] { /* spreche das Formular über den Wert des Attributs „name“ an */ width: 100%; margin-top: 3em; padding: 1em; box-sizing: border-box; text-align: center; }<section> <form name="form1" method="post" action=""> <!-- weitere Formularelemente --> </form> </section>
Wenn du die Klasse .form_suche ausschließlich dazu benutzt, das Suchformular zu identifizieren und sie nicht noch zusätzlich z.B. per JavaScript ansprichst, kannst du sie auch weglassen. Elemente, hier das Formular, lassen sich per CSS auch über Attribute und Attributwerte ansprechen.
danke für deine Antwort. Eine Frage dazu hätte ich noch wie zuverlässig ist diese Schreibweise in älteren Browsern und vor allem dem IE?
Hallo
Wenn du die Klasse .form_suche ausschließlich dazu benutzt, das Suchformular zu identifizieren und sie nicht noch zusätzlich z.B. per JavaScript ansprichst, kannst du sie auch weglassen. Elemente, hier das Formular, lassen sich per CSS auch über Attribute und Attributwerte ansprechen.
danke für deine Antwort. Eine Frage dazu hätte ich noch wie zuverlässig ist diese Schreibweise in älteren Browsern und vor allem dem IE?
Definiere „älter“, definiere die Mindestversion des IE!
Auf den in der oben verlinkten Seite aufgeführten Detailseiten gibt es die Infos zu den jeweils ältesten unterstützenden Browserversionen. Wenn du nun – aus welchen Grnden auch immer – Browsern, die definitiv ins Museum gehören, abweichende CSS-Regeln verpassen willst/musst, kannst du das z.B. für alte IE-Versionen (für diesen Fall < 7) mit Conditional Comments machen. Ansonsten sind die Browserversionen, die diese Technik unterstützen, selbst so alt, dass sie heute irrelevant sind.
Tschö, Auge
Hallo,
Eine Frage dazu hätte ich noch wie zuverlässig ist diese Schreibweise in älteren Browsern und vor allem dem IE?
Das Wiki gibt Auskunft zu Attributsselektoren
@@August
Das Wiki gibt Auskunft zu Attributsselektoren
Can I use auch.
LLAP 🖖
@@HTML / CSS Anfänger
mir gefällt dieses Suchformular sehr: https://derjobbote.de/stelle-suchen.html
Generell ist es keine gute Idee, die Beschriftung eines Eingabefeldes bei schon erfolgter Eingabe nicht mehr anzuzeigen (d.h. sich so verhalten zu lassen wie einen Placeholder).
Bei einem Suchformular mit nur einem Eingabefeld gefolgt von einem Button „suchen“ mag das noch funktionieren. Hier sind aber noch die Dropdowns im Spiel. Möglich wäre sowas wie
[ ] in [ ] [ ] [ ]
[suchen]
Der Abbrechen-Button ist – wie Matthias bereits sagte – völlig überflüssig.
Meine Frage dazu ist, ob ich wirklich so viele verschieden divs benötige um diese Aussehen zu erreichen?
Nein. Kein einziges. (Auflösung in ein paar Tagen.)
LLAP 🖖