WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Html Boxen flexibel  de

Автор: Klaus G.
Просмотрено 329, Подписчики 1, Размещенный 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;}  

Размещено
7 Ответы
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Автор

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>

Читать больше
Размещено От Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PL

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

Hallo, ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Автор

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

Читать больше
Размещено От Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PL

... ... OK ... ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪