zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eigene Dropdown - auf 100% des längsten Eintrags sowie Verlinkung über ganzen Länge

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 18.12.2018, 12:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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!?
Angehängte Grafiken
Dateityp: png p1b.png (25,8 KB, 36x aufgerufen)
Dateityp: png p2b.png (21,0 KB, 36x aufgerufen)
Dateityp: png p3b.png (25,9 KB, 36x aufgerufen)
Dateityp: png p4b.png (12,1 KB, 36x aufgerufen)

Geändert von halloICKEbins2 (18.12.2018 um 12:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 18.12.2018, 15:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

ja , ich komme damit schon mal etwas klarer. ich versuche mal gerade waszu basteln und dann sehen wir mal weiter
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 18.12.2018, 16:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #14 (permalink)  
Alt 18.12.2018, 19:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: png q1.png (14,2 KB, 31x aufgerufen)
Dateityp: png q2.png (39,8 KB, 30x aufgerufen)
Dateityp: png q3.png (64,7 KB, 30x aufgerufen)
Dateityp: png q4.png (56,8 KB, 31x aufgerufen)
Mit Zitat antworten
  #15 (permalink)  
Alt 18.12.2018, 23:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #16 (permalink)  
Alt 19.12.2018, 16:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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>
Wenn HEADLINE jetzt 30px groß ist soll es der Button auch werden!

Geändert von halloICKEbins2 (19.12.2018 um 16:10 Uhr)
Mit Zitat antworten
  #17 (permalink)  
Alt 19.12.2018, 16:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.998
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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?
Mit Zitat antworten
  #18 (permalink)  
Alt 19.12.2018, 20:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #19 (permalink)  
Alt 19.12.2018, 22:21
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 145
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Ich hoffe die Fragen darf ich auch beantworten:
Oh ja gerne. Du kannst das bestimmt besser als ich ,weil für meine erklärungen
brauch man meißt nee Anleitung


Zitat:
Zitat von halloICKEbins2 Beitrag anzeigen
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!
Eigentlich sollte das als Background Bild kein problem sein.Teste ich aber gleich mal.

Zitat:
Zitat von halloICKEbins2 Beitrag anzeigen
Wenn HEADLINE jetzt 30px groß ist soll es der Button auch werden!
Verstehe ich nicht. Headline ist in dein Fall ja nur die Überschrift.
Ich hatte mich sowieso schon gefragt warum du das alles mit Buttons gemacht hast ? Ich wollte die eigentlich schon alle raus machen. Dachte aber du wirst schon deine Gründe haben und hatte die dann alle so gelassen.
Den Button so groß wie den Headline zu machen könnte auch mit width 100% gehen.
Doch wäre es besser wenn ich ertmal weiß was du damit genau meinst .
Wozu sind denn deine ganzen Buttons ?
Die ganzen Menüs könnte man auch mit <li> oder<a> machen?

Geändert von basti1012 (19.12.2018 um 22:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 19.12.2018, 22:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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".
Mit Zitat antworten
Sponsored Links
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:24 Uhr.