WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Html Boxen flexibel  de

Auteur : Klaus G.
Visité 328, Followers 1, Partagé 0  

Hallöle Gemeine / KolAsim,

ich habe auf einer Webseite HTML-Boxen, die Terminbelegungen anzeigen.

Jetzt sollten diese HTML-Boxen Flexibel sein. So könnte ich 4 Boxen nebeneinander setzen, wegen Responsiven Umbruch.

Wie kann ich das bewerkstelligen ????

Link:

Hier der HTML Code:

<div class="calendar">
<div class="calendar__picture">
<h3>Januar</h3>
</div>
<div class="calendar__date">
<div class="calendar__day">Mo</div>
<div class="calendar__day">Di</div>
<div class="calendar__day">Mi</div>
<div class="calendar__day">Do</div>
<div class="calendar__day">Fr</div>
<div class="calendar__day">Sa</div>
<div class="calendar__day">So</div>
<div class="calendar__number"></div>
<div class="calendar__number"></div>
<div class="calendar__number"></div>
<div class="calendar__number">1</div>
<div class="calendar__number">2</div>
<div class="calendar__number">3</div>
<div class="calendar__number">4</div>
<div class="calendar__number">5</div>
<div class="calendar__number">6</div>
<div class="calendar__number">7</div>
<div class="calendar__number">8</div>
<div class="calendar__number">9</div>
<div class="calendar__number">10</div>
<div class="calendar__number">11</div>
<div class="calendar__number">12</div>
<div class="calendar__number">13</div>
<div class="calendar__number">14</div>
<div class="calendar__number">15</div>
<div class="calendar__number">16</div>
<div class="calendar__number">17</div>
<div class="calendar__number">18</div>
<div class="calendar__number">19</div>
<div class="calendar__number">20</div>
<div class="calendar__number">21</div>
<div class="calendar__number">22</div>
<div class="calendar__number">23</div>
<div class="calendar__number">24</div>
<div class="calendar__number">25</div>
<div class="calendar__number">26</div>
<div class="calendar__number">27</div>
<div class="calendar__number">28</div>
<div class="calendar__number">29</div>
<div class="calendar__number calendar__number--current">30</div>
</div>
</div>

Und hier der CSS-Code:

.calendar { position: relative; width: 300px; background-color: #fff; box-sizing: border-box; box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden;} .calendar__picture { position: relative; height: 200px; padding: 20px; color: #fff; background: #262626 url("https://images.unsplash.com/photo-1516912481808-3406841bd33c?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=183f2924ba5a8429441804609b2d4f61") no-repeat center / cover; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box;} .calendar__picture::before { content: ""; left: 0; right: 0; top: 0; bottom: 0; position: absolute; background: linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1));} .calendar__picture h2 { margin: 0;} .calendar__picture h3 { margin: 0; font-weight: 500;} .calendar__date { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)); grid-gap: 10px; box-sizing: border-box;} .calendar__day { display: flex; align-items: center; justify-content: center; height: 25px; font-weight: 600; color: #262626;} .calendar__day:nth-child(7) { color: #ff685d;} .calendar__number { display: flex; align-items: center; justify-content: center; height: 25px; color: #262626;} .calendar__number:nth-child(7n) { color: #ff685d; font-weight: 24px;}.calendar__number--current, & .calendar__number:hover { background-color: #009688; color: #fff !important; font-weight: 700; cursor: pointer;}  

Posté le
7 RéPONSES
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PL

... Entfernen Sie Folgendes aus Ihrem CSS-Code: overflow: hidden

… oder verwenden Sie diesen Code:

<style>
@media (max-width: 1149.9px) {
.imHTMLObject{overflow:scroll !important}}
</style>

... ... oder es wäre besser, die Zellen mit dem Trennsteg zu trennen, sodass sie sich paarweise in einer Reihe anordnen...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Auteur

Habe für mein Problem eine ander akzeptable Lösung gefunden.

Mal schauen, vieleicht finde ich mal eine besser lösung.  coollaughinglaughing

Danke für eure Hilfe

Gruß

KLAUS

Link

<style>@media (max-width: 1919.9px) and (min-width: 1616px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25 #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32, #imHTMLObject_21, #imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:50px; padding-right:50px}</style>
<style>@media (max-width: 1348.9px) and (min-width: 1150px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25 #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32, #imHTMLObject_21, #imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:130px; padding-right:130px}</style>
<style>@media (max-width: 1149.9px) and (min-width: 960px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31, #imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:80px; padding-right:80px;}</style>
<style>@media (max-width: 959.9px) and (min-width: 720px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31, #imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:30px; padding-right:30px}</style>
<style>@media (max-width: 719.9px) and (min-width: 480px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30, #imCellStyleGraphics_31,#imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:80px; padding-right:80px}</style>
<style>@media (max-width: 479.9px) and (min-width: 360px) {#imCellStyleGraphics_21, #imCellStyleGraphics_22,#imCellStyleGraphics_22,#imCellStyleGraphics_23,#imCellStyleGraphics_24,#imCellStyleGraphics_25 #imCellStyleGraphics_26,#imCellStyleGraphics_27,#imCellStyleGraphics_28,#imCellStyleGraphics_29,#imCellStyleGraphics_30,#imCellStyleGraphics_31,#imHTMLObject_21,#imHTMLObject_22, #imHTMLObject_23, #imHTMLObject_24, #imHTMLObject_25, #imHTMLObject_26, #imHTMLObject_27, #imHTMLObject_28, #imHTMLObject_29, #imHTMLObject_30, #imHTMLObject_31, #imHTMLObject_32 {padding-left:20px; padding-right:20px}</style>

<style>#imCellStyleGraphics_21, #imCellStyleGraphics_22, #imCellStyleGraphics_23, #imCellStyleGraphics_24, #imCellStyleGraphics_25, #imCellStyleGraphics_26, #imCellStyleGraphics_27, #imCellStyleGraphics_28, #imCellStyleGraphics_29, #imCellStyleGraphics_30, #imCellStyleGraphics_31, #imCellStyleGraphics_32
{grid-row: 1 / -1; grid-column: 1 / -1;
background-color: #fcfdfe;
box-shadow: 5px 5px 10px #888888;
}</style>

Lire plus
Posté le de Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PL

...alles ist möglich, aber der Link ist zur Überprüfung nicht mehr erreichbar...

Hallo, ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PL

... Sie können möglicherweise mit den Zellenstiloptionen arbeiten ...
... Ohnehin, Probieren Sie es damit aus und ordnen Sie es dann so an, wie Sie möchten:

<style>
div[id^='imCellStyleGraphics_'] {background-color:transparent !important}
.calendar{background-color:lavender;width:280px !important}
</style>

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Auteur

Hallo KolAsim,

ich habe eine Lösung gefunden coolcoolcool

<style>@media (max-width: 1348.9px) and (min-width: 1150px) {#imCellStyleGraphics_34, #imCellStyleGraphics_35, #imCellStyleGraphics_36, #imCellStyleGraphics_37, #imCellStyleGraphics_38, #imCellStyleGraphics_39, #imCellStyleGraphics_40, #imCellStyleGraphics_41, #imCellStyleGraphics_42, #imCellStyleGraphics_43, #imCellStyleGraphics_44, #imCellStyleGraphics_45, #imHTMLObject_34, #imHTMLObject_35, #imHTMLObject_36, #imHTMLObject_37, #imHTMLObject_38, #imHTMLObject_39, #imHTMLObject_40, #imHTMLObject_41, #imHTMLObject_42, #imHTMLObject_43, #imHTMLObject_44, #imHTMLObject_45 {padding-left:125px; padding-right:125px; margin-left: 100px; margin-right: 90px;}</style>

Mit margin-left und margin-right kann man es richten. coolcoolcool

Du hast mich dazu gebracht meine eigen KI zu füttern.

So schaut es wesentlich besser aus.

Schönes Wochenend

Gruß

Klaus

Lire plus
Posté le de Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PL

... ... OK ... ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪