I have a dialogue box or a arrow box which should be set to max height of 60%, and all the content inside the box overflows via scroll, this is the markup:
<div class="cart">
hello world
</div>
and here is the css to make a arrow-head on top:
.cart {
position: fixed;
background: #ffffff;
opacity: 1;
box-shadow: 1px 1px 10px;
border-radius: 5px;
margin-left: 74.8%;
width: 300px;
top: 70px;
padding: 13px;
z-index: 20;
text-align: center;
display: none;
max-height: 60%;
overflow: auto;
}
.cart:after, .cart:before {
top: -20px;
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.cart:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.cart:before {
border-color: rgba(12, 143, 176, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
if I remove the "overflow" property the arrow head shows up, but when I use it, which I have to It disappears, I want both, an arrow head and scrollable div, but I think the arrowhead just gets inside the scroll. is there any solution for this?
Thanks for the help
Related
I am making a section which contains price info section and order now button.
Here, there is a wrapper border class that make the border for the entire section.
Scenario:
In this case consider that button is disabled with opacity and hence it looks like this now.
.border {
border: 4px solid rgb(195, 0, 38);
border-bottom: transparent;
}
.info-card {
padding-bottom: 20px;
}
button {
background-color: rgb(195, 0, 38);
opacity: 0.5;
border-radius: 10px;
color: #fff;
padding: 5px;
}
.order-button {
margin-top: -1.5rem;
}
<div class="border">
<div class="info-card">
<h1> Info Section </h1>
</div>
</div>
<div class="order-button">
<button>
Order Now
</button>
</div>
But the requirement is that the border line should go behind the button (and not above the button) as like the below image.
Expected Result:
Note: Here opacity is included to make the button look like disabled.
Also the color given above varies and so please don't include any other addition of colors.
Tried with increasing z-index of button but that doesn't work in this case.
Try this:
button::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
border-radius: 20px;
background-color: rgba(197, 218, 227,.5);
top: 0;
z-index: 9999;
}
button {
background-color: rgb(197, 218, 227);
border-radius: 37px;
color: #fff;
padding: 12px 5px;
display: block;
width: calc(100% + 4px);
margin-left: -2px;
margin-right: -2px;
border: unset;
cursor: pointer;
position: relative;
}
I've got an issue with menu styling.
Menu looks like this:
And each element is styled as follows:
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:hover:after {
content: " ";
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%,0%);
top: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
In this way i can achieve such effect:
Still i'm having serious issues making this triangle stay there after a click. Creating jQuery handlers adding classes seems not to work at all since the new class overwrites navi buttons. Have tried playing with :target but without luck. Any ideas?
EDIT:
Added a fiddle: https://jsfiddle.net/a7zs3z6o/
Add a tabindex to each gallery-navi-element element:
<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>
That will allow them to be focused when clicked.
You'll then want to remove the default outline that appears on focused elements, which you can do with:
.gallery-navi-element:focus {
outline: none;
}
Updated Fiddle
Instead of changing the navi links' class, just add a new .hover class that has the same styles as :hover. Then you won't have a problem with lots of overwriting styles.
You would probably have less trouble doing this if you simplified the CSS to only include the transitioned styles in the hover state/added-class state.
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
Note that the only reason for the border-top-width transition is so that your triangle doesn't cover up the bottom of the Y in the first couple links.
Example:
var navLinks = document.getElementsByClassName('gallery-navi-element');
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].addEventListener('click', function(){
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].classList.remove('hover');
}
this.classList.add('hover');
}, false);
}
.gallery-navi {
border-radius: 28px;
width: 950px;
height: 55px;
background-color: rgb(74, 125, 51);
margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
margin: 0 auto;
width: 870px;
}
.gallery-navi-separator {
width: 2px;
background-color: rgba(255, 255, 255, 0.2);
height: 36px;
float: left;
margin-top: 10px;
}
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
<div class="gallery-navi">
<div class="gallery-navi-wrapper">
<div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
</div>
</div>
What I'm trying to do is to create a triangle on the bottom border of a block with CSS, and write some text in there like it's shown in this figure :
What I did so far, is :
Create the block element, with its its orange big bottom border.
Create the triangle using CSS.
All I need now is a way to place that triangle exactly in the middle of that exact place. I tried several ways to do that, but without any result.
Here's my code :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
.content_block.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #FE992C;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
You can notice that there's an HTML class called triangle that I don't show. I don't know how to show it exactly in that position.
EDIT :
I'm using the exact selector ( .content_block ) for showing other blocks; Like this block for instance :
So, a solution with after pseudo element will affect this block too. This is why I really need to avoid pseudo elements..
Edit
If you can't use a pseudo element for the triangle, you will need to add an element. You can add it as a child of the .content_block element. This uses the same approach described in the original answer :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.triangle {
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="triangle"></div>
<div class="text">Je déménage</div>
</div>
Original answer:
You can make the triangle with the border technique and a pseudo element.
In the following example, I used the .content_block:after pseudo element with absolute positioning:
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
User :after selector and position that absolutely
Here is updated fiddle:
https://jsfiddle.net/yod8Lvjt/1/
What is the best way to make the following layout (where the grey area is a simple transparent background, i.e. with 60% color transparency and the corners are cut or rounded):
I tried several tutorials regarding tab menus, but i failed on the parts that i marked red. I can't figure out how to "hack" the stylesheets to make a line, that is interrupted below the active tab AND has a rounded corner on the right.
I made a solution with a simple colored background (not transparent) by adding a bottom-border on the active tab in the same color as the content and moving it -2 px to the bottom (overlay). But this does not work with transparency.
Please note: The tabs have to be flexible regarding their width (because it is a multi-language layout).
Proof of Concept
I am afraid to say that it can be done, but it is a bit of a mess and my
solution involves using absolute position of elements with specific dimensions,
and of course, extra markup.
The solution may not work too well in a flexible design, but I thought it would
be illustrative to post it.
The trick is to use the class .active to turn on the segments that draw the
lines before and after the tab element.
If you switch the .active class to the other tab, you will see the effect.
Note: There is a glitch towards the bottom of the tab, sometimes a white space
shows up on certain screen sizes in Firefox, but it could be an artifact of
the snippet tool of StackOverflow. If you look at the same code in jsFiddle.net, the layout seems to work.
jsfiddle: http://jsfiddle.net/audetwebdesign/hujhmLap/embedded/result/
#tab-list {
width: 400px;
height: 42px;
position: relative;
}
.tab-panel-1 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab-panel-2 {
width: 400px;
height: 42px;
position: absolute;
top: 0;
left: 0;
display: block;
}
.tab {
background-color: rgba(125, 125, 125, 0.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: solid 2px #000;
border-bottom: 0;
display: block;
text-align: center;
padding: 10px 0 0 0;
width: 80px;
height: 30px;
}
.t1 {
position: absolute;
left: 0px;
top: 0px;
}
.fill1 {
position: absolute;
left: 82px;
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
.t2 {
position: absolute;
left: 100px;
top: 0px;
}
.pre2 {
position: absolute;
left: 0px;
right: calc(400px - 100px - 2px);
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-left: 2px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 0px;
}
.fill2 {
position: absolute;
left: calc(100px + 80px + 2px);
right: 0px;
bottom: -5px;
height: 5px;
border-top: 2px solid black;
border-right: 2px solid black;
border-top-right-radius: 5px;
}
#content-box {
background-color: rgba(125, 125, 125, 0.25);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 0px;
border: solid 2px #000;
border-top: none;
height: 200px;
padding: 20px;
width: 356px;
}
.t1, .fill1,
.pre2, .t2, .fill2
{
display: none;
}
.active .t1, .active .fill1,
.active .pre2, .active .t2, .active .fill2
{
display: block;
}
<div id="tab-list">
<div class="tab-panel-1 ">
<span class="tab t1">Tab 1</span><span class="fill1"></span>
</div>
<div class="tab-panel-2 active">
<span class="pre2"></span><span class="tab t2">Tab 2</span><span class="fill2"></span>
</div>
</div>
<div id="content-box">
Hello World!
</div>
So assuming I have the below triangle. Without adding any html or tags how could I go about positioning the text into the center of the triangle?
Fiddle: http://jsfiddle.net/3LXaD/
You will notice the white text in the top right corner of the triangle. I understand a triangle is a large border around the shape. Is this even possible?
CSS
div:nth-of-type(1) {
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div {
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
HTML
<div>This is a triangle</div>
Without extra markup try this:
div:nth-of-type(1):before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 150px 130px 150px;
border-color: transparent transparent #d30000 transparent;
line-height: 0px;
_border-color: #000000 #000000 #d30000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
position: absolute;
top: 0;
z-index: -1;
left: 50%;
margin-left: -150px;
}
div {
font-size: 16px;
color: #ffffff;
text-align: center;
line-height: 130px;
position: relative;
}
Here is an example.
Ciao
Ralf
Wrap the text in the span and position it absolutely:
JSfiddle
span{
position: absolute;
top: 80px;
left: 33%;
}
<div><span>This is a triangle</span></div>
Here would be the solution if you were to use a pseuedo element. (not best practice)
div:after{
content: 'This is a triangle';
color: white;
position: absolute;
top: 80px;
left: 33%;
}