Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Sometimes you want to make an entire div (or other element) into a clickable link. Here’s an example.
Here’s a cross-browser way to do it using pure CSS:
HTML:
<div class="clickable">
Rest of div content goes here
</div>
CSS:
div.clickable { /* Containing div must have a position value */
position:relative;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
First, give the containing div position. That way, when we apply “position:absolute;” to the link (see next paragraph) it will position itself relative to the containing div.
Next, make the link absolutely positioned and the full size and depth of the containing div. The link’s z-index makes sure it’s above everything else in the div, so no matter where you click, you’re clicking the link.
IE, naturally, has quirks. In this case, IE requires a background color for such a link to be clickable, so we give it a background color (white), set the opacity to 0, then give it an IE-only opacity of 1% using IE’s proprietary filter property.
Finally, put whatever content you want in the div. If you’re going to be layering the content using z-index, just make sure not to give any element a higher z-index than the link.
You can wrap a div in a link and it is valid HTML5.
<a href="#">
<div></div>
</a>
Related
I stumbled over a strange behaviour that occurs in Chrome and Firefox when you have got an element with "position:relative;" and "overflow:hidden;" and an anchor in it with "position:absolute;".
Whenever the anchor gets focus the element above it magically jumps to the top, even though its styles and markup tell a different story.
Example: http://codepen.io/mediadivisiongmbh/pen/pJWmxp
All you need is a setup similar to this:
HTML
<div class="container">
<h1>I can fly</h1>
<a class="focus-me" href="#">Evil Link</a>
</div>
CSS
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
}
Thanks for your answers so far. In order to clarify the issue please take a look at this example:
http://codepen.io/mediadivisiongmbh/pen/bdRjKy
When you hover over the container, the absolute positioned element containing the anchor will transition in view. When you click on it a lightbox (in this case Magnific Popup) is opened. After you close this lightbox the anchor gets focus again and jumps into view, which looks pretty odd.
Setting the anchor to display:none by default and display:block when hovering over the container worked for solving this issue.
After more research I figured out that the problem is caused by an accessibility feature in chrome.
In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.
Therefore the solution was altering the CSS like this:
.container {
position:relative;
overflow:hidden;
/* Optional */
border:1px solid gray;
}
.focus-me {
position:absolute;
display:none;
}
.container:hover .focus-me {
display:inline-block;
}
I'm not pretty clear about what you're looking for since you have different story. But if you mean you want to prevent jump because of focus on your link, you can use tabindex="-1" on your link to makes it not accepting tab stop. Check the Updated Pen
EDIT
Well when seeing your pen, I think you need to set display: none to your evil link and set it to display: inline-block when hovering to your container. Check Updated Pen.
I am trying to construct a chunk of code that is an image and a text caption, which is a single anchor. the image is an image tag and the text is in a DIV tag.
When the anchor is hovered, the image+text box has a border appear, and the text div transitions between text to then show the background image (using opacity 1 to 0)
USING CSS ONLY
My issue is that I can't seem to find the best CSS to write this code, what I have is:
HTML:
<div class="outerCCBox">
<a href="*url*" >
<img src="images/logo/clarityTeeth.png" alt="">
<div class="clarityUnderBox">
<div class="clarityBox">
Clarity Makeup
</div>
</div>
</a>
</div>
The "clarityUnderBox is a presized box containing the background image that appears when the covering text fades out on hovering over the anchor tag.
CSS:
.clarityUnderBox {
width:256px !important;
height:86px !important;
background:url('../../images/logo/Clarity-C-320.png') no-repeat;
background-size:contain;
}
.clarityBox {
width:100% !important;
height:100% !important;
background-color: #000;
opacity:1;
color:#f0f0f0;
transition: color 0.4s linear,opacity 0.6s;
}
All CSS is simplified for this question (fonts, transition -types- etc removed).
The issue I am having appears to be with the next piece of code, the "hover" element:
.outerCCBox a:hover > .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
EDITED CSS:
originally
.outerCCBox a:hover .clarityUnderBox .clarityBox {
opacity:0;
color:transparent;
}
which behaves in the same way, as with the ">" selector.
The issue is that the hover works fine when hovering over the anchor element but when moving away, the .clarityBox class doesn't return to it's pre-hover state.
1) How do I make this return to it's pre hover state?
1b) Do I need to make a separate ~ a:not-on-hover CSS declaration?
2) How can I tidy up and make the "hover" CSS line more specific? - the way I've done it above works, but I'm sure there's a better syntax to it. I have tried things like using "*" and ">" selectors with limited success (combined with some rearrangement of class orders in the HTML)
Thanks for your guidance.
EDIT:
As requested, a fuller fiddle is here:
http://jsfiddle.net/gwrrezys/9/
But this fiddle doesn't show the image above the text, but it does replicate the general issue with the hover not updating / or not returning to its original state.
cheers
SOLUTION:
As suggested in comments by Martin, making the anchor a block element fixed this issue, I have retained the issue in the jsFiddle for reference and can be found by repeatedly hovering and then hovering off the anchor area.
Your actual problem is with the hovered parent (your anchor element) not having a width set.
If you make the anchor a block element it will fix the "leaking" content issue. by either
making the anchor display: block with set width and height
or making the parent fit the content by making it display: inline-block
DEMO
General to displaying children on hovered parents:
As soon as you extend a child of a :hover element over the whole screen (100% width and height) the parent will stay in the hovered state as long as you are hovering over the child.
To get around that you need to break the child out of its parents flow ... for example by making it's position: fixed (or position: absolute if the parent has no position: relative).
For example by using something like this on the child - and the z-index: -1; here makes sure it moves behind the parent:
position: fixed;
width: 100%;
height: 100%;
top:0;
left: 0;
z-index: -1;
DEMO
Or (depending on what area exactly you wan to cover with the child) you can alternatively extend the child only over a particular hover area (e.g. its parent) ... here you would then use position:absolute on the child and position: relative on the parent (to make sure you keep the child in the parents flow).
DEMO
A quick read on positioning elements: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi there,
This is in regards to the image I posted above. I feel like it's something that should be easy, but I just can't figure it out. I basically have a DIV that is the container with the darker see through BG and inside it I have some text that's centered. To the left and right of the text I have these horizontal lines of equal width.
Now the trick is that those horizontal lines, change their width based on how much text I have in the middle so there's always the same "padding" around the sides of the text. It's important to note that the background is not a flat color, but an image and the container with the darker BG is see through. If it was a flat color I could just add a thick shadow to the text of the same color as the BG and just have that line be the background of that DIV all the way through in which case the shadow of the text would make it look as its interrupted behind the text. The container also has a dynamic width, something like 80% for example.
Anyone have any idea how I could get this done? Thank you very much in advance!
You can use pseudo element and rgba() colors, this is a common way to do it : DEMO
HTML test
<header>
<h1> MY CENTERED TEXT</h1>
</header>
CSS test
header {
padding:3em;
background:url(http://lorempixel.com/600/50/nightlife) ;
background-size: cover;
}
h1 {
background:rgba(0,0,0,0.5);
color:white;
padding:1em 0;
text-align:center;
overflow:hidden;
}
h1:before, h1:after {
content:'';
width:100%;
border-bottom:lightgray solid;
display:inline-block;
vertical-align:middle;
}
h1:before {
margin-left:-100%;}
h1:after {
margin-right:-100%;}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div at the bottom at a page. it's not bound by any other div. How would I manage to align it, a bit off center, with the main div. And place it at the top of the page, when the page has different heights and the div has to have a z-index:1;
The two divs top has to be aligned, one cannot be higher than the other.
The html
<body>
<div id="Main"><div> //Css or html for this div can not be edited
<div id="Our_hero_div"><div> //This has to be show ontop of main, but a bit off-center
</body>
CSS
#Our_hero_div{
z-index:1; //this much remain
}
#main {
margin:auto;
}
If you cannot get that #Our-hero-div INSIDE of the #main div, and if you cannot edit the CSS of the #main div, your options are limited. You can try to give it an absolute position and align its top with the top of the #main div using the css top property.
#Our-hero-div {
position: absolute;
top: 1em; /* assumes the #main div has a margin top of 1em - just match this value to whatever the margin/padding of the #main div has on top */
}
You'll also need to use left or right to position horizontally (for that off-center thing you're after). This solution only works if that #main div is really at the top of the body. If there's other stuff that changes height above #main, then this falls apart.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to figure out how to clear or reset the relative positioning of an element on my page. I have an element with position:relative, and further down the tree a bit a dialog box div is defined along with a background image that is stretched to fill the page to make the dialog box modal.
The problem is that b/c there is a position:relative further up the DOM tree, when I say top:0, left:0 for the background image, it goes to 0,0 relative of that element rather than going to 0,0 of the page.
How can I clear or reset the relative positioning so that the absolutely positioned background image can be set to 0,0 of the page?
In most cases, your modal should be a direct child of the body.
If the modal has an ancestor with relative or absolute positioning, you cannot "undo" that short of changing the style on the offending element.
HTML:
<html>
<head>...</head>
<body>
<div id="content">content!</div>
<div id="someModal" class="modal" style="display:none"></div>
</body>
</html>
CSS:
.modal {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
We would love to see your code first, but probably you're looking nto this:
position: absolute !important;
Well, an absolutely positioned element that is set at (0,0) will ALWAYS got to the (0,0) corner of its closest parent element that is position relative. This is the defined behavior and cannot be altered.
Since you are absolutely positioning the modal, I'd suggest pulling out out of the relatively positioned element and just sticking it under either (a) a non-positioned parent, or (b) just after the body tag.
EDIT: Johnathan beat me to it!