I have a problem with a <a> tag on hover function.
<a href='#' onClick='javascript:showPrev();'class='prev'> </a>
The problem is in CSS code. If I set background-color in both a{} and a:hover{} the image will be visible. Otherwise, if there is no background-color or set to none, the image wont show on hover.
Here is my CSS
a.next {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
}
a.prev {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 0px;
float:left;
top: 0px;
width: 266px;
height: 600px;
display: inline;
}
#slideshow a.next:hover {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/next.png) 90% 65% no-repeat;
}
#slideshow a.prev:hover {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 0px;
float:left;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/prev.png) 10% 65% no-repeat;
}
Does anybody know what might be the problem? Thanks in advance.
There does seem to be some weird IE issue that means the a tags remain behind the image unless you set a background property, and I can't work out why at the moment...
BUT...
You can get around this by copying your background attributes from the :hover states to the 'normal' a states, and then adding a large negative background position, so they are effectively hidden until they are hovered over, e.g.:
a.next {
outline:none;
position: absolute;
text-decoration:none;
color:black;
z-index: 800;
left: 534px;
top: 0px;
width: 266px;
height: 600px;
display: inline;
background:url(../images/next.png) 90% -1000% no-repeat;
}
This should work
You have a \ just before #slideshow a.next:hover{ it's probably messing up IE's effort at parsing your CSS
Related
Exhausted in trying to figure out what is wrong. I can't seem to get my menu box to slide out.
https://jsfiddle.net/87cd9341/5/
My sliding menu box does not slide out when I click on the "nav-toggle".
Not sure if z-index has anything to do with it because I'm using it to cover some elements, but it shouldn't right?
I just added the main elements of the code...when you click the black tab, the blue box is suppose to shoot out right?
When I I manually add "open" into class for the "nav-side" into the html or input 0% into the transform section of the "nav-side" into the css, this is what I want to happen after I click the "nav-toggle' with jquery/javascript.
<div class="nav-side">
</div>
<div class="tab-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
.plageholder-container {
display: block;
width: 29.064039%;
min-width: 121px;
max-width: 121px;
margin-left: 2.955665%;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background: #ffffff;
z-index:2;
}
.nav-side {
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 295px;
max-width: 500px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background-color:blue;
z-index:1;
margin-left: 2.955665%;
padding-left: 120px;
transform:translateX(-100%);
transition: transform .06s ease;
}
.nav-side.open {
transform:translateX(0);
}
.tab-container{
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 25px;
max-width: 25px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 126px;
padding-right: 0px;
overflow: hidden;
background-color:#ffffcc;
z-index:0;
margin-left: 2.955665%;
}
.nav-toggle{
position: relative;
position: relative;
display: inline-block;
top: 3px;
width:25px;
height:121px;
background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}
$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});
});
Theoretically, if my research is correct I think class="nav-side" is suppose to change to class="nav-side open"
when I click the "nav-toggle" link ????????
The problem is probably either the position or z-index. Please provide a jsfiddle.
Missing a dot . in $("nav-side")
$(".nav-side").toggleClass("open");
The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
How to make that hovering the mouse over the boundary between two elements (here on the vertical line which separates the blue and red)
makes it possible to resize the width of each element?
I'm looking for the behaviour of https://stackedit.io/editor
Is this possible directly with <textarea> resizing possibilities ?
* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%; position: absolute; top:0; right:0; height: 100%;}
<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>
Sort of like this:
* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}
<textarea>hello</textarea>
<div>yo</div>
Note that the textarea:active style is necessary because of an issue with chrome that won't allow an element to be resized less than it's initial width. It's a bad hack to work around it until chrome fixes it.
I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.
I'm sure this cannot be done with CSS, since all what's inside position: relative will be inside of it. So I was wondering maybe there was a javascript solution.
Basically what I want to achieve is this: http://jsfiddle.net/ZVL8W/3/
But if you wrap it up with relative container and fixed width it won't work like in this: http://jsfiddle.net/ZVL8W/8/
And it must be in relative container, but those two elements must break out from it and work like in first link example. Is this possible somehow maybe with javascript? Note that I cannot remove relative parent container.
try this http://jsfiddle.net/ZVL8W/9/
HTML,BODY {
width: 100%;
height:100%;
margin:0;
padding:0;
}
.container {
position: relative;
width: 100%;
height:100%;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:ABSOLUTE;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:absolute;
top:50%;
right:0px;
margin-top:-50px
}
or this http://jsfiddle.net/ZVL8W/10/
.container {
position: relative;
width: 200px;
}
.left-box {
width: 100px;
height: 100px;
background-color: red;
display: block;
position:fixed;
top:50%;
left:0px;
margin-top:-50px
}
.right-box {
width: 100px;
height: 100px;
background-color: blue;
display: block;
position:fixed;
top:50%;
right:0px;
margin-top:-50px
}