i have a menu button in the left side of website, i can't float it to the right side, i tried display properties thousands times
here my css:
.menu-button {
position: fixed;
z-index: 999999999;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
outline: 0;
}
and here is the site you can check the inspact element by the way : wwww.takchinsaffron.com
Add right: 0 to your selector:
.menu-button {
right: 0;
}
Add left:100% to your selector:
.menu-button {
left: 100%;
}
If the element goes out of bounds, try adding transform:translate
.menu-button {
left: 100%;
transform:translate(-100%, 0);
}
Related
I have a button with only a single tag (<a>). I want to skew the background of the button and keep the text as is, so I'm using this code, which is working as expected in my Codepen example:
<a class="et_pb_button et_pb_pricing_table_button" href="#">$200 / Month</a>
.et_pb_pricing_table_button {
margin: 10px;
cursor: pointer;
background-color: transparent;
border: none;
height: 50px;
padding: 10px 60px;
position: relative;
color: #000000;
font-weight: bold;
text-decoration: none;
}
.et_pb_pricing_table_button:after {
z-index: -1;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewX(-15deg);
border-radius: 0px;
background-color: #ffd100;
}
.et_pb_pricing_table_button:hover:after{
background-color: skyblue;
}
However, when I apply that code to my page, it is not rendering as expected (not visible). I can't find anything that is stopping this from working (the parent elements are position: relative). I also tried increasing the z-index of the pseudo selectors, but that didn't help either. What am I missing?
so i have the following design for some "button tabs".
One side is curved, so border radius would not really be possible.
But is this type of curve even possible ?
or am i doomed to use some sort of image?
mostly looking for tips on how this might be accomplished, or somewhere i can look for a solution, since my previous tries to find a solution has yet to yield a result.
Html
<div class="tab-row">
<button>All Products<div class="tab-row__counter">20</div></button>
<button>Hardware<div class="tab-row__counter">20</div></button>
<button>Virtual<div class="tab-row__counter">20</div></button>
<button>Bundles<div class="tab-row__counter">20</div></button>
</div>
Css
.tab-row{
button{
background-color:$element-bg;
border:0;
color:$white;
width:300px;
height:90px;
margin-right:20px;
margin-top:40px;
border-radius: 5px 100px 0 0;
&:first-child{
margin-left:40px;
}
.tab-row__counter{
}
}
}
This is what i ended up with as a result,
https://codepen.io/andrelange91/pen/YzPqJXO
not exactly curved but close enough
You can try the curves by using the border-radius, transform, and transform-origin properties like,
/**
* Slanted tabs with CSS 3D transforms
* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
*/
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1.5em 2em 1em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -7px;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: .5em; left: 0;
z-index: -1;
border-radius: 10px 10px 0 0;
background: #434f78;
box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom left;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
You can use radial gradient also,
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1em 5em 1.2em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -20px;
border: 0px none;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0;
right: 0;
bottom: .5em;
left: 0;
z-index: -1;
background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
transform: perspective(10px) rotateX(1deg);
transform-origin: bottom left;
border: 0px none;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
Whilst this does not replicate the exact shape you're after, this does provide an example of the method I described in the comments in how to approach it. You will just need to edit the values in ::before and ::after to get it to your desired shape.
.curve {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
.curve:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
.curve:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.tab {
height: 150px;
width: 300px;
background: red
}
<div class="container">
<div class="tab"></div>
<div class="curve"></div>
</div>
Also take a look at Creating s-shaped curve using css
Here is a fiddle demonstrating my problem: JSFiddle
I'm making a custom drop down (in reality I'm using an icomoon icon instead of the V)... it looks nice, but the ::after for the parent element is blocking the select :(
<div class="select-style">
<select>
<option value="">...</option>
<option value="1365">Some term</option>";
</select>
</div>
CSS
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
}
}
select {
width: 100%;
height: 24px;
border: 1px solid rgb(199, 199, 199);
border-radius: 3px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
&::-ms-expand {
display: none;
}
}
I've looked into having JS open the drop down, but found out that doesn't work. I've even tried using z-index to see if that would help... but for some reason the icon gets hidden even though the select has a transparent background.
How can I make it so that the custom icon is visible over the select but does not block my select from being clicked?
Add position:relative and z-index:1 to the select itself
https://jsfiddle.net/hbpqvkqL/
select {
...
position: relative;
z-index: 1;
}
yopu can set the ::after to have z-index: -1;
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
z-index: -1;
}
}
I am having difficulties centering a an input and borders around text that I created. I am trying to center it with a percentages based setting, so that it becomes more responsive. It seems the percentages are off and every time I go over left: 35%;, it does not move over anymore.
The same applies to my submit button, inside of the search input. I took the percentage left out because it did not do anything.
I have stored all of my code inside of this fiddle:
https://jsfiddle.net/ghp4t489/
But, to get the best option to view what I am trying to do, is to visit my website. realtorcatch.com/test_index
How can I get the text with borders/search bar to be centered in the page?
Here is my CSS
.search_option_container_out {
text-align: center;
top: 450px;
left: 30%;
position: absolute;
z-index: 111;
}
.search_option_box {
position: absolute;
text-align: center;
left: 40%;
}
.search_option_box li {
display: inline;
border: 1px solid black;
line-height: 2em;
padding: 20px 75px;
background: rgba(24, 24, 24, 0.3);
color: #FFFFFF;
cursor: pointer;
}
.search_option_box li:hover {
background: rgba(0,0,255, 0.3);
}
.home_searchbar_out {
text-align: center;
padding-top: 60px;
}
.home_searchbar {
padding: 10px;
}
.home_search_input {
position: absolute;
left: 45%;
width: 575px;
padding: 14px;
font-size: 1.1em;
}
#home_search_submit {
padding: 11px 20px;
position: absolute;
background-color: blue;
color: #FFFFFF;
cursor: pointer;
font-size: 1.1em;
z-index: 1;
}
your code demo here: https://jsfiddle.net/ghp4t489/4/
essentially, you want to use the concept of centering a container inside the page like so:
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>
this code is using margin: auto to center the div in the page.
EDIT: https://jsfiddle.net/ghp4t489/7/ with button on the right and next to the input
https://jsfiddle.net/ghp4t489/9/ with button on right inside the input
http://fiddle.jshell.net/9m6a5y5p/
As you can is in demo above, when hover above span element tooltip is shown and i want only to show when hover on span... Yes I know i can use display: none, but i am trying to avoid that...
tooltip {
color: #E4095C;
position: relative;
}
.tooltip::before,
.tooltip::after {
opacity: 0;
z-index: -100;
position: absolute;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
z-index: 100;
}
.tooltip::before {
content: '';
border: .825em solid transparent;
border-top-color: #0D8EAD;
bottom: 45%;
left: 35%;
}
.tooltip::after {
content: attr(data-tip);
width: 12em;
padding: .85em;
background: #0D8EAD;
bottom: 175%;
left: 5%;
margin-left: -3.25em;
color: #f8f8f8;
}
Just add following css after .tooltip::after{}
.tooltip::after {
pointer-events: none;
}
Have fun..!!
You can use pointer-events to prevent hover events from firing. Add this to your CSS:
.tooltip::after {
pointer-events: none;
}