The Pain of Positioning

For my first site, what I am proud of is the fact that I finally become familiar with most CSS positioning properties after all the trial and error. While I don’t have an element that completely broke, I do have constant hassle with the CSS positioning.

Take my homepage for example. What I want to achieve is to make the full image background all the time, no matter how people change the dimensions of the browser. But at the same time, I have to divs instead of a full page background of a single div, which forced to learn everything about CSS in and out. The solution to this is to make the height and width non-absolute values: so instead of specifying the height of your div to 960 px, set it to 100%, and everything on this page should also follow this pattern. So all the margins, paddings should also go with percentage, unless you really want a certain absolute distance (for me, is the margin between my navigation and bottom). And also, if you want to control the arrangements of the elements, some absolute and others relative, you have to have a clear mind of what was going on. And when you can’t see something, experiment with z-index and set it to 9999999….if you still can’t see it, that was your problem. Honestly speaking, I ended up putting every CSS class with a z-index to make sure they function well.

Screen Shot 2015-03-31 at 8.23.12 PM

Another tough task is flow. It sounds really easy but when you do it for the first time, it requires some thinking power. Flow is not like align, which we are all familiar with with print typography, but a process how the computer compile your elements. For the page below, I had a really hard time figure out how to put two pictures side by side, and I ended up with doing three separate divs as a compromise. You won’t notice the mess from the outside, but I did adapt the dimension of the pictures on the right to match the height of the pictures on the left.


Finally, here’s a final link to my site:

Screen Shot 2015-03-31 at 8.17.01 PM


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s