|
|||
Mahlzeit,
ich versuchs mal Schrittweise zu erklären: Dropdown soll left1 bis rechts zum Rand füllen - soll so breit sein wie der längste Eintrag. Listfeld soll so groß werden, dass es bis left3 reicht. Sind mehr Eintrag vorhanden als reinpassen (rein optisch) soll es scrollbar sein. Listfeld- und Dropdowneinträge sollen also nicht umgebrochen werden. Ausgeklapptes Dropdown soll genauso breit wie zugeklapptes Dropdown sein. Pfeil im Dropdown soll ganz rechts im Dropdown angeordnet sein. Abstand zwischen Dropdown und Dropdown ausgeklappt soll 0 sein. Ist es möglich, dass sich das Dropdown per Mouseover ausklappt ohne JavaScript zu benutzen? Ich hoffe ich konnte mich jetzt verständlicher ausdrücken!? Geändert von halloICKEbins2 (18.12.2018 um 12:46 Uhr) |
Sponsored Links |
|
||||
https://codepen.io/basti1012/pen/oJzJja?editors=1100 also das dropmenü ist so jetzt oben und unten gleich breit. aberdu willst jetzt das der dropdown automatisch größer wird wenn der Text auch länger wird ? Ich wei0 gerade noch nicht wie man das ohne javascript machen kann weil die container um den dropdown dann ja auch wachsen müßen.
Das mit den hover öffnen geht auch schon. Jetzt mustdu mal kucken was noch geändert werden müßte weil du mal geschrieben hast das die volle höhe benutzt werden soll und dann auf den Bildern wieder anders rüber kommt. Also bauen wir jetzt bei mein Beispiel weiter bis dein Ziel erreicht ist |
|
|||
Wir kommen der Sache langsam näher ...
Liste soll also auffüllen auf 100% auch wenn nicht genug Einträge im Listefeld vorhanden sind. Wenn zu viele Einträge da sind und er über die 100% gehen würde, soll er im Listfeld den Scrollbar machen. Der längste Eintrag im Listfeld soll die Breite bestimmen...also keine Umbrüche des Textes. Der längste Eintrag im Dropdownfeld soll die Breite bestimmen...also keine Umbrüche im Text. Dropdown per Mouseover wird ausgeklappt aber leider komme ich nicht in den aufgeklappten Teil, da er ihn sobald die Maus den oberen Teil verlässt wieder zuklappt. In diesem Teil soll aber die Auswahl stattfinden! Beim Öffnen des Dropdowns soll das ausgeklappte Dropdown nicht das Listfeld nach unter verschieben sondern überlagern. |
|
||||
das die umgebungs Container die Breite des Inhalts annehmen dachte ich erst das es ohne Javascript nicht geht. Habe das erstmal hinbekommen. Man könnte das bestimmt auch noch anders Regeln aber solange man noch am bauen ist lass ich es erstmal so bis das Endergebniss passt. Wenn das Ergebniss irgendwann mal stimmt kann man ja nochmal kucken ob es noch andere möglichkeiten gibt. Aber kuck erstmal wie weit das jetzt ist und ob es schon besser passt
https://codepen.io/basti1012/pen/oJzJja?editors=1100 |
|
|||
Klappt schon mal alles super...habe auch nichts gefunden, was nicht gewollt ist vom Verhalten her!
Vielen vielen Dank für das "dahinter klemmen"! Habe nur noch ein paar Verständnisfragen: 1.) Gibt es einen Grund warum du "display: -webkit-flex;" und "display: -ms-flexbox;" im aside.right-container und aside.left-container weggelassen hast? 2.) Wäre es bei "flex: 1;" nicht besser "flex: 1 auto;" zu schreiben (siehe https://pmueller.de/flexbox-ie-flex1/)? 3.) Warum nur "<!DOCTYPE HTML>" anstatt "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"? Und ein anderes kleines Problem: Wie kann ich ich eine Grafik in einem Container skalieren? Also nicht die Grafik soll entscheiden wie groß der Container wird sondern der Container soll dies bestimmen! HTML-Code:
<div class="flex-container1"> <div class="button1"> <button type="submit" name="button1" value="" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <p class="headline">HEADLINE</p> </button> </div> <div class="button2"> <button type="submit" name="button2" value="button2" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <img src="button1.png"> </button> </div> </div> Geändert von halloICKEbins2 (19.12.2018 um 16:10 Uhr) |
|
|||
Ich hoffe die Fragen darf ich auch beantworten:
@1: Präfixe werden heutzutage selten noch wo "fix" dazugeschrieben, die werden automatisch beim erstellen vom CSS (aus scss zb) generiert. Bei codepen gibt es das nicht und das war wohl mehr automatisch dass er die mal hinzugefügt hat und mal nicht. Wirklich relevant (für moderne Browser) ist nur die Version ohne Präfix. Und da es hier doch wohl nur um ein Übungsbeispiel geht doch hoffentlich auch ausreichend wenn nicht jeder Browser unterstützt wird. @2: Auch hier: wenn man alle älteren Browser unterstützen muss dann muss man zusätzliche Werte verwenden, er hat dir eine Version gebastelt, die in einem modernen Browser funktioniert. Wenn du auch Unterstützung für ältere Browser willst dann kannst du das natürlich jederzeit anpassen. @3: Weil HTML5 heutzutage standardmäßig verwendet wird. Oder hast du einen speziellen Grund auf HTML4 zu setzen? |
|
|||
Natürlich ist mir jede Antwort willkommen
Die Übungsbeispiel wurden von mir schon real umgesetzt und in den meisten Fällen wird als Browser Chromium durch den Nutzer verwendet, allerdings wäre natürlich eine Umsetzung auf allen gängigen Browser wünschenswert. Allerdings kann ich nicht abschätzen, welchen Aufwand dies bedeuten würde? Habe diesbezüglich auch nicht getestet! Gibt es hierfür irgendeine Art Immulator oder so etwas? HTML5 ist völlig OK - von meiner Seite gibt es dort keine Präferenzen! |
Sponsored Links |
|
|||
Vielleicht habe ich dich jetzt falsch verstanden aber nicht als background-Bild! Der Headline Bereich besteht eigentlich aus 3 Bereichen nebeneinander (links die Überschrift, dann 7 Buttons und rechts der Button, welcher "angepasst werden soll".
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Nach Benutzung des Dropdown Feldes, Aktion starten | Marlon | (X)HTML | 0 | 09.03.2016 14:40 |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 15:11 |