Here's the extremely simple HTML page
<body style="overflow-y: hidden">
...
</body>
The expected behavior of this page is: scrolling of a document is prevented because of overflow-y: hidden.
It works as expected (scrolling is prevented) everywhere except Safari.
Live demo: https://spotted-chime.glitch.me/
The question is: how to make Safari behave the same way as other browsers?
Just use overflow: hidden and it will work.
Alternatively, you can try using position: fixed on the <body> tag as well.
(NOTE: Using this approach, the body will scroll to the top as by default the top: 0.)
EDIT: For safari mobile devices, you need to use Javascript events. Explained in this answer.
https://stackoverflow.com/a/4770179/2860486
Position fixed is meant to create a div that stays in the same position on the screen while the content behind it is scrolled down.
fixed
The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or
filter property set to something other than none (see the CSS
Transforms Spec), in which case that ancestor behaves as the
containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.)
Its final position is determined by the values of top, right, bottom,
and left.
This value always creates a new stacking context. In printed
documents, the element is placed in the same position on every page.
Have you tried changing it to absolute?
body {
overflow-y: hidden;
}
#backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .2);
border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div>0%</div>
<div>1%</div>
<div>2%</div>
<div>3%</div>
<div>4%</div>
<div>5%</div>
<div>6%</div>
<div>7%</div>
<div>8%</div>
<div>9%</div>
<div>10%</div>
<div>11%</div>
<div>12%</div>
<div>13%</div>
<div>14%</div>
<div>15%</div>
<div>16%</div>
<div>17%</div>
<div>18%</div>
<div>19%</div>
<div>20%</div>
<div>21%</div>
<div>22%</div>
<div>23%</div>
<div>24%</div>
<div>25%</div>
<div>26%</div>
<div>27%</div>
<div>28%</div>
<div>29%</div>
<div>30%</div>
<div>31%</div>
<div>32%</div>
<div>33%</div>
<div>34%</div>
<div>35%</div>
<div>36%</div>
<div>37%</div>
<div>38%</div>
<div>39%</div>
<div>40%</div>
<div>41%</div>
<div>42%</div>
<div>43%</div>
<div>44%</div>
<div>45%</div>
<div>46%</div>
<div>47%</div>
<div>48%</div>
<div>49%</div>
<div>50%</div>
<div>51%</div>
<div>52%</div>
<div>53%</div>
<div>54%</div>
<div>55%</div>
<div>56%</div>
<div>57%</div>
<div>58%</div>
<div>59%</div>
<div>60%</div>
<div>61%</div>
<div>62%</div>
<div>63%</div>
<div>64%</div>
<div>65%</div>
<div>66%</div>
<div>67%</div>
<div>68%</div>
<div>69%</div>
<div>70%</div>
<div>71%</div>
<div>72%</div>
<div>73%</div>
<div>74%</div>
<div>75%</div>
<div>76%</div>
<div>77%</div>
<div>78%</div>
<div>79%</div>
<div>80%</div>
<div>81%</div>
<div>82%</div>
<div>83%</div>
<div>84%</div>
<div>85%</div>
<div>86%</div>
<div>87%</div>
<div>88%</div>
<div>89%</div>
<div>90%</div>
<div>91%</div>
<div>92%</div>
<div>93%</div>
<div>94%</div>
<div>95%</div>
<div>96%</div>
<div>97%</div>
<div>98%</div>
<div>99%</div>
<div>100%</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Try this:
<head>
<style>
.forSafari::-webkit-scrollbar { width: 0 !important }
</style>
</head>
<body style="overflow-y: hidden" class="forSafari">
...
</body>
just use "position: relative" or fixed it will resolve the problem
Related
I am writing a webpage , and I want to left part is nav page and right part is content page;
and I create a index.html , give a 100vw and 100 vh to container div label;
however when I look the page, the page is displayed not as I expected;
Anyone can help me understand why ?
I have read css width/height definition, can't figure it out by myself.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<% include('./easyui.art') %>
<title>测试用例管理系统</title>
</head>
<body>
<div class="easyui-layout" style="width: 100vw; height: 100vh">
<div
data-options="region:'west', href:'/feature/nav'"
split="true"
title="特性列表"
style="width: 20%; height: 100%"
>
<% include('./nav.art') %>
</div>
<div
id="content"
class="easyui-tabs"
region="center"
style="width: 80%; height: 100%; padding: 1px"
></div>
</div>
</body>
</html>
You posted ASP or Node inclusions <% ... %> which makes it impossible for other to answer to you faster because you didn't provide simple valid HTML reproducing the issue
I created this pen and tried to add as much comments as possible explaining the styles. The main idea is that if you want some elements on the page to take 100% of the height, all parent elements must have height = 100%, so in your case you need to set all HTML tags in the hierarchy to height: 100vh starting from the html and body. You don't have styles for the last two tags.
By default, div has display: block styles and this kind of element will not adjust to height: 100%. What you need to do instead is to either use height: 100vh on all elements or make all elements display: flex and flex-grow: 1 to auto populate available area on the screen.
I need the background image to stay centered because I am going to display charts in fixed positions and want the van (in the image) always to be visible. It's working fine in Chrome etc but nothing appearing in IE8.
http://clients.online95.com/RzMaOxkMOC/rep_mktsh.php
Thank you for any assistance you can provide.
#aa_breakdown_bg {
background: url(/RzMaOxkMOC/images/aa_breakdown_bg.jpg) center top no-repeat fixed;
overflow: hidden;
height: 100%;
}
<html lang="en">
<head>
<title>UK Breakdown Market Tracker</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
window.history.forward();
function noBack() { window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<div id="aa_breakdown_bg"></div>
</body>
</html>
My guess would be that while your div is 100% height, that's 100% of zero. Try stretching both the body and html elements to 100%, too, and see if that does the trick.
body, html {
height: 100%;
}
Also, as Adrift mentions, you'll be a lot better off adding an appropriate DOCTYPE to your HTML, otherwise Internet Explorer will probably run in "quirks mode" and really confuse you.
I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo
When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page. Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar. This seems to be a problem with the way I'm using bootstrap but I can't figure it out. Any help appreciated
I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="row">
<div class="header">
<div class="container">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
</html>
css:
body {
background-color: #CDE0E4;
width: 100%;
}
.header {
position: relative;
height:120px;
background-color:#CDE0E4;
box-shadow: 0 0px 15px #272727;
}
Thanks
What you need is fluid layout (see the docs). This term means that your content takes most available width and is resized when browser window is resized. In this case you should use .container-fluid and .row-fluid instead of their unsuffixed versions.
But you are misusing some of Bootstrap's classes.
.row
Is used when you want to create a multi-column layout. For this you have .span* classes to use inside it (see the docs for examples).
.container
Is used when you want your content to have a white space on the sides (it will be 20px for .container-fluid and maximum available for .container).
.header
If you are using HTML5 (which you do by declaring <!doctype html>), why not to use <header> instead of <div class="header">?
<div class="container">
should come at the top. Row is nested inside container and finally the column is nested inside row. You have reversed the order. That is one problem with your code.
I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
}
#header {
background-color: orange;
}
#leftnav {
background-color: yellow;
float: left;
}
#rightnav {
background-color: blue;
float: right;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="leftnav">
leftnav
</div>
<div id="rightnav">
rightnav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.
Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....
Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.
If it were me I would make the following adjustments to the base template provided
Move the content div above the navigational elements within the source code.
Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.
The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.
The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.
Your code is wrong, but here's how you can fix it:
You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:
Microsft's Bing would flag this as an error and inform you to change it appropriately.
Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.
If you position an element using absolute positioning with a percentage value such as:
"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:
"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.
As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.