I'm trying to write a simple step form script and I would like the ability to use custom titles for tooltips. I created an attribute called data-title to accomplish this and using the pseudo-element ::after I created a tooltip. The problem I'm having is that the tooltip appears behind the next siblings in the list instead of over top. Here's a link to my JS-Fiddle, and here's the code:
Foo
Bar
Stuff
foo 2.0
More
li{
list-style:none;
}
.step-form{
width:90%;
}
.step-form li{
float: left;
margin:0 5px;
text-align: center;
position: relative;
z-index:10;
}
.step-name{
display: table-cell;
vertical-align: bottom;
text-align:center;
margin:0 5px;
z-index:20;
}
.step-num{
border: 2px solid #B8B5B5;
border-radius: 50%;
width: 15px;
height: 15px;
display: inline-block;
margin:10px 5px;
}
.step-num[data-title]:hover:after {
background: #366F9E;
border-radius: .5em;
bottom: 2em;
color: #fff;
left: -2.5em;
content: attr(data-title);
display: block;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
opacity:1;
z-index: 30;
}
Please keep in mind I'm trying to make this as simple and light weight as possible. Thanks!
You need to avoid the li elements creating a stacking context. Avoid setting a numeric z-index on them, and set it instead to auto
.step-form li{
float: left;
margin:0 5px;
text-align: center;
position: relative;
z-index: auto; // change this
}
fiddle
Related
Considering the next code:
.test {
position: relative;
padding: 0;
margin: 0;
border: 0;
background: initial;
font-size: 11px;
border: 1px solid black;
margin-left: 20px;
}
.test::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: red;
}
<button class="test">Some Text Content</button>
In Chrome it's rendered like (hot it is required):
In Safari it's rendered like:
So, in Safari it's not vertically centered and the block has different size.
The main question is how to center it vertically in Safari?
The secondary question is how to make blocks absolutely similar?
I tried display: flex; align-items: center;, vertical-align: center;, changing line-height – nothing from that seemed to work...
.btn {
border:1px solid #000;
box-sizing:border-box;
color:#000;
display:inline-block;
font:1rem/1.5 sans-serif;
height:2rem;
padding:0 1rem;
text-align:center;
vertical-align:middle;
width:auto;
}
I want to have a Tags input (just like the stackoverflow's one) where users can type their chosen tags and it shows inside the input.
I decided to do it inside of a ul where the input is the last li:
<ul class="tag-box">
<li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
<li class="new-tag"><input class="input-tag" type="text"></li>
</ul>
But the problem is the width of the input is always small by default while I want it to take all the remaining width:
my css:
.tag-box {
list-style: none;
padding: 3px;
margin: 0;
display: inline-block;
font-family: arial;
width: 100%;
border: 1px solid #F39F19;
border-radius: 4px;
}
.tag-box li {
padding: 4px 6px;
float: left;
display: inline-block;
}
.tag-box li.tags {
background: #F1C617;
color: #fff;
border-radius: 4px;
margin: 4px 3px;
position: relative;
}
.tag-box li .input-tag {
color: #000;
height: 24px;
vertical-align: middle;
border: none;
outline: none;
background: none;
}
Is there a way where my input my input can take whatever left of space as width according to the loop?
Here's one way you could do it, I'm adding 3 things. You'll eventually want to give it a min-width and make it wrap though.
.tag-box {
display: flex;
}
.tag-box .new-tag {
flex: 1
}
.tag-box li .input-tag {
width: 100%;
}
I have a unordered list where the bullets are created with FontAwesome, a bit of background and a border radius.
I want the second line of text be be alined below the first one and not under the bullet.
li::before {
display: table-cell;
padding-right: .3em;
content: "\f00c";
float: left;
margin: 0 9px 0 0;
font: 10px 'FontAwesome';
width: 20px;
height: 20px;
position: relative;
background: #3498db;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-align: center;
line-height: 20px;
color: #FFF;
}
Somehow float: left seems to "conflict" with display: table-cell.
Any ideas on how to get this to work? -> jsfiddle
Use position:absolute for :before and padding-left for <li>
li {
position:relative;
padding-left:32px;
}
li::before{
position:absolute;
top:0;
left:0;
}
DEMO
Use position:absolute for :before and padding-left for <li>, but do not use left or top. Use margins instead.
http://jsfiddle.net/semencov/vvLtj43g/
I am trying to align the menu to center. I have tried putting in text-align: center !important; in various spots but it didn't do anything.
Anyone have any ideas?
Thanks in advance for your help!
.menu_wrapper
width: 88%;
margin: 0 auto;
#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;
#main_menu nav ul:after
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;
#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;
#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;
The best way to centerize your navigation is to put a display: "table" to your main container. This way you will be sure that everything will be centerized.
.menu_wrapper {
display: table;
margin: 0 auto;
}
change this section
.menu_wrapper
{
width: 88%;
margin: 0 auto;
}
After change
.menu_wrapper
{
width: 88%;
margin: 0 auto;
max-width:88%;
}
Add this style to your CSS:
#main_menu {
margin: 0 auto;
}
Or (if you have a top- or bottom-margin to preserve):
#main_menu {
margin-right: auto;
margin-left: auto;
}
The first example is shorthand for setting vertical margins to zero and horizontal (left and right) margins to automatic. The vertical doesn't matter so much, but the auto setting for your horizontal margins will push the element equally away from the left and right sides of its containing element (or your document, depending on your HTML), thereby centering it.
Note that this horizontal-centering method works only with non-floated, block-displayed, statically or relatively positioned elements—which I'm guessing is fine for your app, but we can't know without seeing your HTML.
In html,
try this
<center><div class='menu_wrapper'> your content </div></center>
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.