Im trying to make a situation where, when one element is hovered over, a different element is transitioned. I typically use the exact code as below and it works fine, but somethings wrong this time around apparantly.
CSS
#sidebar {
width:300px;
height:100%;
position:fixed;
top:0px;
padding:10px;
left:0px;
background:#fff;
font-style:none;
-webkit-transition: width 2s;
transition: width 2s;
z-index:1;
}
#sideimage {
max-width: 150px;
height: 150px;
border-radius: 50%;
background: #111;
position: absolute;
top: 290px;
left: 25%;
}
#sideimage:hover #sidebar {
width: 700px;
}
If anybody can tell me what I'm doing wrong or give me another solution, that'd be very much appreciated.
Link to the page
Well your css doesn't make much sense.
#sideimage is a child of #sidebar so #sideimage:hover #sidebar won't ever work.
You cannot change a parent element based on a child's event without javascript.
You should give us more details on what you are trying to achieve exactly.
Related
I'm trying to have #menuContainer "above" #mainOverlay using the z-index property, but it won't work. My code for the two IDs:
menuContainer
#menuContainer{
width:650px;
height:50px;
position:relative;
z-index:2;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}
mainOverlay
#mainOverlay{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:1;
background-color: rgba(0,0,0,0.3);
}
Alternatively, you could check this JSfiddle out.
Reading similar questions didn't bear any fruits, so that's why I decided to ask a separate question, in case it won't work for other people in the same boat I am in.
All help greatly appreciated.
You are not in the same scope so the z-index will have no effect. You need to add the z-index on the same level, i.e to your parent element #mainOverlayWrap in your case. Remember you will also need to have position: relative|absolute|fixed; set for the z-index to have effect.
I'm creating a website with a videoheader.
Everything goes fine with the implementation.
Though one thing isn't going good.
Actually I should be able to reposition the video within a div in orde to see another piece of the content. (see screenshot)
What I want is that the video will go up, so that I can see the lower part of the video.
Now there is an overflow after 505px of height.
Can someone help me with this?
The css I used:
#cover
{
width: auto;
height: 505px;
}
.header-unit1
{
height: 505px;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container1
{
position: absolute;
z-index:-10;
}
#video-container1
{
top:0%;
left:0%;
height:505px;
width:100%;
overflow: hidden;
}
#testvid video
{
position:absolute;
}
#testvid video.fillWidth1
{
width: 100%;
}
Any tips would be nice!
Here's the general idea of what (I think) you're trying to accomplish:
HTML:
<div class="container">
<video ...></video>
</div>
CSS:
.container {
width:100%;
height: 505px;
position:relative;
overflow:hidden;
}
video{
max-width:100%;
position:absolute;
top:0px;
}
Then animate the video top position. You can do this with Javascript or add another class like video.animated { top: 50px; }
Thanks for the reactions.
I applied margin-top: -250px; to the video element which gave me another frame of the video, exactly what I needed.
For example, I now see the people walking in stead of the blue sky.
I have got issue with sub navigation list hiding behind the main div. I have used z-index. I know the problem is because of following block, tried different things but couldn't resolve it.. I am creating dynamic web design and what I want is the width of .contact_No_01 fill rest of right space, that is why I am using contact_No_01.
To refer code: jsFiddle
#header_block2 {
margin:0 auto;
width:90%;
position:relative;
overflow:hidden;
background-color:aqua;
}
#contact_strip {
position:absolute;
width:5%;
right:0;
height:62px;
top:50px;
z-index: 1;
overflow: hidden;
background-color:green;
}
you need to remove overflow:hidden; from this CSS and set it to visible:
jsFiddle (hover service menu)
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
overflow: visible; /* change is here */
background-color: aqua;
}
I have two divs.
The first one covers the whole screen and with a transparent background
the other div has a white background and a higher z-index then the first div. But the transparent background covers the second div with the white backgorund...what can I do to fix this?
.lightbox{
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
filter:alpha(opacity=50);
opacity:0.5;
}
#lightboxContent{
display: none;
width: 325px;
height: 260px;
background: #FFF;
position: absolute;
z-index: 2000;
top:0;
border:3px solid #CCC;
text-align:center;
}
http://jsfiddle.net/DHYFz/
This works perfectly fine for me using IE7+ with your setup. Possible overlapping elements in some other portion of your code?
Possible problem: if you were to, let's say, nest the lightboxContent element, keep in mind that the parent z-index will trump the child.
Easy fix is, not to nest lightbox > lightboxContent. Takes full width and height of container regardless.
An easy way to do it is stop IE7 by putting at the top of your html.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).