Alright, so I've got a couple divs wrapped in a container. The two interior divs overlap each over by 15px; The problem is I'm not able to layer them like I want.
<div class="headerButtons">
<div id="WorkTableButton" class="WorkTableButtonActive">
Work Table
</div>
<div id="additionalCostsButton" class="additionalCostsButtonInactive">
Additional Costs
</div>
</div>
and the CSS looks like so,
.headerButtons{
margin:auto;
text-align:center;
}
.headerButtons div{
text-align:center;
height:27px;
text-indent:-9999%;
display:inline-block;
cursor:pointer;
}
#WorkTableButton{
width: 195px;
}
.WorkTableButtonActive{
background: url(ui_images/WorkTableActiveButton.png) no-repeat;
z-index:99999;
}
#additionalCostsButton{
width: 192px;
position:relative;
left: -15px;
}
.additionalCostsButtonInactive{
background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat;
z-index:0;
}
The problem is, the #WorkTableButton div still shows up behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it which layer the div above the other... Right?
What am I doing wrong?
The z-index property only works on elements that have been specifically positioned.
You need to add a position to your #WorkTableButton, like this:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton will appear behind #WorkTableButton after that.
Change
#additionalCostsButton {
left: -15px;
}
to
#additionalCostsButton {
margin-left: -15px;
}
Related
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.
Absolute div keeps showing up above the other divs, while is should appear underneath;
here is a quick demo:
http://jsfiddle.net/hvP8c/2/
<div id="logo">
<h1></h1>
<div id="line"></div>
</div>
#logo {
position: relative;
}
h1 {
width: 60px;
height: 60px;
border-radius: 50%;
border:1px solid #000;
background-color:#eee;
z-index:100;
margin:0 auto;
}
#line {
border-bottom:1px solid #033e5e;
position:absolute;
left:0;
top:30px;
width:100%;
z-index:1;
}
In this demo, the line should go below the circle. I tried to play with z-index but it didn't have any effects.
z-index only applies to positioned elements. Since the h1 (which appears to be the "other div" you are talking about) is position: static it won't apply there.
Set position: relative on the h1
You have to set position: relative or position: absolute to h1
Change z-index for #line from 1 to -1:
#line {
z-index: -1;
}
Demo: http://jsfiddle.net/hvP8c/4/
Beware that it may not work on IE6/7. OK in IE8.
just do => z-index:-1; of the id '#line'
I currently have the following layout for my webpage:
<div class="content-body">
<div class="left-content-bar siteborder"></div>
<div class="inner-content">
... some content
</div>
<div class="right-content-bar siteborder"></div>
</div>
I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)
I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.
See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):
.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
float:left;
position:relative;
width: 10px;
background-image: url(/default/images/content-left.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.right-content-bar{
float:left;
position:relative;
width: 14px;
background-image: url(/default/images/content-right.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}
I hope that anyone can give me a better solution than my current
Have you tried to use inline-block instead of float ?
Using float was originally made to display text around a picture, not to display divs the way you like (move away from floats if you can).
Anyway, using display:inline-block; you can put the 3 divs beside each other, and have the left and right column reach the bottom.
.content-body{
height:1000px;
}
.siteborder{
height:100%;
width:100px;
display:inline-block;
vertical-align:top;
}
.inner-content{
width:150px;
display:inline-block;
vertical-align:top;
}
Live example : http://jsfiddle.net/8vQrU/
I would approach this a bit differently. With the same html as your sample, my css would look something like this:
.left-content-bar{
position:fixed;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
position:fixed;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
I positioned the sidebars fixed. By setting both the bottom and the top property to 0 they stretch up to the height of the viewport. By then adding some padding to the actual content wrapper I make sure the sidebars and the content don't overlap.
I set up a small example to demonstrate: http://jsfiddle.net/4Swvu/1/
Feel free to ask if you want some more explanation.
Edit:
If you want the sidebars on your content, rather then on you viewport, you could slightly adapt the code. The technique also works with position absolute so you could make your css look something like this:
.content-body {
position: relative;
width: 400px;
margin: 0 auto;
}
.left-content-bar{
position:absolute;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:#cff;
}
.right-content-bar{
position:absolute;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:#cff;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
and the fiddle: http://jsfiddle.net/4Swvu/5/
I've come across a very peculiar situation and I'm not sure what is happening.
I'm trying to arrange my web page so that you have a collection of same sized images all squished together in a grid sort of pattern- these images will be links to articles.
For my images each has the code:
<div class="linkyimage">
<img src="image/lblue.png" alt"blue" />
<p class="description">
Oy oy oy
</p>
</div>
And my css:
.description{
background-color:#000;
position: absolute;
color:#fff;
opacity:0;
top:150px;
left:10px;
}
.linkyimage{
position: relative;
display: inline;
float: left;
height: 250px;
width: 250px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
.linkyimage:hover img{
opacity:0.5;
}
.linkyimage:hover .description{
opacity: 1;
}
But this doesn't work. It seems to squish the images down and put them in containers that are 250px squared, the effect is really rather bizzare, however the descriptions display perfectly.
So I had an idea. Maybe I just format them as images.
I change it to
.linkyimage img{
blah blah
}
This makes my images display perfectly....but now the descriptions display off on the far left of the screen rather than over the images like they used to.
Can anyone explain what is actually happening here? How does merely formatting the images of linky image (thats all the boxes contain) mess up the formatting of the box?
Why do the images get compressed and not fill the entire box if I only format their container and not the images?
All rather peculiar.
Edit:
With linky image left open:
http://jsfiddle.net/28n9p/
With just linky image's images handled:
http://jsfiddle.net/XJq5W/
So you can see this jsFiddle
.description{
background-color:#000;
color:#fff;
height:30px;
opacity:0;
position: absolute;
margin-top: 120px;
}
.linkyimage img{
position: relative;
display: inline;
float: left;
height: 150px;
width: 150px;
margin:0px;
white-space:nowrap;
overflow:hidden;
}
and add this class to your divs..
.linkyimage{
margin-right:5px; // optional
border: 2px solid #000; //optional
float:left;
}
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}