I'm trying to copy the twitter websites homepage but I have a problem with the side section scrolling.
This is the right side section I created/copied from twitter homepage right side section
and it won't stop scrolling until it reaches the max height of the page, I also tried setting the height/max-height to it's only true height (1308px) and it doesn't work.
I only use HTML and CSS by the way and does not want to put JS. Is there a solution using only HTML and CSS?
in your html:
<div id="footer">some elements here</div>
and in your css:
#footer {
position: fixed;
width: 100%;
bottom: 0;
}
Related
I want to add a logo at the bottom of the very first page. Ideally I'd position:absolute it bottom:0 - but anything positioned to the bottom in wkhtmltopdf doesn't seem to work.
This is a problem because the logo is dynamic and could have different heights depending on the aspect-ratio of the uploaded image.
I see that I can add a footer, but this adds it to all pages, and I only want this on one page.
What are my options? Do I have to position-absolute it from the top? If so, what if the page size changes? This needs to work in A4 and US Letter.
I was having the same issue and solved by actually adding a width to the element. So, for the element I want to stick to the bottom I have this css:
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
This didn't work for me. (using python's pdfkit)
I had a one page document and I wanted a footer.
I had to set the height of the page to be the height of a sheet of paper (<body style="height: 297mm">) and then absolute position worked correctly.
Had the same issue, used the answer of Carlo but changed it to use the top margin since it is using the document margins. This way the element was always on the bottom of the first page.
.footer {
position: absolute;
top: 700px;
width: 100%;
}
I'm currently in the middle of experimenting with creating web pages and have come across a problem when trying to make a fixed navigation bar to the top of a web page while scrolling.
I'm able to get the navigation bar fixed to the page using
position:fixed;
but, the problem i'm having is the content below the nav bar (Main content) is pushing to the top of the page instead of staying directly underneath my fixed nav.
I've tried using margins to correct this problem, but doesn't seem to be working.
Thanks in advance
When you use position:fixed you removed the affected element from the actual flow of the document.
The quickest and most effective work around is to wrap your content in a div and displace it from the top of the page by the same amount as your nav...
<div class="fixed">my nav stuff</div>
<div class="my-pushed-content">my content is here</div>
css:
.fixed {
position:fixed; height: 50px;
}
.my-pushed-content {
position: relative //or absolute depending on your needs
top: 50px;
}
Hope this helps!
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
This is the website that I'm trying to recreate - http://www.ulta.com/
I'm trying to replace the search bar with just a plain white bar with few words on text on it. It needs to be on every page just like on http://www.ulta.com/.
I'm using Wordpress for the website, and fairly new to HTML/CSS. Please advise. Thanks.
You can declare a Div with position:fixed in CSS.
In CSS, put the "position: fixed;" for the position/div that you are trying to fix at the top.
Add the following div to the header.php file just after the tag.
<div class="topFixedBar">Some text</div>
and add the following to your style.css file.
.topFixedBar
{
position: fixed;
width: 100%;
background: #fff;
height: 30px;
}
The above should show a white bar at the top of every page (you can change the background color/height to whatever your requirements are.
Im helping a friend with a website and when i resize the browser windows the scroll bar on the right side is not showing up. Is there a fix for this or a way to work around it?
here is the site page im working on
Fixed
Your whole web-page is wrapped inside a DIV with the ID "style" like this:
<body>
<div id="style">
your web-page
<div>
</body>
The CSS for this DIV is:
#style {
background: url(http://upupandfly.com/envie/images/bg_style.PNG) no-repeat;
left: 0px;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0px;
}
This CSS is causing the problem. You have to either get rid of the fixed positioning, or just try to remove that DIV...
The div#style and html elements are position:fixed, try removing these declarations, and your problem will cease to exist (promise!)