Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
Basically I need that article publishing date (1/9/2016) lays or aligns on the bottom inside the container. Right now the date sits just right under the text, but I need it to lay on the bottom of the container. my site is watchathletics.com
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
nt increases.
You can absolute position the element.
In this example I just positioned it at the right-bottom:
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
right: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
you can change your class .top_pub_date to:
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
right: 0;
bottom: 0;
}
What you are looking for is
position: absolute;
bottom: 0;
.headline_container {
width: 334px;
height: 80px;
position: relative;
margin: 8px 0;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #e6e6e6;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
background: #fff;
}
.headline_photo {
width:90px;
height:60px;
margin-top: 6px;
margin-left: 6px;
-moz-border-radius: 1px;
border-radius: 1px;
border: 1px solid #ffffff;
-moz-box-shadow: 0 2px 2px #e6e6e6;
-webkit-box-shadow: 0 2px 2px #e6e6e6;
box-shadow: 0 2px 2px #e6e6e6;
}
.headline_text {
position: relative;
left: 111px;
top: -63px;
width: 220px;
height: 60px;
font-size: 13px;
}
.headline_text a {
font-size: 14px;
}
.top_pub_date {
font-weight: bold;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="headline_container">
<div class="headline_photo"><img src=\"image.jpg"></div>
<div class="headline_text">• <a style=\"font-size:14px; line-height:105%\" href="#" class="clear_href" title=\"$top_normal_title\"> Some text hereSome text hereSome text hereSome text here </a><br/><div class="top_pub_date"> 1/9/2016 </div></div>
</div>
I have a question about html and css. I am trying to make an div with text---slider--text. Here is the photo of how it supposed to look.
This is my current situation.
I hope someone can help me with getting this elements on 1 line.
.information_seperator {
height: 4vh;
background-color: #ffffff;
}
.divider {
width: 50vw;
background-color: #ffc539;
margin-top: 0px;
margin-bottom: 0px;
}
.divider:after {
content: " ";
width: 5px;
height: 5px;
position: relative;
top: 0;
right: 10px;
background-color: #ffc539;
}
<div class="information_seperator">
<!--<div class="row">-->
<span class="text_info">AMS</span>
<hr class="divider">
<!--<input data-provide="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20"/>-->
<!--<span style="color: #ffc539">●</span>-->
<span>JFC</span>
<!--</div>-->
</div>
You can do this with Flexbox and JQuery UI
$('.circle').draggable({
axis: "x",
containment: ".line"
});
.slider {
display: flex;
align-items: center;
}
.line {
flex: 1;
height: 4px;
background: #FBC538;
position: relative;
margin: 0 10px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: #FBC538;
position: absolute;
left: 0;
top: -8px;
}
span:not(.circle) {
font-size: 30px;
font-weight: bold;
font-family: Sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider">
<span>AMS</span>
<div class="line"><span class="circle"></span></div>
<span>JFC</span>
</div>
I think you need to read up on
display: inline-block
To align elements next to one another use : display:inline;
Example :
span,
div {
display: inline;
}
//Slider
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<span>text</span>
<div>
<input type=range />
</div>
<span>text</span>
I have implemented this calendar on mozilla firefox satisfactorily and when I try to view it on chrome, table doesn't fill all the parent section. The table height is the same as the parent section but it have moved a little bit to the bottom generating a white space between the section and the table.
Chrome:
Firefox:
In firefox works.
This is the code, you can try it on the demo and see the differences between chrome and firefox:
.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("#static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("#static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("#static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}
.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
<section class="my-calendars">
<span>My calendars</span>
<img src="https://static.inevio.com/app/207/flechita.png" alt="">
</section>
<section class="current-month">
<img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
<span>September 2013</span>
<img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
</section>
<section class="create-event right" id="create-event">
<img src="" alt="+">
<span>Create new event</span>
</section>
<section id="my-calendars-modal">
<section class="my-calendars-list">
<articles id="work" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="office" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="home" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
</section>
<section class="add-new-calendar" id="add-new-calendar">
<img src="" alt="+">
<span>Add new calendar</span>
</section>
</section>
<section id="create-event-modal">
<figure class="close-image create-event-modal-close">
<i></i>
</figure>
<!-- Falta implementar -->
</section>
<section id="create-calendar-modal">
<figure class="close-image create-calendar-modal-close">
<i></i>
</figure>
<form>
<artricle class="calendar-name">
<input type="text" placeholder=" Name of calendar">
</artricle>
<artricle class="calendar-color">
<span>Color</span>
<input type="color">
</artricle>
<artricle class="calendar-description">
<span>Description</span><br>
<textarea></textarea>
</artricle>
<button type="submit" class="create-calendar-button right">Create</button>
</form>
</section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
<table>
<thead class="calendar-day-bar">
<tr class="title-row">
<th class="title-cell">Sunday</th>
<th class="title-cell">Monday</th>
<th class="title-cell">Thusday</th>
<th class="title-cell">Wednesday</th>
<th class="title-cell">Thursday</th>
<th class="title-cell">Friday</th>
<th class="title-cell">Saturday</th>
</tr>
</thead>
<tbody class="calendar-days">
<tr class="week-row">
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="day-cell"><span>1</span></td>
<td class="day-cell"><span>2</span></td>
<td class="day-cell"><span>3</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>4</span></td>
<td class="day-cell"><span>5</span></td>
<td class="day-cell"><span>6</span></td>
<td class="day-cell"><span>7</span></td>
<td class="day-cell"><span>8</span></td>
<td class="day-cell"><span>9</span></td>
<td class="day-cell"><span>10</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>11</span></td>
<td class="day-cell"><span>12</span></td>
<td class="day-cell"><span>13</span></td>
<td class="day-cell"><span>14</span></td>
<td class="day-cell">
<span>15</span>
<article class="event office"> Me voy a casar</article>
<article class="event"> Reunion con el jefe</article>
</td>
<td class="day-cell"><span>16</span></td>
<td class="day-cell"><span>17</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>18</span></td>
<td class="day-cell"><span>19</span></td>
<td class="day-cell"><span>20</span></td>
<td class="day-cell"><span>21</span></td>
<td class="day-cell day-selected"><span>22</span></td>
<td class="day-cell"><span>23</span></td>
<td class="day-cell"><span>24</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>25</span></td>
<td class="day-cell"><span>26</span></td>
<td class="day-cell"><span>27</span></td>
<td class="day-cell"><span>28</span></td>
<td class="day-cell"><span>29</span></td>
<td class="day-cell"><span>30</span></td>
<td class="day-cell"><span>31</span></td>
</tr>
</tbody>
</table>
</section>
I tried to look at the code but am unable to determine how this gets placed above the divs. Also, googling "tabs on div", "nested tabs on div" didn't seem to show anything relevant so my terminology is off.
I imagine they used an absolutely positioned <div>.
Demo:
Output:
CSS:
#container {
border: 1px solid lightgrey;
border-radius: 5px;
height: 100px;
position: relative;
width: 200px;
}
.tab {
background-color: rgb( 242, 242, 242 );
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-radius: 0 0 5px 0;
color: grey;
display: inline-block;
font: 12px Arial;
left: 0;
padding: 5px;
position: absolute;
top: 0;
}
HTML:
<div id="container"><div class="tab">Example</div></div>
Just use this:
CSS
.bs-docs-example {
position: relative;
margin: 15px 5px;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bs-docs-example:after {
content: "Condiciones de uso";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
HTML
<div id="content">
<div class="container">
<div class="bs-docs-example" style="text-align: justify;">
<h2>Header</h2>
<p>Paragraph</p>
</div>
</div>
</div>
DEMO