Here, I am trying to create the browser tab.
JsFiddle
.intrnlTabs {
background: #f0f1f3;
height: 35px
}
.intrnlTab {
background: #e7e9ec;
display: inline-block;
height: 30px;
text-align: left;
margin-top: 5px;
line-height: 35px;
border-top-left-radius: 10px;
position: relative;
margin-left: 12px
}
.intrnlTxt {
display: inline-block;
max-width: 150px;
height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 30px;
padding: 0 20px 0 10px
}
.intrnlCls {
position: absolute;
right: -23px;
height: inherit;
background: #dee1e5;
box-sizing: border-box;
top: 0;
width: 33px;
transform: skewX(30deg);
border-top-right-radius: 5px;
cursor: pointer;
display: inline-block;
text-align: center
}
.intrnlCls:hover {
background: #d7d8d8
}
.intrnlClsicon {
transform: skewX(-30deg);
display: inline-block
}
Output What I got
Output What I'm expect
I want newly added tab header should go behind previous tab without adding z-index value. I have achieved it adding z-index value. But, I don't want to add z-index value.
You don’t need to calculate a specific z-index for each item, or assign it via JS to begin with.
Adding a z-index of 1 to these “X” items is enough already to achieve what you want:
.intrnlCls { z-index:1; }
Related
how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.
I created a drag and drop or sortable image using touch punch.. Everything works fine in chrome even in android. But it seems it is not working in Safari using iPhone..
https://jsfiddle.net/y05w1mog/
Might be an CSS issue.. Image should be draggable to one of the four options below.
td {
width: 200px;
vertical-align: top;
}
.box {
border: 2px inset #aaaaaa;
height: 240px;
overflow-x: hidden;
text-align: center;
padding: 10px;
overflow-y: auto;
}
.box img {
position: relative !important;
}
#div-images img {
height: 120px;
position: absolute;
top: 5px;
left: 0;
}
#div-images {
height: 100px;
width: 150px;
position: relative;
margin: 0 auto;
border: 3px double black;
padding: 5px;
}
th {
background-color: #538DD5;
color: white;
}
It turns out
containment: 'window',
from the touch punch is the one, not working in safari..
I have got the following code:
Fiddle
.item {
width: 120px;
padding: 10px;
display: block;
background-color: #CCC;
float: left;
margin: 5px;
position: relative;
}
.item .item-preview {
position: relative;
z-index: 10;
display: block;
}
.item .item-content {
/*display: none;*/
position: absolute;
left: 0px;
top: 37px;
padding: 5%;
z-index: 11;
width: 90%;
background-color: #000;
color: #FFF;
}
I want the div ".item-content", when its displayed, is always on the left side and is as wide as the whole page, how can I do that?
If you remove the position: relative from .item, you will have the desired effect. I also removed the top: 37px; to fix the vertical positioning. If you need to tweak that, use margin-top instead
Fiddle
I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})
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.