I m trying to make vertical float button for my website but this is what I m getting. Text is outside box
CSS
#feedback {
height: 104px;
width: 104px;
position: fixed;
top: 40%;
z-index: 999;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback a {
display: block;
background: #f00;
height: 15px;
width: 70px;
padding: 8px 16px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 1px #333;
border-left: solid 1px #333;
border-right: solid 1px #fff;
}
#feedback a:hover {
background: #06c;
}
HTML
<div id="feedback">
Test
</div>
The height: 15px is what that causes this issue for you. Everything is fine otherwise. Remove the height from #feedback a and it will be alright.
#feedback a {
display: block;
background: #f00;
height: 15px; /* Remove this... */
Height of an element is generally set by the content and the line-height. If you try to manually set, it goes out of context with the contents. That's what just happened now.
Related
I'm new to HTML/CSS and attempting to replicate this button effect in a project of mine where the buttons are children of a div. However, whenever I do the translateY, my buttons move to the side instead. Here is the HTML and CSS; button-2 is the problematic one:
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(-50%, 0);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translateY(5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
The problem seems to stem from transform: translate(-50%, 0);, which is what I have to do to center button-2 horizontally in the container div. I can remove that line and the effect works, but then button-2 is no longer centered horizontally. Why is it that transform: translate(-50%, 0); seemingly causes the subsequent transform: translateY(5px); not to work for button-2? Is there anyway I can horizontally (but not vertically) center button-2 while also being able to achieve the desired effect?
The problem is that when you set the translate property on the second button becoming active, you overwrite the original transform which is moving the button by half its width in the negative X direction.
It is important to keep this translation as well as the new one so make the translation in the active state set both the X and Y values that you want.
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(-50%, 0);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translate(-50px, 5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
Note: as others have suggested you may like to look into using flex (or grid) to position your buttons rather than having to mess around with positioning using absolute and translations. The translate for Y could then remain as in the original and you wouldn't be translating in the X direction at all.
you have gotten your X and Y axis mixed up.
you translated via translate(-50%, 0) which moves it by an X of -50% and a Y of nothing, you can fix this by changing it to translate(0, -50%) which will move it down a Y of -50%, and an X of 0.
test the snippet:
.container {
position: relative width: 600px;
height: 600px;
}
#button-1 {
position: absolute;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: ridge;
border-radius: 15px;
box-shadow: 0 9px #999;
top: 50%;
left: 25%;
}
#button-1:hover {
background-color: #3e8e41
}
#button-1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(10px);
}
#button-2 {
position: absolute;
width: 100px;
padding: 5px 5px;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: darkslategray;
background-color: antiquewhite;
box-shadow: 0px 9px gray;
cursor: pointer;
top: 62%;
left: 50%;
/* if i remove this line, translation works as expected
but then the button is no longer centered horizontally
consequently, keeping the line breaks the affect
but the button can be centered horizontally
*/
transform: translate(0, -50%);
}
#button-2:hover {
background-color: cornsilk;
}
#button-2:active {
background-color: cornsilk;
box-shadow: 0px 3px gray;
transform: translateY(5px);
}
<h2>Animated Button - "Pressed Effect"</h2>
<div class=container>
<button id="button-1">Btn1</button>
<button id="button-2">Btn2</button>
</div>
I want to resize the image in an :after element but nothing seems to work, I finally managed to resize it and style it the way I want it using the display:flex but it only works on FireFox. Also whenever I try to put the image in a background or background-image it doesn't display the image at all, no idea what's wrong here.
Here you can see what the website https://tradeideasfx.com/2021/05/16/btc-usd-trade-idea/ it's the "long/short" button at the top of the post. If you view the website on FireFox the buttons look exactly as they should be, but on any other wbsite its all over the place. I appreciate any help in advance.
.post-tags {
float: left;
font-weight: bold;
list-style: none;
padding: 0;
margin: 0;
}
.post-tags>.Long {
color: #FFF;
background-color: #03cd08;
padding: 1px 10px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.post-tags>.Short {
color: #FFF;
background-color: #fc0000;
padding: 1px 10px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.post-tags>.Short:after {
content: url(https://tradeideasfx.com/wp-content/uploads/2021/07/arrow-icon.png);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display: inline-flex;
height: 25px;
width: 20px;
padding: 5px;
margin-top: -2px;
}
.post-tags>.Long:after {
content: url(https://tradeideasfx.com/wp-content/uploads/2021/07/arrow-icon.png);
display: inline-flex;
height: 25px;
width: 20px;
padding: 5px;
margin-top: -2px;
}
<span class="post-tags">
<a rel="tag" href="" class="Long">Long</a>
<a rel="tag" href="" class="Short">Short</a> </span>
Here is a simple ribbon I want to position at the left upper corner of the screen:
.ribbon {
width: 200px;
background: #e43;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #ffffff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-family: "Open Sans Regular";
font-size: 1.5em;
top: -10px;
left: -80px;
height: 80px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: fixed;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
As you see the New word on the green ribbon is not totally visible because it is on the upper edge of the rectangle.
How can I position the ribbon's text on the lower edge of the rectangle so that we can see it correctly.
I used the below flex postioning on the ribbon class but it pushes the text to the right and not the center:
display: flex;
justify-content: flex-end;
align-items: flex-end;
You can update your code like below:
.ribbon {
background: #e43;
color: #ffffff;
font-size: 1.5em;
position: fixed;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin:top;
padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
I have the following Jade / HTML:
a.service.comparison(ng-href="...")
.icon
i.far.fa-map-signs
.content
span.d-block.title Compare energy deals
span.text Looking for a better energy deal?
.arrow
button.btn(type="button")
i.fas.fa-chevron-circle-right
And Less / CSS:
.service {
color: #grey-dark;
display: flex;
margin: 0 auto 15px;
max-width: 100%;
.icon {
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 28px;
padding: 10px 15px;
i {
position: relative;
top: 50%;
text-align: center;
.transform(translateY(-70%));
width: 40px;
}
}
.content {
border: 1px solid #ccc;
border-right: none;
flex-grow: 1;
padding: 15px;
.title {
color: #green-medium;
font-size: 17px;
}
}
.arrow {
min-height: 100%;
.btn {
background: #green-medium;
border-radius: 0 3px 3px 0;
color: white;
padding: 0;
width: 35px;
height: 100%;
i {
position: relative;
top: 50%;
.transform(translateY(20%));
vertical-align: top;
}
}
}
}
It looks nice on all Browsers, the left icon is in centre and the right green button has a 100% height and fill the box... Unfortunately on iOS Safari it looks differently: the left icon is on top and the right button doesn't fill the entire box height as you can see in the image below.
Does anyone know how can I fix this? Thanks!
EDIT:
Transform Mixin:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
transform: #string;
}
When browser get resized absolutely positioned after pseudo-element overflows and causes problems. I am looking for a way to fix this. Just resize the browser until you reach header text.
Here is a demo of the problem: http://codepen.io/anon/pen/grKNoJ
.section {
font-family: 'Quantico';
font-weight: bold;
font-size: 36px;
color: white;
border-top: solid 1px black;
text-transform: uppercase;
margin-bottom: 28px;
}
.section-title {
background-color: black;
display: inline-block;
padding: 8px 18px;
position: relative;
}
.section-title:after {
content: " ";
position: absolute;
display: block;
right: 0;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #000;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
You can fix it by adding text-overflow: ellipsis; and white-space: nowrap; to .section-title.
You could also set a max-width to that element, and set it to different values according to your media queries, and have it serve your needs on different devices.
Here is the updated result: http://codepen.io/johnnykb/pen/mPKZLg