I am having a number of strange issues with both vertical and horizontal alignment of nested objects.
Whenever I increase the window size, some elements change their vertical alignment despite their having absolute vertical alignment nested inside of an relative aligned container, with vertical position defined in pixels. Check the element “img” (my portrait) inside of the first hero. When the I modify the dimensions of the browser window the image moves over to the right a bit (also an unwanted effect) and down about 5-10 pixels. Why is it moving down?
Similarly, you may notice that the vertical position of “img” is -4 pixels from the top of it’s container---- except that it’s not -4 pixels from the top of it’s container. This problem happens all of the time: Nested elements seem to take on positions relative to their container that are totally arbitrary. Some times they are way below, sometimes way above, the container in which they are nested in.
A third question: at some point in this long and tedious journey that is learning to design with markup through the webflow platform, the width of almost all of my divs and containers, which is set to auto and supposed to cover the whole page, all created a 20-30 pixel margin on the left. I have tried just about everything to get it to go back to the way it was, with no luck. Any ideas as to why this is happening?
I am assuming these issues are due to my lack of experience manipulating html5 markup. The problems are recurrent and quite confusing. I hope that through revealing my current conundrum I can arrive at a better understanding of how everything is structured, and how I may be causing this problem. Any help that can be provided in this regard would be much appreciated.
There is a lot going on in your designer with a combination of absolute positioning in both px and % and margins in %. There are some structural problems as well.
First off you are using relative and absolute position more then you need to to achieve what I think your are trying to do. Overall It might be easier the tell us what you are trying to do and we can walk you through the process.
1.) The parent to your image is hero1 it is not relative and if you don’t want the image to move when the browser is re-sized then it is also going to need a fixed width for hero1 in px. (this won’t be responsive and with Google’s up coming changes this might be ill advised)
2.) your image in addition to having a absolute position has a top margin of 15%.
3.) I am not sure what you are referring to. Can you provide a screen shot of this problem.
Hope some of this helps. Continue to ask question and make sure to watch those tutorials.
Watching the tutorials was the second thing I did (after going through the playground tutorial)
So there are “a number of structural problems,” what does that mean? Absolute, relative, auto. Margins and position. I have a shallow notion of when each is the ideal to be used. I have interpreted from your post that the problems I have going on with the right edge of my page have to do with this, is that right? I know that much already. I guess with 200 elements it’s hard to know where it went wrong.
Again, I am a visual designer with minimal experience using markup to create websites. I felt confident after watching the tutorial and doing the playground, but I see now that there are some important things to consider when designing that I missed or weren’t included in the videos.
If nothings comes of this, and I have to scrap the project, I hope that at least this can provide some insight for the developers.
Don’t give up, once you catch on Webflow is a really great tool. Don’t over think it.
Here is a screen shot of your opening hero section and the structure to create it. I am not using relative or absolute positioning. I have nested all of my elements as shown in the screen shot and used % width and floats to achieve the layout.
