Please visit the 'jsfiddle' Code, where the output can be seen. When hover displays the menu text, the background of the text field is transpernt + and lower zindex. I haven't set any transparency or zindex to the menu.
I have tried every possible technique to get it resolved but no luck.
.control-menu {
float: left;
width: 50px;
background-color: #F0F0F0;
height: 380px;
border-right: 1px solid #e0e0e0;
z-index: 100;
}
.control-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.btn {
position: relative;
display: block;
text-decoration: none;
background-color: #e0e0e0;
padding: 15px 20px 10px 20px;
text-align: center;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
text-shadow: #666666 1px 1px 1px;
}
.btn-name {
display: none;
border-top: 1px solid #f0f0f0;
padding-top: 16px !important;
}
.btn:hover .btn-name {
display:inline;
background-color: #e0e0e0;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
.btn.active {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
can someone please guide solution?
just add
z-index:200
to the .btn, didn't change any positioning fiddle
just add position: relative; and z-index: 1000;
.btn:hover .btn-name {
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
position: relative;
z-index: 1000;
}
in the btn:hover .btn-name add position relative and z-index: 1
.btn:hover .btn-name {
/* add this */
position: relative;
z-index: 1;
/* you code */
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
here the fix : jsfiddle
Related
i have this navbar, when i hover on tag the result is :
when hover on
i try to make it like that , but i can't :
i need like this pic
.
menu-large-hover {
position: static !important;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: none;
cursor: pointer;
text-decoration: underline;
}
add/edit below classes in your css
.menu-large-hover a#font-mega {
background: #fff;
z-index: 200000;
padding: 16px 27px
}
.navbar-nav > li {
margin: 0 9px 0 0;
height: 51px
}
I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/
i want to give box shadow on the hexagon
here is my jsfiddle
jsfiddle
and this is my hexagon css property
.hex1 {
background-color: rgba(52,152,219,.5);
text-align: center;
line-height: 70px;
height: 80px;
width: 140px;
margin: 60px 10px;
position: relative;
z-index: 1;
box-shadow:2px 2px 2px 2px grey;
}
.hex1:before {
border-top: 40px solid transparent;
border-bottom: 40px solid rgba(52,152,219,.5);
top: -80px;
}
.hex1:after, .hex1:before {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
left: 0;
z-index: -1;
}
.hex1:after {
bottom: -80px;
border-top: 40px solid rgba(52,152,219,.5);
border-bottom: 40px solid transparent;
}
this is not affecting on my hexagon .. is there any way to five border and box shadow to hexagon.
please help
You Can Use these code....
#hexagon{
background: red;
width: 100px; height: 60px;
position: relative;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
http://jsfiddle.net/jelmerdemaat/5UMxW/3/
I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?
I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.
you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}
How can the CSS coding be modified, such that the first row (top header) is frozen?
The code needs to be IE7 Compliant.
table.dataTable {
margin: 0;
padding: 0;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
color: #235A81;
font-family: Arial;
font-size: 9pt;
}
table.dataTable th {
margin: 0;
border-right: 1px solid #999;
border-top: 1px solid #999;
font-weight: normal;
padding: 4px 3px 3px 4px;
background: #ccc;
font-weight: bold;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
text-align: left;
width: 150px;
}
table.dataTable td {
margin: 0;
border-right: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 3px 3px 4px
}
div.scrollTableContainer {
height: 285px;
overflow: auto;
width: 900px;
margin: 15px 0 0 0;
position: relative;
}
div.scrollTableContainer table {
width: 952px;
}
div.scrollTableContainer td:last-child {padding-right: 20px;}
div.scrollTableContainer tr:first-child td { border-top: 0; }
div.scrollTableContainer thead th {border-bottom: 1px solid #999; }
Here's a working fiddle: http://jsfiddle.net/Uamhc/
Much like what #keeg said you would need to create two tables. However if you have no control over the content of the site you can use
$('.flexme').flexigrid();
Navigate to "Example 1" of this link to see an example of how to use it. :)
You'll need to draw two tables, one with the content, one just the header, put the header table in a div and set the div css property: display:fixed