I am trying to make a feedback button that is on the right hand side.
<button className="feedback-button">Feedback</button>
.feedback-button {
height: 40px;
border: solid 3px #CCCCCC;
background: #333;
width: 100px;
line-height: 32px;
-webkit-transform: rotate(-90deg);
font-weight: 600;
color: white;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
text-align: center;
font-size: 17px;
position: fixed;
right: -40px;
top: 45%;
font-family: "Roboto", helvetica, arial, sans-serif;
z-index: 999;
}
However this does not factor when a scrollbar is shown then feedback button gets overlapped with the scrollbar.
I would like it to be beside the scrollbar but when no scrollbar is shown it adjusts so it is beside the end of the page.
edit
Related
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>
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
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
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.
I need to create a fixed menu button which would be assigned to the right side of the browser. Currently i my code looks lie this:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
height: 28px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-webkit-transform: rotate(-90deg);
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Is it possible to center it in the div, the text was not adhered to the right side. And also is it possible to set test like this:
M
e
n
u
P.S.
Site is multilingual so i need the text, not image in this case.
This works:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
width: 15px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
word-wrap:break-word;
text-align: center;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Important: word-wrap and text-align are added to make it look like what you asked.
Its width is fixed to 15px instead of height.