I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera
Related
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
I used style="overflow: hidden;white-space:nowrap;"
scroll bar is removed , but the arrows are not getting removed , for a body tag
Use:
style="overflow-y: hidden;"
You should not really not use inline styles. Try write it like this:
<head>
<style="text/css">
#container { overflow: hidden; }
</style>
</head>
<body>
<div id="container">Content goes here</div>
</body>
Could I see your code if that does not work as I can't see what you have done.
EDIT:
Not sure if I completely get what you are trying to achieve.
Add the following style to the page.
<style="text/css">
.hideOverflow { overflow: hidden; }
</style>
Are you using jQuery?
If so, add this within your window.open event.
$('body').addClass('hideOverflow');
Can I see your window.open script?
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:
<!doctype html>
<html>
<head>
<style type="text/css">
#fold
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
</style>
</head>
<body>
<div id="fold">
</div>
<div id="features">
</div>
</body>
</html>
When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.
This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.
So, am I going nuts or is anybody else getting this? Any idea how to work around it?
It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.
The quick answer - add a negative margin to one of your elements. See this JSFiddle.
The relevant portion is this:
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
margin-top: -2px;
}
You can target this using media queries.
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>