I do not understand what happened but suddenly my page do not scroll down to view the rest of the content...
check it out: www.guestinnation.com/hotels.html
As you can see using the inspect element functionality, the div is much longer than it appears...
Before this I had set a height for the div of 60% of the page and used the overflow:scroll, but then i decided that I simply wanted it to be like the homepage, so I cancelled the height=60% and overflow:scroll, but it ended up being like you see...
Thank you in advance!
Edited
change two position on your css :
#main{
position: relative; // change it from fixed
}
#menumain2 {
position: absolute; // change it from fixed
}
#menumain {
position: absolute; // change it from fixed
}
Do this :
#main
{
position: relative;
}
#menumain
{
position: absolute;
}
#menumain2
{
position: absolute;
}
Your page scroll is gone because you used position: fixed; to center your main content. that means that the element is positioned relative to the browser window.
Try something like that for a mock-up.
<body>
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
</body>
.wrapper{
margin: 0 auto;
position: relative /* Just in case */
width: 960px; }
That's how I'll start.
Or if you have problems starting a website try some HTML starter packs, the web is full of them.
Related
I need to make a page without scrolling in landscape version.
The height of the page to be 100%.
I've tried everything.
In Safari, I always get to scroll the lower region.
And I get a hidden area.
I can not hide the bottom bar.
And I can not reduce the height. I can not make it smaller than 320.
The browser creates an additional white area at the bottom of the page.
(Also, i can't use JS)
I will be grateful to anyone reply.
P.S. In the screenshots is not my site, only to show an effect
There are a few ways you can accomplish this. First, you may be able to simply use a table that fills the entire viewport so that each element is then spaced evenly when switching orientations. You could also solve this using simple CSS so you will have more control and have the ability to take advantage of media queries.
See this working fiddle
First you want to wrap all of your content in a single parent container that fills the entire view. This will prevent content from existing outside of the view.
HTML
<div class="wrapper">
<div class="menu">
The Menu
</div>
<div class="hero">
The Hero
</div>
<div class="head">
Text
</div>
<div class="content">
This is content.
</div>
</div>
CSS
.wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
From here you can then set each element to take up a certain percentage of the parent container so that rescaling recalculates the elements proportions instead of forcing a scroll.
.menu, .hero, .head, .content {
position: absolute;
left: 0;
width: 100%;
}
.menu {
top: 0;
height: 10%;
background: #eee;
}
.hero {
top: 10%;
height: 20%;
background: #aee;
}
.head {
top: 30%;
height: 10%;
background: #eae;
}
.content {
top: 40%;
height: 60%;
background: #eea;
}
Implementing it this way will allow you to have a bit more control of the behavior of each element as the view size changes.
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
Is there any way to overlay a DIV over the browser's scrollbar?
I realize the scrollbar can be hidden using overflow: none, but I'm wanting to actually put a DIV over the scrollbar instead of hiding it.
You can place your div over scroll bar if that scroll is not for <html> element. Here is code which makes overflowed div over scrollbar of another div.
JSFiddle
HTML:
<body>
<div id="content">
Code goes here instead of BODY
<div class="test"></div>
</div>
<div class="overflow">CONTENT FOR OVERFLOW ELEMENTS</div>
</body>
CSS:
html, body {
margin:0;
padding: 0;
}
#content {
background: lime;
overflow: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 10px;
background: blue;
}
.test {
background: red;
height: 1000px;
margin: 20px;
}
No, you cannot render content outside the viewport. However, you can remove the browser's scrollbar and substitute your own, allowing much greater flexibility.
See this question for more information.
If you look at a document in google docs, this is very similar to what they do to show their own scroll bar.
If you hide the scrollbar using overflow:hidden, then you are free to create your own element on the right hand side of your page. You won't be "overlaying" the browser's scroll bar. Instead your scrollbar will simply be in the same location as the browser's was before you hid it using overflow:hidden.
You will plunge yourself into the fun challenge of emulating the scrollbar's behavior, with everything from dragging, clicking on the page up/down areas, etc. and moving your content in response.
No. You cannot unless you write your own scrollbar implementation.
The drawbacks of writing your own scrollbar implementation include lack of testing and support for other devices.
However, this library and this question may be helpful.
You can not place a div outside the document/viewport. However you are able to hide the scrollbar and take its place in with a div or custom scrollbar.
jsfiddle demo
css
#scrollbardiv{
height:100%;
width:12px;
background:red;
position:fixed;
top:0px;
right:0px;
}
.noscrl{
overflow:hidden;
}
body{
overflow:auto;
}
js
$("#toggle").on("click", function(){
$("body").toggleClass("noscrl");
})
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
You may be looking for position: fixed.
Works everywhere except IE6 and many mobile devices.
The easiest way is to use position: fixed:
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
Make sure your content is kept in a div, say divfix.
<div id="divfix">Your Code goes here</div>
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
See example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
The tweak:
position:fixed;
works, but it breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
position: fixed;
Will make this happen.
It handles like position:absolute; with the exception that it will scroll with the window as the user scrolls down the content.
Try this one:
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-index is added to overshadow any element with a greater property you might not know about.
You can do like this:
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
This will create a div, that will be fixed on top of your screen. - fixed
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
You can try this code:
<div style="top: 0; position: sticky;">your code</div>
or you can add class/id like this:
html:
<div class="FixedPosition">your code</div>
css:
.FixedPosition{
position: sticky;
top: 0;
}
you may change the "top" if you want it to not be on top of the screen and don't delete the top else it won't work.
I hope this help : )
I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.
I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:
$(myElement).block({
overlayCSS: {
height: '10000px'
}
});
... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?
Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.
In XHTML the html and body elements are not quite as magical as in HTML. The body element doesn't fill the viewport (window) automatically, it's size is only as tall as it's contents.
To make an element fill the window you first have to make the html and body elements fill the window:
html, body { height: 100%; }
Then you can use height: 100%; on an element in the body to make it cover the full height.
Set position to absolute and height to 100%.
I have made a complete example for you, now you can use that in your application and and just hide it after ajax request completed.
Click here!
<div class="overlay"></div>
<div id="container">
content Whatever you want even you can delete this container
<div>
Worked for me! I changed absolute to fixed.
function showWaitPopup() {
var obj = document.getElementById('bkdiv');
if (obj) {
obj.style.display = 'block';
}
return true;
}
showWaitPopup();
div.bkdiv {
background-color: #000000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 2000;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 200%;
display: none;
}
<div class="bkdiv" id="bkdiv"></div>
The following code ended up working for me:
$("body").block({
message: '<h2>Loading...</h2>',
overlayCSS: {
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0'
}
});
body {
color: #004A6E;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I used the following post as a reference: Make div 100% height of browser window
the one modification that I had to do was adding left and right. My overlay was covering only the half of the screen.