(gelöst) Floorplan CSS und Select für ein Dropdown Menü

[Ma_Bo]

Hey Leute, ich versuche gerade mehrere Dropdownmenüs zu gestalten.

Wenn ich folgendes in der CSS stehen habe

/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

bekomme ich das Aussehen wie auf Bild 1

wenn ich:

/* detail-selector & slider */
select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

dann bekomme ich es wie in Bild 2.

Ich möchte aber für das Device Heizungsprogramm die Länge separat verstellen können, aber bekomme es nicht hin.
Kann mir jemand sagen, was ich eintragen muss, damit ich jedes Device einzeln einstellen kann?

Grüße Marcel

[mchilli]

Du kannst jedes div einzeln über die id ansprechen plus den zusatz das du alle child-elemente "select" ändern möchtest.

Code Auswählen Erweitern

/* detail-selector & slider */
#div-name_des_device_1 select {  margin-left:5px; margin-right:5px;font-size:25px;width:170px; }
#div-name_des_device_2 select {  margin-left:5px; margin-right:5px;font-size:25px;width:270px; }
#div-name_des_device_3 select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

[Ma_Bo]

Super, das probiere ich nachher direkt mal aus...
Ich werde berichten...


Tapatalk iPhone, daher kurz gehalten.

[Ma_Bo]

Du kannst jedes div einzeln über die id ansprechen plus den zusatz das du alle child-elemente "select" ändern möchtest.

Code Auswählen Erweitern

/* detail-selector & slider */
#div-name_des_device_1 select {  margin-left:5px; margin-right:5px;font-size:25px;width:170px; }
#div-name_des_device_2 select {  margin-left:5px; margin-right:5px;font-size:25px;width:270px; }
#div-name_des_device_3 select {  margin-left:5px; margin-right:5px;font-size:25px;width:370px; }
select {  margin-left:5px; margin-right:5px;font-size:25px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }

.handle { position:relative; cursor:pointer; width:50px;
          height:20px; line-height:20px; user-select:none;
          border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }

Vielen Dank, hat funktioniert...!