WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Html Boxen flexibel  de

Autor: Klaus G.
Besucht 327, Followers 1, Geteilt 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;}  

Gepostet am
7 ANTWORTEN
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ 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>

Mehr lesen
Gepostet am von Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats PL

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

Hallo, ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats 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

.

Mehr lesen
Gepostet am von  ‪ 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

Mehr lesen
Gepostet am von Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Nutzer des Monats PL

... ... OK ... ciao

.

Mehr lesen
Gepostet am von  ‪ KolAsim ‪ ‪