i have created a sort of calendar to manage events inside school rooms, in each day/room i try to manage it by using flex but it cause problem of alignment.
The goal is to place side by side the event with same time range and to place vertically the events with different time range. In my code everything is aligned side by side.
Here my code:
<div style="position:relative; display:flex;" id="15_2023_1_20">
<div style="margin: 16px 1px 0px; height: 48px; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35970" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="112880" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 1<br>09:00 - 12:00"><span>Recitazione 04/22<br>Teacher 1<br></span></div>
<div style="margin: 128px 1px 0px; height: 48px; flex: 1 1 0%; background-color: rgb(230, 145, 56); color: rgb(0, 0, 0); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c407 d35989" data-toggle="tooltip" data-placement="top" data-id="407" data-cal-id="132084" data-html="true" title="" data-original-title="Event Manager Nov 2022<br>Teacher 2<br>16:00 - 19:00"><span>Event Manager Nov 2022<br>Teacher 2<br></span></div>
<div style="margin: 64px 1px 0px; height: 48px; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35971" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="141507" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 3<br>12:00 - 15:00"><span>Recitazione 04/22<br>Teacher 3<br></span></div>
</div>
Thanks for help
It may be helpful for you to try this code
<div style="position:relative; display:flex; flex-wrap: wrap; gap: 15px;" id="15_2023_1_20">
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35970" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="112880" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 1<br>09:00 - 12:00"><span>Recitazione 04/22<br>Teacher 1<br></span></div>
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(230, 145, 56); color: rgb(0, 0, 0); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c407 d35989" data-toggle="tooltip" data-placement="top" data-id="407" data-cal-id="132084" data-html="true" title="" data-original-title="Event Manager Nov 2022<br>Teacher 2<br>16:00 - 19:00"><span>Event Manager Nov 2022<br>Teacher 2<br></span></div>
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35971" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="141507" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 3<br>12:00 - 15:00"><span>Recitazione 04/22<br>Teacher 3<br></span></div>
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(230, 145, 56); color: rgb(0, 0, 0); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c407 d35989" data-toggle="tooltip" data-placement="top" data-id="407" data-cal-id="132084" data-html="true" title="" data-original-title="Event Manager Nov 2022<br>Teacher 2<br>16:00 - 19:00"><span>Event Manager Nov 2022<br>Teacher 2<br></span></div>
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35971" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="141507" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 3<br>12:00 - 15:00"><span>Recitazione 04/22<br>Teacher 3<br></span></div>
<div style="height: 48px; min-width: 20%; flex: 1 1 0%; background-color: rgb(221, 126, 107); color: rgb(102, 102, 102); border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0px 5px; cursor: pointer;" class="mod-lezione c340 d35971" data-toggle="tooltip" data-placement="top" data-id="340" data-cal-id="141507" data-html="true" title="" data-original-title="Recitazione 04/22<br>Teacher 3<br>12:00 - 15:00"><span>Recitazione 04/22<br>Teacher 3<br></span></div>
</div>
Related
You will see below that I attempted to create a divclass for a button - however, for some reason, only that divclass doesn't get any styling.
Please help me out to figure out why ctabutton class doesn't get styling. There were supposed to be borders around. I'm probably missing something very easy to notice - please give me wisdom.
Here is a link to codepen: https://codepen.io/CanYildiz/pen/ExEYmZb
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
#import url("https://fonts.googleapis.com/css?family=Inter:400,700|Lato:500");
.container {
align-items: flex-start;
background-color: var(--white);
display: flex;
flex-direction: column;
min-height: 469px;
width: 666px;
border: 1px solid var(--black);
}
.hidden,
.hidden * {
pointer-events: none;
visibility: hidden;
}
.pflichttext {
color: #094e7c;
cursor: pointer;
font-family: var(--font-family-inter);
font-size: var(--font-size-xs);
font-weight: 400;
letter-spacing: 0;
margin-top: 8px;
min-height: 15px;
text-decoration: underline;
width: 666px;
}
.container-1 {
align-items: flex-start;
cursor: pointer;
display: flex;
flex-direction: column;
min-height: 45px;
width: 666px;
}
.ctabutton {
display: inline-block;
align-items: flex-start;
text-decoration: none;
border: 5px solid var(--allports);
border-radius: 4px;
display: flex;
height: 44px;
margin-left: 3px;
margin-top: 8px;
min-width: 106px;
padding: 14px 16px;
}
.cta-text {
color: var(--allports);
font-family: var(--font-family-lato);
font-size: var(--font-size-s);
font-weight: 500;
height: 14px;
letter-spacing: 0;
line-height: 14px;
min-width: 72px;
text-align: center;
white-space: nowrap;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
.image-1 {
height: 312px;
object-fit: cover;
width: 666px;
}
.frame-1 {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-top: 9px;
min-height: 73px;
width: 664px;
}
.description {
color: #595858;
font-family: var(--font-family-inter);
font-size: var(--font-size-m);
font-weight: 400;
letter-spacing: 0;
margin-top: 3px;
min-height: 36px;
width: 664px;
}
.title {
color: var(--black);
font-family: Sans-Serif;
font-size: var(--font-size-l);
font-weight: 700;
letter-spacing: 0;
margin-top: -1px;
min-height: 34px;
width: 664px;
}
<div class="container screen">
<div class="container-1">
<img class="image-1" src="https://cdn.animaapp.com/projects/62b868b9500e6d0650eef4d7/releases/62b868bf500e6d0650eef4d8/img/image-1#1x.png" />
<div class=" frame-1">
<h1 class="title">TITLE</h1>
<p class="description">
Description about the product/service advertise!It is relatively longer than the Title itself.But just long enough to contain extra information
</p>
</div>
<div class="ctabutton">
<a href="clickurl.de" target="_blank">
<div class="cta-text valign-text-middle">CTATEXT</div>
</a>
</div>
<a href="https://demo.de" target="_blank">
<div class="pflichttext">Pflichttext</div>
</a>
</div>
The border style is not being applied because you have the root css variable named --alllports when an extra 'l' and you are trying to reference it by --allports on the class.
you're original code
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
when it should be
:root {
--black: rgba(0, 0, 0, 1);
--allports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
how to center content + making it the same shape without the width or height be smaller in this code ? , note the code is not full because stack over flow gived me a limt
.searchbox {
margin-top: 20px;
background-color: #2b2a38;
padding: 15px 27px;
font-size: 20px;
color: #ccc;
border: 3px solid #2b2a38;
border-radius: 8px;
width: 40%;
}
.content {
padding: 0 18px;
width: 50%;
margin-left: 25%;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #2f3136;
color: #6a707a;
text-align: left;
display: none;
}
<input id="myInput" type="text" class="searchbox" placeholder="Search">
<div class="content">
<h4 style="color: rgb(169, 247, 247);">Category:</h4>
<p style="color: rgb(242, 44, 232);">Premium</p>
<h4 style="color: #cccccc;">Usage:</h4>
<p>Hrr</p>
<h4 style="color: #cccccc;">Examples:</h4>
<p>Hrr {messageID} {roleID} {emojiID}</p>
</div>
</div>
.searchbox {
margin-top: 20px;
background-color: #2b2a38;
padding: 15px 27px;
font-size: 20px;
color: #ccc;
border: 3px solid #2b2a38;
border-radius: 8px;
width: 40%;
}
.content {
padding: 0 18px;
width: 50%;
margin-left: 25%;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #2f3136;
color: #6a707a;
text-align: left;
display: none;
}
<input id="myInput" type="text" class="searchbox" placeholder="Search">
<div class="content">
<h4 style="color: rgb(169, 247, 247);">Category:</h4>
<p style="color: rgb(242, 44, 232);">Premium</p>
<h4 style="color: #cccccc;">Usage:</h4>
<p>Hrr</p>
<h4 style="color: #cccccc;">Examples:</h4>
<p>Hrr {messageID} {roleID} {emojiID}</p>
</div>
</div>
hey in this case you can use this
.content{
width: 100%;
display: block;
margin: auto;
}
you can adjust your width or keep it the same
You can center box content easily
.searchbox {
display: flex;
justify-content: center;
// align-items: center; //when you want vertical center
}
Size it with a relative unit (I used 20em) and use flex to center it.
Stacked the elements flex-direction: column;
Set the alignment on the content box: align-self: center;
Set width relative to the parent font width: 20em;
Removed the display:none; to show it
Adjusted the colors using classes not embedded style attributes
Added a "container" so I could use flex on it and stack the elements
Fixed the malformed HTML
.container {
display: flex;
flex-direction: column;
}
.searchbox {
margin-top: 20px;
background-color: #2b2a38;
padding: 15px 27px;
font-size: 20px;
color: #ccc;
border: 3px solid #2b2a38;
border-radius: 8px;
width: 40%;
}
.content {
align-self: center;
padding: 0 18px;
width: 20em;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #2f3136;
color: #FFFFAC;
text-align: left;
}
.category {
color: rgb(169, 247, 247);
}
.premium {
color: rgb(242, 44, 232);
}
.label-me {
color: #eeeeee;
}
<div class="container">
<input id="myInput" type="text" class="searchbox" placeholder="Search">
<div class="content">
<h4 class="category">Category:</h4>
<p class="premium">Premium</p>
<h4 class="label-me">Usage:</h4>
<p>Hrr</p>
<h4 class="label-me">Examples:</h4>
<p>Hrr {messageID} {roleID} {emojiID}</p>
</div>
</div>
I have tried using flexbox to center a couple buttons and a p but I'm having some troubles.
I have this code
.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.loginSection p {
display: flex;
align-items: center;
margin: 16px 0;
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
But I can center the p
| | Log-In | |
|Enter your email |
| | Continue | |
.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.layout p {
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
color: white;
margin: auto;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
Flexbox is typically used by setting flex properties on the parent container to affect the layout of the children inside of that container.
It looks like you're adding display: flex and align-items: center on the .loginSection p element, when flex properties should be set on the parent .loginSection.
If your intention is to center all the elements inside of the .loginSection horizontally, then you can get rid of the flex properties on the children, and add the following rules:
.loginSection {
display: flex;
flex-direction: column;
justify-content: center;
// ... other styles here
}
You'll want to add display:flex with flex-direction: column and align-items:center to the .loginSection container.
Typically when using flex, you flex the container and then the children become "flex-items" rather than flexing the items themselves.
.loginSection {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items:center;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
Or if you want them to all be stretched out use align-items:stretch
.loginSection {
margin: 0 auto;
padding: 1rem; /* optional if you don't want it to stretch the whole width */
display: flex;
flex-direction: column;
align-items:stretch;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
I have two the problem:
First: I can't padding or margin .card element. I want to add space between each card without broken columns.
It set width: 33.333%, change padding or margin of card element, it will be broken to 2 elements in one rows.
Second, I want to add a link to .card. Mean: if the user clicks in one of the 3 cards, it will open.
Currently, I must add <a href=""> to each span, img,... Lost time and broken CSS.
Here my example code:
.card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-radius: 4px;
overflow: hidden;
padding: 5px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 4px;
align-items: left;
padding: 0 0 15px 0;
width: 33.333%;
background: #ecf0f1;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}
.card__image {
position: relative;
width: 100%;
display: block;
height: 125px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.card__image:hover {
cursor: pointer;
}
.card__image:hover:after {
bottom: 0;
color: white;
transition: all 0.15s;
}
.card__image:hover .image-overlay {
background-color: rgba(35, 155, 55, 0.33);
transition: all 0.15s;
}
.card__image:after {
display: flex;
justify-content: center;
align-items: center;
bottom: -4em;
position: absolute;
width: 100%;
height: 100%;
font-family: "FontAwesome";
font-size: 1em;
text-align: center;
content: "\f00c";
color: rgba(255, 255, 255, 0);
color: #fff;
transition: all 0.15s;
}
.card__image .image-overlay {
display: block;
position: absolute;
width: 100%;
height: 125px;
top: 0;
left: 0;
content: "";
background-color: rgba 255, 255, 255, 0;
transition: backgroundColor, 0.15s;
}
.card__image img {
display: block;
width: 100%;
}
.card__actions {
font-family: serif;
font-size: 25px;
line-height: 12px;
color: #a3a3a3;
text-align: right;
padding: 0 8px 0 0;
margin: 0;
}
span {
display: block;
border-radius: 3px;
margin: 0.5em 0.5em 0 0.5em;
color: #88888b;
}
span.line {
background: #f0f0f0;
color: #000;
margin: 0;
padding: 0.5em 0.5em;
text-align: center;
}
span._short1 {
color: #fff;
background: linear-gradient(to right, #1f4037, #99f2c8);
}
span._short2 {
color: #fff;
background: linear-gradient(to right, #fc4a1a, #f7b733);
}
span._short3 {
color: #fff;
background: linear-gradient(to right, #ec008c, #fc6767);
}
<div class="card-container card--fixedWidth">
<div class="card">
<div class="card__image" id="card-1">
<div class="image-overlay">
</div>
<img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
<span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
</div>
</div><!-- /.card -->
<div class="card">
<div class="card__image" id="card-2">
<div class="image-overlay">
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short2">Get link hdonline</span>
<span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
</div>
</div><!-- /.card -->
<div class="card">
<div class="card__image" id="card-3">
<div class="image-overlay">
</div>
<img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short3">Emotion đẹp Facebook</span>
<span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
</div>
</div><!-- /.card -->
</div><!-- /.card-container -->
First: give your cards some margin (I used margin: 0 5px for 5px on the left and right) then set its width to width: calc(33.333% - 10px); where the 10px is both margins added together.
Second: Simply make your card an anchor tag <a>.
.card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-radius: 4px;
overflow: hidden;
padding: 5px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 4px;
align-items: left;
padding: 0 0 15px 0;
margin: 0 5px;
width: calc(33.333% - 10px);
background: #ecf0f1;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}
.card__image {
position: relative;
width: 100%;
display: block;
height: 125px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.card__image:hover {
cursor: pointer;
}
.card__image:hover:after {
bottom: 0;
color: white;
transition: all 0.15s;
}
.card__image:hover .image-overlay {
background-color: rgba(35, 155, 55, 0.33);
transition: all 0.15s;
}
.card__image:after {
display: flex;
justify-content: center;
align-items: center;
bottom: -4em;
position: absolute;
width: 100%;
height: 100%;
font-family: "FontAwesome";
font-size: 1em;
text-align: center;
content: "\f00c";
color: rgba(255, 255, 255, 0);
color: #fff;
transition: all 0.15s;
}
.card__image .image-overlay {
display: block;
position: absolute;
width: 100%;
height: 125px;
top: 0;
left: 0;
content: "";
background-color: rgba 255, 255, 255, 0;
transition: backgroundColor, 0.15s;
}
.card__image img {
display: block;
width: 100%;
}
.card__actions {
font-family: serif;
font-size: 25px;
line-height: 12px;
color: #a3a3a3;
text-align: right;
padding: 0 8px 0 0;
margin: 0;
}
span {
display: block;
border-radius: 3px;
margin: 0.5em 0.5em 0 0.5em;
color: #88888b;
}
span.line {
background: #f0f0f0;
color: #000;
margin: 0;
padding: 0.5em 0.5em;
text-align: center;
}
span._short1 {
color: #fff;
background: linear-gradient(to right, #1f4037, #99f2c8);
}
span._short2 {
color: #fff;
background: linear-gradient(to right, #fc4a1a, #f7b733);
}
span._short3 {
color: #fff;
background: linear-gradient(to right, #ec008c, #fc6767);
}
<div class="card-container card--fixedWidth">
<a href="#" class="card">
<div class="card__image" id="card-1">
<div class="image-overlay">
</div>
<img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
<span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
</div>
</a><!-- /.card -->
<a href="#" class="card">
<div class="card__image" id="card-2">
<div class="image-overlay">
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short2">Get link hdonline</span>
<span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
</div>
</a><!-- /.card -->
<a href="#" class="card">
<div class="card__image" id="card-3">
<div class="image-overlay">
</div>
<img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short3">Emotion đẹp Facebook</span>
<span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
</div>
</a><!-- /.card -->
</div><!-- /.card-container -->
You can add padding, you just need to also set the box-sizing css to border-box
.card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-radius: 4px;
overflow: hidden;
padding: 5px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 4px;
align-items: left;
padding: 15px;
box-sizing: border-box;
width: 33.333%;
background: #ecf0f1;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
}
.card__image {
position: relative;
width: 100%;
display: block;
height: 125px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.card__image:hover {
cursor: pointer;
}
.card__image:hover:after {
bottom: 0;
color: white;
transition: all 0.15s;
}
.card__image:hover .image-overlay {
background-color: rgba(35, 155, 55, 0.33);
transition: all 0.15s;
}
.card__image:after {
display: flex;
justify-content: center;
align-items: center;
bottom: -4em;
position: absolute;
width: 100%;
height: 100%;
font-family: "FontAwesome";
font-size: 1em;
text-align: center;
content: "\f00c";
color: rgba(255, 255, 255, 0);
color: #fff;
transition: all 0.15s;
}
.card__image .image-overlay {
display: block;
position: absolute;
width: 100%;
height: 125px;
top: 0;
left: 0;
content: "";
background-color: rgba 255, 255, 255, 0;
transition: backgroundColor, 0.15s;
}
.card__image img {
display: block;
width: 100%;
}
.card__actions {
font-family: serif;
font-size: 25px;
line-height: 12px;
color: #a3a3a3;
text-align: right;
padding: 0 8px 0 0;
margin: 0;
}
span {
display: block;
border-radius: 3px;
margin: 0.5em 0.5em 0 0.5em;
color: #88888b;
}
span.line {
background: #f0f0f0;
color: #000;
margin: 0;
padding: 0.5em 0.5em;
text-align: center;
}
span._short1 {
color: #fff;
background: linear-gradient(to right, #1f4037, #99f2c8);
}
span._short2 {
color: #fff;
background: linear-gradient(to right, #fc4a1a, #f7b733);
}
span._short3 {
color: #fff;
background: linear-gradient(to right, #ec008c, #fc6767);
}
<div class="card-container card--fixedWidth">
<div class="card">
<div class="card__image" id="card-1">
<div class="image-overlay">
</div>
<img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short1">Tải bộ cài Windows, Office chính chủ</span>
<span class="line _long">Link trực tiếp từ server Microsoft giúp bạn dễ dàng chọn bất cứ phiên bản nào!</span>
</div>
</div><!-- /.card -->
<div class="card">
<div class="card__image" id="card-2">
<div class="image-overlay">
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short2">Get link hdonline</span>
<span class="line _long">Giúp bạn xem phim chất lượng cao, không bị quảng cáo làm phiền</span>
</div>
</div><!-- /.card -->
<div class="card">
<div class="card__image" id="card-3">
<div class="image-overlay">
</div>
<img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
</div>
<div class="card__actions">
<!-- … -->
</div>
<div class="card__description">
<span class="line _short3">Emotion đẹp Facebook</span>
<span class="line _long">Tạo mẫu status độc đáo, thêm Emoji ngộ nghĩnh làm sinh động Facebook của bạn.</span>
</div>
</div><!-- /.card -->
</div><!-- /.card-container -->
How to apply this css for move element text "DOG DOG DOG" to top over cat image ?
i test in chrome it's ok
http://image.ohozaa.com/i/g53/BwHNe9.png
but in ie7 element text DOG DOG DOG not move to top cat image
http://image.ohozaa.com/i/53f/8OqTpZ.png
how to apply css ?
<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
float: left;
background: #fff;
margin: 7px;">
<div style="
left: 25px; top: 13px; z-index: 999; opacity: 1; -webkit-backface-visibility: hidden; color: #fff; font-weight: bold; width: 117px; text-align: center; font-size: 12px; font-family: lato; padding: 10px 0px; position: absolute; margin: 0px; background-color: rgb(0, 178, 45); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px ;
">
DOG DOG DOG
</div>
<img src="http://green.uwex.edu/files/2010/06/4-H-Dog.png" width="80" height="80" style=" border: 1px solid rgb(203, 203, 203); ">
</div>
<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
float: left;
background: #fff;
margin: 7px;">
<div style="
left: 25px; top: 13px; z-index: 999; opacity: 1; -webkit-backface-visibility: hidden; color: #fff; font-weight: bold; width: 117px; text-align: center; font-size: 12px; font-family: lato; padding: 10px 0px; position: absolute; margin: 0px; background-color: rgb(0, 178, 45); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
">
CAT CAT CAT
</div>
<img src="http://img1.wikia.nocookie.net/__cb20120908225005/disney/images/thumb/b/b6/Cheshirecatdisney.png/256px-Cheshirecatdisney.png" width="80" height="80" style=" border: 1px solid rgb(203, 203, 203); ">
</div>
now check work fine in ie 7... in body tag first div you change the css
<div style=" display: block;
opacity: 1;
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
position: relative;
*position: absolute; /* for ie 7 only */
float: left;
background: #fff;
margin: 7px;">