I am learning front end web development and i was trying to make Netflix clone and its going smoothly until i resize my page vertically, the main tagline of the page moves upward as i keep decreasing the size vertically.
Can someone help me to figure it out, how to make it static like the original Netflix sign up page.
I hope you understand what i am trying to say!
https://drive.google.com/drive/folders/1cYgQs0d4PLP4fzSRlMM1wN8jWu_55XyD?usp=share_link
i have uploaded a folder containing my files html and css.
I know its messy and unresponsive but i will fix that later as a pioneer that'a great progress for me so please help me to find a solution.
The problem is with your .info class, position:absolute with top:50% is what is causing the movement of info bar.
Unless necessary, you should minimize the use position:absolute, it breaks the 'flow' of document and messes with a lot of things you might be unaware about.
An easy workaround is as follows:
.info{
margin:auto;
width:50vw;
}
I am sure there are better workarounds but the basic idea is to preserve the Flow of document.
Related
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I think this question is so stupid but forgive me. I'm still learning.
I've converted my website psd to html, css and it's perfect for my monitor. But when someone runs it on less monitor or bigger, everything mess up. Even when I zoom in / out. The content itself is 1024 and the rest are only background. I want like making everything static and whoever previews the website on bigger monitors, the more expands on the background without changing any place. I see this thing in many websites but I cannot locate it in the ass, don't know where is it or what makes the website so static that when I zoom in - out it only zooms in - out as it should be. Not moving divs and messes up things that shouldn't be moved.
Explaining more easily:
There's some websites when you zoom in - out, the content only gets bigger or smaller but it doesn't move from its actual place. I can't do this thing and I would like to know how it's done. Is there any requires rule in the css to add for each div / class? Anything to insert in the body area? etc.
Sorry if I'm not clear enough.
Thanks in advance.
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties
I just noticed a resolution issue with a site I am creating, and as I am pretty new to HTML & CSS, I really can't figure out how to fix it.
here is the page where the issue occurs : http://website213.com/tour
I need to make the Right elements of the page lined all together, but as soon as the resolution increases a bit, it gets messy !!
Kindly help me fix this issue.
Best,
The problem is the positioning. Some elements are absolute, some are relative and some seem to be fixed. It would be impossible to go one by one, you will have to see how the whole site is being constructed.
I recommend you start by reading how positions work. They are really easy to understand, but if you haven't read about them they can ruin your life. Just do a search for css positioning or check this link: Learn CSS Positioning in Ten Steps.
I've been exploring methods for full-width background images combined with type. I found this website: http://starvedforattention.org/
I cannot figure out the logic for how the page works once the user starts scrolling. I know it's along the lines of big DIVs with backgrounds alongside setting absolute/relative locations.
Approaches for coding this would be much appreciated.
As I can see, what you are looking for is a Parallax Scrolling Effect.
Perhaps you must take a look to jParallax if you're going to work with jQuery. :)
Best!