I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
Related
I've searched everywhere to see how to code a background image into a clickable link. I have found a couple of answers to my question but none of them work!!! HELP!
You can try to achieve this using the following CSS trick:
Create an tag as normal and give it an id. You'll need for the custom css.
Clickable Background
Now the custom css for the #clickable-background div:
#clickable-background {
background-image:url(your-image-path);
background-size: 100% 100%;
display:block;
position: relative;
height: 100%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
Don't forget to add
* { margin: 0; padding: 0; } to your css.
Give it a go and see if it does what you want. Don't forget to edit your-image-path.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I am observing this strange behavior with the radio buttons. Whenever I set the z-index of the parent div I am not able to select the radio buttons.
Here is the fiddle link: http://jsfiddle.net/x7rm63n9/2/. Try to select the buttons inside the main box.
The css style for the main div is:
.main_box
{
position: relative;
background-color: #444;
width: 65%;
margin: 30px auto;
height: 450px;
z-index: -6; /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/
border: 12px solid #fff;
}
Why is this happening? Is there any workaround for this without changing z-index?
I tried to set up the simple demo. (http://jsfiddle.net/juruf6a8/1/) It works fine here.
Thanks in advance,
Try this I have made the update and it is working on my end.
http://jsfiddle.net/x7rm63n9/4/
Here is what you have to do:
-remove the z-index:-6 of the "main-box" div
-wrap the banner div inside another div called "banner-container" and write this code for it
.banner-container{
z-index:1;
position:relative;
}
.banner-container:after{
clear:both;
content:'';
display:block;
}
You could just make the radio buttons that are inside main_box higher if you must keep the z-index of -6 on the main_box itself.
.main_box, input[type=radio]
{
z-index:0;
}
http://jsfiddle.net/x7rm63n9/3/
I'm trying to make a footer for my page and I'm using the following CSS:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
The footer appears at the bottom of the page as it should. I can see the text I write glued to the bottom of the page properly. However, the background colors refuse to appear at all. It's just the plain white background of the rest of the page.
Any idea why this is happening?
EDIT Checked for any conflicting/overriding CSS. Nothing that I can see.
EDIT2 The HTML
<div id="footer">
<center><p> Sup dawg, I'm a footer </p></center>
</div>
The css attribute to set the background color is background color. Change your css to:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
Here is a working example: http://jsfiddle.net/gfKXU/1/
Did you mean background-color: #F3F3F3; instead?
Greetings,
I am making a site with :hover images as backgrounds of links. But oddly enough, only the first link is working at all. The others don't act like links, and don't react to the :hover event.
Here is the germane HTML:
Home
What I Can Do
My Portfolio
Connect With Me
The first one actually goes to the correct spot. The other three don't give the browser any feedback that they are links, and do nothing when clicked. Here is my germane CSS:
#home-link {
background: url(icons-sprite.png) no-repeat 0 0;
top: 30px;
left: 30px;
}
#home-link:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
#skills-link {
background: url(icons-sprite.png) no-repeat -128px 0;
top: 178px;
left: 286px;
}
#skills-link:hover { background: url(icons-sprite.png) no-repeat -128px -128px; }
The styles for the other two links are identical.
The first shows the :hover state perfectly. The rest remain inert.
I am deducing that there is something wrong with my HTML, but I see nothing wrong with them. This occurs in FF and Chrome.
Any ideas?
You are targeting only one link using the id:
#home-link:hover
Use this CSS instead:
#container a:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
Where #container is the id of element containing your links.
Fixed it!
By taking out and adding in blocks of CSS I was able to discover that another particular HTML block that was after the links in the page and was positioned absolutely was messing them up.
Because it was on top of the links, they weren't firing. So I moved it below the links and everything works just dandy.
#home-link {...}
#home-link:hover {...}
using this, you are adressing thw only element that have the id 'home-link', which was your first link.
Since other links have diffrent id's they do not use your css block...
try to use class definition instead of id:
.icon {
background: url(icons-sprite.png) no-repeat 0 0;
top: 30px;
left: 30px;
}
.icon:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
Since all of your links have class="icon", you will not have problem...