I have a card that needs to be covered by link and have text at the bottom corner. Currently text is located at the top, how can I move it to the bottom while keeping link covering card?
.card{
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
width: 200px;
height: 250px;
padding: 10px;
position: relative;
}
.card a {
color: red;
text-decoration: none;
padding: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.card a:hover {
cursor: pointer;
text-decoration: underline;
}
<div class='card'>
<p>Some description goes here</p>
<a href='#'>Read more</a>
</div>
It is usually called stretched link (for example in Bootstrap) and it uses pseudo (before/after) elements which are absolute while the original element can be somewhere else.
To place link at the bottom of the card (without using absolute position) I've set flex to .card and margin-top: auto to a.
Something like this:
.card {
display: flex;
flex-flow: column;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
width: 200px;
height: 250px;
padding: 10px;
position: relative;
}
.card a {
color: red;
text-decoration: none;
margin-top: auto;
}
/* ↓↓ this is it ↓↓ */
.card a:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.card a:hover {
cursor: pointer;
text-decoration: underline;
}
<div class='card'>
<p>Some description goes here</p>
<a href='#'>Read more</a>
</div>
Related
I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
text-align: right;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p,
ul,
ol,
li,
select {
font-family: 'Poppins', sans-serif;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
display: inline-block;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color: rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
<div class="nav-bar">
<nav class="desktop-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
<nav class="mobile-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
</button>
</div>
</nav>
</div>
You can use float: right;.
You can also find other solutions here How do I right align div elements?
You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.
See MDN on position for more info
:root {
--padding: .5em;
}
/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
background: red;
padding: .5em;
position: relative;
}
#first-div {
background: yellow;
padding: var(--padding);
}
p {
padding: var(--padding);
background: white;
}
/* set this divs position to absolute so its top, left, bottom, right
positioning props will be relative to its closest parent set to relative */
#right-div {
position: absolute;
right: calc(var(--padding) + 0px);
top: calc(var(--padding) + 0px);
background: green;
color: white;
padding: var(--padding);
<div id="parent">
<div id="first-div">This is the first div</div>
<p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
<div id="right-div">This is the right div</div>
</div>
I ended up setting the position to absolute and using vw as the property for the left attribute.
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 80vw;
margin-right: 5vw;
}
An <a href> element surrounds two divs. One of the divs is only shown, if the link is active (moment of clicking). And it is placed above the other div. It is used as a feedback for clicking.
You can see and try this here: https://jsfiddle.net/pjgdtade/2/
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
a:active div.link-active-cover {
display: block;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
In Chrome everything works as expected, but in Firefox the link is not executed. On click the div.link-active-cover shows up, but the new page does not open.
Funny fact: If div.link-active-cover is visible from the beginning (no display: none), the div is shown and the link works.
Am I wrong with this or is it a bug in Firefox?
Probably because when click event occurs (after mouseup), the mouse is not on primary clicked element.
No matter, the solution would be to use opacity change:
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .001;
}
a:active div.link-active-cover {
opacity: 1;
}
<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>
Updated Fiddle.
I am having trouble vertically aligning the 's text inside a div.
This is what I have. I need to center "Next" inside the blue box:
#import url(http://fonts.googleapis.com/css?family=Muli);
/*Makes the little side arrow*/
.open {
position: fixed;
width: 100px;
height: 40px;
left: 50%;
top: -1000px;
margin-left: -80px;
margin-top: -30px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6px;
padding: 10px 30px;
color: #444;
transition: all ease-out 0.6s;
}
.open:hover {
border: 1px solid #aaa;
box-shadow: 0 0 8px #ccc inset;
transition: all ease-out 0.6s;
}
.tutorial-box {
position: fixed;
width: 400px;
height: 238px;
top: 75px;
background-color: #F3F3F3;
border-radius: 6px;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
}
.slider-turn p, .tutorial-box h1{
margin-left: 10px;
}
.tutorial-box:before {
content: '';
position: absolute;
left: -14px;
top: 28px;
border-style: solid;
border-width: 10px 14px 10px 0;
border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.tutorial-box p {
width: 350px;
font-size: 16px;
color: #a8aab2;
font-weight: 400;
line-height: 28px;
float: left;
margin: 0;
}
.tutorial-box .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
bottom: 0;
position: absolute;
}
.tutorial-box .bottom .btn-2 {
flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
width: 100%;
height: 54px;
background-color: #373942;
border-bottom-left-radius: 6px;
display: flex;
}
.tutorial-box .bottom span {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
line-height: 54px;
color: #fff;
margin-left: 25px;
font-size: 18px;
}
.next {
text-decoration: none;
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
background-color: #6cb5f3;
border: 0;
margin: 0;
padding: 0;
text-transform: uppercase;
color: #fff;
font-weight: bold;
border-bottom-right-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.next:hover {
text-decoration: none;
background-color: #6BA5D6;
transition: all .3s;
}
.next:active {
text-decoration: none;
background-color: #5F8AAF;
}
.slider-tutorial-box {
width: 350px;
margin: 0 25px;
overflow: hidden;
}
.slider-turn {
width: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TUTORIAL -->
<div class="tutorial-box">
<h1>Welcome</h1>
<span class="close"></span>
<div class="slider-container">
<div class="slider-turn">
<p>
Here, under the Company tab, is where you will do most of the company managment.<br>
</p>
</div>
</div>
<div class="bottom">
<div class="btn-2">
<span>Step 2/?</span>
</div>
Next
</div>
</div>
Please let me know how I can center the text vertically to the center of the div.
Thank you very much. Let me know if I wasn't clear enough.
Seems like you already did that for .tutorial-box .bottom span so, do the same thing for .next
.next{
line-height: 54px;
}
the simplest and possibly most easy way would be to add the 'center' and '/center' tag before and after the text you want, and after each letter use '/br' to move to the next line. this will add some bulk, but would be considerably easier than other methods.
<center>
'letter'</br>'next letter'</br>'next letter'</br>
</center>
repeating the letter and break for all letters
alternatively, you could also add "div" tags around the "a" tag. you would have to modify the 'height' and 'width' to make it vertical for you. I would use px for this and not '%' or 'em'. add this to them:
<div style="height: /* modify this */100px; width: /* and this*/20px;">
Next
</div>
this may not be AS compatible cross platform though.
Like this:
.next {
position: relative;
top: 50%;
transform: translateY(-50%);
}
A nice trick that works both vertically and horizontally.
According to a trick found in Stack overflow, I can change the background of the parent element hovering a child like this:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
But I need to change the background color hovering different child elements. For example, hovering the Facebook button, the background goes blue, while hovering the Google + button, the backgroud goes red.
I've tried this:
<div class="share_box">
<div class="white-container">
<div class="facebook-sibling"/>
<a class="facebook-child-button"/>
<div class="twitter-sibling"/>
<a class="twitter-child-button"/>
<div class="googleplus-sibling"/>
<a class="googleplus-child-button"/>
</div>
</div>
but for multiple buttons it didn't work. The result I expect is similar to:
If you set the parent position: relative, it will contain any position: absolute children.
Create a new element inside the end of the parent, then make it position: absolute and position and size it so that it fills the parent.
Then use z-index: -1 to set it behind the rest of the content (e.g. the buttons).
Then you can use the General Sibling Combinator (~) to select the new element after the hovered element.
.facebook:hover ~ .background { background-color: rgb(50, 100, 150); }
.twitter:hover ~ .background { background-color: rgb(50, 150, 250); }
.google:hover ~ .background { background-color: rgb(250, 75, 50); }
.share {
position: relative;
}
.background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
} /* Following styling for demo purposes only, not relevant */ .facebook:before { background-position:-46px -28px; width:101px; } .twitter:before { background-position:-151px -28px; width:90px; } .google:before { background-position:-245px -28px; width:94px; } .button:before { display:inline-block; content: ""; height:36px; background-image:url("http://i.stack.imgur.com/AXvMk.png"); border-radius: 3px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2); } .button { display:inline-block; padding: 2px; } .white-container { padding: 10px 20px; font-size: 0; background: #fff; border-radius: 3px; } .background { background: #fff; } body { margin: 0 4px; border: 1px solid #aaa; border-top: 0px; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1) } .share { padding: 10px 15px; box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.3) inset } body:before { content: ''; height: 4px; display: block; background: #fff; border-bottom: 1px solid #aaa } html { background: #efefef }
<div class="share">
<div class="white-container">
<div class="background"></div>
</div>
</div>
Is this what you want?
DEMO 1: http://jsfiddle.net/t73431y8/
DEMO 2: http://jsfiddle.net/t73431y8/2/
HTML:
<div class="PARENT">
<div class="RED">RED</div>
<div class="BLUE">BLUE</div>
<div class="GREEN">GREEN</div>
</div>
CSS:
.PARENT{
position: relative;
}
.RED{
display: inline-block;
margin: 5px;
padding: 5px;
color: #BB0000;
background: #FFF;
}
.RED:hover:after{
display: block;
width: 100%;
height: 100%;
background: #BB0000;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
.BLUE{
display: inline-block;
margin: 5px;
padding: 5px;
color: #0000BB;
background: #FFF;
}
.BLUE:hover:after{
display: block;
width: 100%;
height: 100%;
background: #0000BB;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
.GREEN{
display: inline-block;
margin: 5px;
padding: 5px;
color: #00BB00;
background: #FFF;
}
.GREEN:hover:after{
display: block;
width: 100%;
height: 100%;
background: #00BB00;
position: absolute;
top: 0px;
left: 0px;
content: ' ';
z-index: -1;
}
I am trying to implement two sets of CSS-only tab groups on one page. However, when I click on certain tabs in one group, other tabs become active also. Here is my code below. I want to be able to put as many css tab groups on a page.
The html
<div class="row">
<article class="tabs">
<section id="tab2" class="tab_block">
<h2>Tab 2</h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab3" class="tab_block">
<h2>Tab 3</h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab1" class="tab_block">
<h2>Tab 1</h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
<div class="row">
<article class="tabs">
<section id="tab5" class="tab_block">
<h2>Tab 2</h2>
<div>
<p>This content appears on tab 2.</p>
</div>
</section>
<section id="tab6" class="tab_block">
<h2>Tab 3</h2>
<div>
<p>This content appears on tab 3.</p>
<p>Some more content...</p>
</div>
</section>
<section id="tab4" class="tab_block">
<h2>Tab 1</h2>
<div>
<p>This content appears on tab 1.</p>
<p>This tab is <b>last</b> in the markup so that it can be styled as active tab on page load.</p>
<p>Some more content...</p>
</div>
</section>
</article>
</div>
The css
body {
font: 62.5%/1.5 Georgia,serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
.row {
width: 100%;
float: left;
position: relative;
height: 256px;
}
.tabs {
display: block;
margin: 0 auto;
position: relative;
width: 40em;
}
.tab_block {
position: absolute;
}
.tab_block h2 {
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
left: -1em;
margin: 0;
padding: 0;
position: relative;
top: -2.7em;
width: 6em;
}
.tab_block:first-child h2 {
left: 5.3em;
}
.tab_block:nth-child(2) h2 {
left: 11.6em;
}
.tab_block h2 a {
color: #000;
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 100%;
}
.tab_block div {
box-sizing: border-box;
margin: -5.4em 0 0 -2.1em;
height: 0;
overflow: hidden;
visibilty: hidden;
width: 0;
}
/* last in HTML markup, but visually shown first */
.tab_block:last-child {
background: #FFF;
}
.tab_block:last-child h2 {
background: #FFF;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
left: -1.05em;
}
.tab_block:last-child h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
.tab_block:target,
.tab_block:target h2 {
background-color: #FFF;
}
.tab_block:target h2 {
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0,0,0,0.1);
}
.tab_block:target h2:after {
border-bottom: 4px solid #FFF;
content: '';
display: block;
position: absolute;
width: 100%;
}
.tab_block:target ~ .tab_block:last-child h2 {
background: #DDD;
border: 0;
box-shadow: none;
left: -1em;
}
.tab_block:target ~ .tab_block:last-child h2:after {
border-bottom: 0;
}
.tab_block:target div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
padding: 1em 2em;
height: auto;
visibilty: visible;
width: 40em;
}
.tab_block:target ~ .tab_block div {
border: 0;
box-shadow: none;
height: 0;
overflow: hidden;
padding: 0;
visibilty: hidden;
width: 0;
}
.tab_block h2 {
transition: all 500ms ease;
}
Instead of using :target selector, use :checked selector and wrap your section elements in label of radio elements.
JSFIDDLE (Updated example)
Doing like this, you can have as many individual groups as possible and also without using javascript.
HTML Structure
-- row
-- tabs
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
-- input (same group)
-- label
-- section
CSS
body, html {
margin: 0px;
padding: 0px;
}
body {
font: 62.5%/1.5 Georgia, serif;
margin: 10em 0 0;
}
h2 {
font-size: 2em;
}
p {
font-size: 1.6em;
}
input[type=radio] {
position: absolute;
visibility: hidden;
pointer-events: none;
z-index: 1;
}
.clear-float {
clear: both;
}
.tab_block ~ .tab_block h2 {
left: 50%;
transform: translate(-50%, -100%);
}
.tab_block ~ .tab_block ~ .tab_block h2 {
left: auto;
right: 0px;
transform: translate(0%, -100%);
}
.row {
width: 40em;
margin: 0 auto;
position: relative;
margin-top: 5em;
}
.tab_block div {
display: none;
background-color: white;
box-sizing: border-box;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
width: 40em;
}
.tab_block h2 {
position: absolute;
top: 1px;
transform: translateY(-100%);
background-color: #DDD;
border-radius: 5px 5px 0 0;
line-height: 2em;
margin: 0;
padding: 0;
width: 6em;
border: 1px solid #DDD;
border-bottom-color: #FFF;
box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
transition: all 500ms ease;
text-align: center;
cursor: pointer;
border-bottom: none;
}
.tab_block:last-child div {
border: 1px solid #DDD;
border-radius: 0 0 5px 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
padding: 1em 2em;
height: auto;
overflow: visible;
visibilty: visible;
width: 40em;
}
input[type=radio]:checked + label h2 {
background-color: white;
}
:checked + label div {
display: block;
}