I have a div that is absolutely positioned so I can place it overlapping an image. the problem is that the empty part of the div is making the image beneath it unclickable. in IE the image is still clickable but in FF or chrome its not/
Add position: relative; to the image. Here's an SSCCE, copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2750416</title>
<style>
#overlap {
position: absolute;
width: 100%;
height: 61px;
background: pink;
}
img {
position: relative; /* Without it, the image disappears "behind" div */
float: right;
}
</style>
</head>
<body>
<div id="overlap">Overlap</div>
<img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
</body>
</html>
You can't fix this through CSS alone. The easiest way is to set the div onclick event to the same function as your image onclick.
You can use the CSS4 experimental feature pointer-events:none on your absolute element. Problem with this feature is that it doesn't work in all browsers, only firefox and chrome as far as i know.
Just sharing a bit of information :)
Related
Please take look at the following page on mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="wide">WIDE</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
The fixed element is there at the bottom right as expected. However, when you increase the width of the wide div past your device viewport width (in css pixels), the fixed div disappears.
Why does this happen? Is there a way to prevent this behaviour?
Further details:
An easy way to test this is to use mobile view in Chrome DevTools, and change the width directly under Elements > Styles.
Close to the limiting width you see the fixed div cut off horizontally.
Same thing without meta viewport, but the threshold will be at the default viewport width 980px.
Tried combinations of height: 100% and min-height:100% on html and body with no success.
No issues in desktop browser.
Answering my own question here.
I am not sure why the fixed div is not rendered. It is somehow related to the fact that the 'wide' div overflows the body element, causing the view to be zoomed out and the body ending up less tall than the viewport. I still believe that the mobile browser should show the fixed element just like the desktop browser does.
My fix: wrap the wide content in a container element with overflow-x: scroll. This works well on mobile, the fixed div is shown again and the wide content can be swiped across.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="ctnr">
<div id="wide">WIDE</div>
</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#ctnr {
overflow-x: scroll;
}
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
Not sure if this will help you but I added display: table-cell; to #wide.
This way your div won't exceed the maximum width.
Basically I am using the "Tryit Editor" from the W3 website and
this is the code I started out with
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
I wanted to change the background color and background images so that they were only found on a div, not on the whole page. I also wanted to move the div around the page. I was able to make the div with the background elements, but I wasn't able to move it around the page. I used the following code, thinking that
top:150px;
left: 150px;
would have caused the div to change position
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position=fixed;
top:150px;
left: 150px;
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#00dccc;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Alas, the div did not change position. What gives?
Thanks! :]
You have an equals sign rather than a colon in your position declaration which is causing the page to ignore it. Change that and it'll work!
EDIT: Thanks for fixing my awful terminology Pavlo, can't believe I did that :P
Your code is wrong. It should be
position: fixed;
Consider the webpage below. The <img> is positioned absolutely relative to its parent, and when I load this page on Safari or Firefox, the <img> appears in the top-right, as expected (see first image). However, when the border is removed from from the <div>, for example, by setting border-width: 0, the <img> positions itself absolutely relative to the <p> tag, its sibling! See picture #2. Why is this? What difference should the border make?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin: 0;
}
div {
position: relative;
left: 0;
top: 0;
border: 1px solid red;
}
img {
position: absolute;
right: 0;
top: 0;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div>
<img src="content/en/flag.png" />
<p>This is a test</p>
</div>
</body>
</html>
Your image is always at the top-right. It has to do with collapsing margins.
Try to do it with a background color. You will see that your div is moving away from the top of the body a few pixels. If you delete p's margin everything would be fine, or setting p as an inline element or floating it, or even setting an overflow to auto, hidden or scroll to the parent. Another way to fight the collapsed margin is to add a border to the container element. So you really was solving this with that border.
But image is always where it is supposed to be.
Its really strange indeed but let me try to explain this actually the elements are not float and you are using margin on p tag which the div is taking properly when it has border and failed to implement it when its removed if add float property than the div will also gain its height
add overflow:auto; to div it will fix the problem
I have a menu the have rectangular boxes 90x50. Some have single line text, other have multiline text
question : How to VERTICALLY align it to the bottom with pure css no hack please
Vertical aligninment in CSS isn't that easy as you'd intuitively expect. As far the straightforward property vertical-align: bottom works in table cells only. Here's an excellent resource which explains how (not) to vertical align in CSS: Understanding vertical-align, or "How (Not) To Vertically Center Content".
In a nut: the following works in real webbrowsers:
display: table-cell;
vertical-align: bottom;
But thus not in MSIE. You'd like to make the parent element relative and wrap the text in an absolutely positioned element and then put it to bottom. Here's a copy'n'paste'n'runnable example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
li {
position: relative;
width: 90px;
height: 50px;
border: 1px solid black;
}
li span {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li><span>text</span></li>
<li><span>text<br>multiline</span></li>
<li><span>text</span></li>
</ul>
</body>
</html>
I think the vertical-align property does what you want. Otherwise, perhaps you can clarify your problem further?
Edit: You can force table-cell-like behaviour for any other element by using the display property with the value 'table-cell'. I am not perfectly sure if this works with well with the vertical-align property, but perhaps you can build on it. If I remember correctly, an additional intermediate element was required.
I've created a design, but I'm having problems to make it work the way I need.
It would be too much to post a complete pack here, but here is the problem in short:
I have a DIV element side by side with another DIV element. One is a sidebar and the other is content.
When I put a fieldset in my content div, anything (like other divs) I put inside stretches fieldset and encapsulating div correctly. But if I remove fieldset, "guest divs" just dont stretch the encapsulating "content div".
Why that happens and how can I fix it?
Thank you!
If you need more info, please ask.
Code is something along these lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
#main-container
{
background-color:gray;
}
#header-container
{
background-color:green;
height: 60px;
}
#sidebar-container
{
background-color:maroon;
width: 150px;
float: left;
}
#content-body
{
background-color:white;
position: relative;
}
#block-1, #block-2
{
float:left;
width: 50%;
background-color: blue;
height: 95px;
}
#block-3
{
float: left;
width: 100%;
background-color:navy;
height: 156px;
}
#footer
{
width: 100%;
background-color:orange;
}
</style>
</head>
<body>
<div id="main-container">
<div id="header-container"></div>
<div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div>
<div id="content-body">
<div id="block-1"> </div>
<div id="block-2"> </div>
<div id="block-3"> </div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
You need to set overflow:hidden on your containing div, and make sure it has at least one dimension that is fluid. By default, overflow elements (i.e. floated elements, anything taken out of normal document flow) 'overflow their containing blocks bounds' (overflow: visible) without affecting their parent container. When you set overflow to hidden, you tell the box model to grow the containing div in any dimensions that are not set to fixed size such that it fully contains its content elements.
Depending on whether you need the content of the containing div to scroll or not, you may want to use overflow: auto or overflow: scroll. The auto setting will display scrollbars if necessary, scroll will always display them. Any browsers that support the CSS3 overflow provide additional capabilities that you can look up on W3C.org.
The first change I would make to your code is the following:
#content-body
{
background-color:white;
position: relative;
overflow: hidden;
}
An alternative method that is preferred these days can be found at the link below. I have not used it myself, so I can't say authoritatively how compatible the method is. However it does seem to be preferred over the overflow fix for modern browsers (Opera, FF 3.x, Safari, Chrome, IE8). For older versions of IE, they automatically expand divs anyway, so your set.
http://www.positioniseverything.net/easyclearing.html