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.
Related
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates.
After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
However I want the site to work with JS disabled.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO.
I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
Any help much appreciated.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
Here is the updated fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
</div><!--/content-->
</body>
</html>
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.
People who disable JS expect a degraded experience already.
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 :)
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