WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Html Boxen flexibel  de

Autor: Klaus G.
Visitado 326, Seguidores 1, Compartilhado 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;}  

Publicado em
7 RESPOSTAS
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Autor

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>

Ler mais
Publicado em de Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês PL

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

Hallo, ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês 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

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Autor

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

Ler mais
Publicado em de Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês PL

... ... OK ... ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪