I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.
Related
I am looking for a solution without javascript, where I can use an link like this:
<a href='#link1 +60px'>
This is just an example for easier understanding. So what I am trying is, that I got an anchor in my website, and the link goes to that specific point + 60px further.
So far the following is the best method I could find to position the landing position w/o javascript
HTML (add an additional anchor tag)
<!-- Actual going to here -->
<a id="anchorpoint" class="anchor"></a>
<!-- Display point -->
<div>Some content here</div>
CSS
.anchor {
display:block;
padding-top:60px;
margin-top:-60px;
}
It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container.
Try: https://jsfiddle.net/q6yvuhao/
This is impossible.
Your only options are JavaScript and linking explicitly to a spot (with its own ID) above where you want to link to.
Is the anchor point invisible? If so, add a class to the link and the following CSS:
a.link {
position:relative;
top:60px;
}
<a class="link" href='#link1'>
Can anybody recommend a good tool that could give the visual of my html page content stack when using z-index properties for some div tags on a given html document?
At present, I'm facing this troubling bug that is preventing me to navigate to other menu links on top navigation menu bar.
http://cms.tmadev.com.au/companyprovider.html
After spending sometime trouble shooting, I found out the reason the top menu navigation bar is 'disabled' due to the image logo.
<div class="logo">
<img src="images/CRSlogo.png" alt="">
</div>
If you look into the html file closely, if you remove this div class logo, the top menu navigation bar links will be restored to normal.
Thus I'm suspecting because of its default z-index value (whatever it is), it's causing the image to go infront of the top menu navigation bar.
I tried hacking the CSS to push its z-index far back as -9999 - but it's not working! Links are still disabled.
Any ideas how I should handle z-index properties properly?
Cheers!
As a practice, try avoiding giving explicit height to elements
Heres the fix
HTML
<div class="header">
.. some other content ...
</div>
CSS
.header {
/*height:100px --avoiding height */
overflow:hidden; /* one way to force element containing floated elements to have a height */
}
details about above overflow-hidden-float-trick here
although the above should work, if your navigation has some dropdowns, chances are, it will get chopped off because of overflow property of parent set to 'hidden'
a good way to clear floats would be to use something called a "clearfix" detailed here and there and everywhere
So,
HTML
<div class="header clearfix"> <!-- notice the new clearfix class -->
.. some other content ...
</div>
CSS
.header {
/*height:100px --avoiding height */
/* overflow:hidden; --not required */
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
*zoom:1; /* for ie7 */
}
When I look at the example on which button clicked: "Administrator", I get the div "middle", it is therefore necessary to provide a stronger value to your "menu_tab" z-index: 2", and a lower to your "middle z-index: 1";
http://fr.html.net/tutorials/css/figure020.gif
Envoy !
So FireFox has a 3D view in its web inspector, here's a 3D view of the Google homepage:
To enable it:
Visit your web site
Open the dev tools (View > Toolbar > Web Development Toolbar)
Select the "Inspector" tab and select the 3D box third from the right on the same tab bar.
.header {height: 140px;} without z-index system
Varinder Say the true !
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.
I have some navigation elements constructed like so
<div id="topnavcontainer">
<a href='/web/link1.html' >link1</a>
<a href='/web/link2.html' >link2</a>
<a href='/web/link3.html' class='current'>link3</a>
</div>
The CSS for #topnavcontainer a.current specifies a gradient and uses DXImageTransform so that IE can render the gradient too.
It does, however, only seem to work if I set #topnavcontainer a.current to display: block which ruins the way the navigation works.
Does anyone know any work arounds?
Yes: for filters to work, your element must have layout. There are a number of ways to do this via CSS (outlined in the linked document). One way (which is not valid CSS but will work) is
zoom: 1;
Another that is valid CSS but may affect formatting. is
display: inline-block;
I want to have an anchor with a specific height and width.
There is no text on it since it's meant to be put in front of a certain area of the page.
Here is the code:
It's working fine in everything but IE6 and IE7. If I add a border, I can see that the anchor has the correct size, but if I try to click it, only the top part will be clickable.
I don't know why it's doing this. I tried adding a onclick even with an alert, and the same thing, it's impossible to click on the bottom part of the anchor.
It's really weird, did this happen to anyone before? Anything will help.
another way of handling this issue is a little "hack/workaround", when the block element got a background-color everything is fine, as you aspect it. make use of something like this:
a {
..
background-color: white;
opacity: 0;
filter: alpha(opacity=0);
..
}
In previous versions of IE, its not possible to register the onclick event on block level elements themselves. Instead, IE applies the onclick to the text or inline elements inside the block.
I've found that putting a transparent image inside the anchor that is the same size as the full anchor will register the onclick.
<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
<img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>
Since this link is absolutely positioned it sounds to me like there is another block partially overlapping it thus hiding half of it from the click event.
Any image placed in the anchor background, and then positioned out of sight will fix your problem for IE6 and IE7. You need not have an image the full size of the anchor as suggested.
This means you can use a sprite or other image that is already being loaded on the page to save another call to your server.
<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>
it could be that this is a z-index issue with another div/span/etc.