Hey guys, bear with me this is gonna be a long post. So I just finished my first website, no tutorial, it’s all my code so please excuse how terrible it is. Any way when I was building it I built it a section at a time i.e header section, then about section, then menu section etc. Anyway when I would add a section some white space would appear at the bottom of the page. So when I would add the next section that section would drop to the bottom of the page NOT the bottom of the previous section. So I would add position: absolute; and lift it up so it would connect with the previous section. I did this with every section I added, and every time I added a new section or something I needed to position absolutely it would drop to the bottom. So when I got to the footer section it was like 2000px below everything, so I postitioned it absolute and raised it 2000px now I need to figure out how to get rid of all that white space. I went to stackoverflow and reddit and they told me it was the position: absolute; causing the problem. The problem is I have like 1000 lines of css and even when I remove all of the position absolutes, not only is there still whitespace(not a lot though) but now my website is completely trashed. Also for some elements position absolute is all I could use to get that element where I want it. Position relative wouldn’t work in some cases and I’m not familiar with flex, grid, or float. So position: absolute made sense. This is all very frustrating since I’m self taught and you guys and YouTube are my teacher. Is there a way to fix this or should I just start over?
I do not know what your problem is but if you open up developer tools in your browser you should be able to locate the div or whatever is creating the problem. Firefox also have a developers version of their browser. From memory there is another developers browser - Blisk.
Your site is not very responsive; I would guess a site like yours would be viewed on a phone when people are looking/discussing somewhere to eat.
They are right, the more offset values you apply to absolute and relative positioning the bigger the mess gets. Absolute positioning removes elements from the normal page flow and other elements IN the page flow do not recognize them.
Your page also falls apart when the browser viewport width is reduced.
Absolute positioning should only be used for small areas that NEED to be removed from the flow. Not to be used for page layout.
Start over and learn about modern layout methods. For the most part elements in the normal page flow will be normal block elements that will stack naturally on top one another.
Actually the biggest cuplrit is your use of position:relative with co-ordinate positioning. When you move an element using position:relative it doesn’t physically get moved at all. The space it occupied is always preserved so when you move it with top:-490px that will visually move the element to that position but now you will have 490px of blank space from where you just moved that element.
In the case of that -490px you could have simply used a negative top margin and maintained the flow of the document without leaving holes in the page. Of course 490px looks like a magic number but it may be that you wanted the slanted overlap space preserved which would be fine.
You have made the same mistake with position relative a number of times which makes the page unworkable and unusable. You will very rarely use position:relative to move structural elements in your layout. It is used for more subtle overlapping effects without disrupting the flow. Most users do not need to use it at all unless they know why they are using it.
Of course your use of absolute positioning anyway means that you have lost control of the flow and absolute elements should be used sparingly but within controlled areas where the other content is holding the flow of the page. Elements need to flow naturally one after the other where possible and not rely on a magic number or magic position that is too rigid or unworkable for a fluid site.
I’m a little surprised that you have missed these concepts as some parts of your code are using extremely complex rules unless you simply copy and pasted from somewhere else. 
However you have done nothing that any of us already did when we started. 
Treat it as a good learning exercise so that you can work out what works and what doesn’t.
The most important part of responsive design is to allow the page to adapt to different viewports so you must use strategies that make that possible. i.e. Don’t use absolute position to move things horizontally but use flexbox or similar (grid, display:table/cell or even the odd float).
Avoid fixed heights and fixed pixel widths but have a more fluid approach. You will rarely if ever apply a height to an element that holds text content.
If you are designing for mobile you will need to linearise the layout to a single column or at least make it fit better on the smaller screens (don’t forget the viewport meta tag or media queries wont work for those devices).
I would advise you to start again without using absolute or relative positioning but ask in the forums here for help on how to align things horizontally or indeed when absolute positioning may be the right choice. Although it may seem a steep hill to climb a page like you have there would take no more than a few hours to fix once you knew the right way to do it:)
In the end its a learning experience and we learn more from our mistakes than accidentally getting it right first time
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.