It’s been a while since my last post. I’ve had trouble with my eyes, but I’m back in the game now, and while these posts will be scaled down significantly while I’m concentrating on other non-Web-related things for the duration of my University exams I’m sure there will be many times when I will feel the need to write a post on here upon finding interesting web-sites or other such things.
I recently came across what I would dub a “holy grail” of an explanation of website layout:
This has consolidated my understanding of the positioning elements within CSS - ‘static, relative, fixed, and absolute’
Static is where the elements position is fixed to the place it would usually appear within 'normal' page layout.
Relative is where upon adding ‘top, left; right, bottom’ elements, the position is set relative to where the element would appear within 'normal' page layout.
The two more tricky positioning elements that I’ve only just understood fully…
Fixed positioning is where an element will be placed somewhere within the browser window upon adding ‘top, left; bottom, right’ positions, relative to the window where the web page is produced. I.e this would be natively be relative to the <body> element, as everything that is displayed in a website is inside the <body> element.
Here’s the interesting bit though, which has radically expanded the possibilities of positioning, and given me an idea of how to align the colour boxes from the University coursework, which I will have to try again when I have more time…
Absolute positioning positions an element relative to the parent element of the element that contains it! By affixing the parent element with a ‘position: relative’ value and no further positioning values - any child elements within that element that are given an ‘absolute’ position with subsequent positioning values will be aligned relative to that parent element! Obviously the parent element would be the <body> if no other was specified as being the ‘relative’ parent.
This is fantastic, because it means I could do something like make a div for my entire set of colour blocks; set its position to ‘relative’, and give all the individual colour blocks within that div an absolute position, and hey presto everything should work. This would eliminate all the issues with floating the images and having to deal with all the computed style/padding/margin that go around all the elements before and after the colour blocks, which was causing me all the problems.
Two fascinating websites I’ve also come across, that I’m sure will be invaluable now I have a decent knowledge of HTML and CSS:
This fabulous little website provides an interactive CSS playground, where things can be seen working as they are written on the screen. This is absolutely fantastic and it will no longer mean trawling through lots of code on my text-editor and refreshing a page that is bunched in between a load of tabs on my browser! This is something I’ve always wanted to find, and I assumed something that would be integrated as part of a proper web development package (which I do not use). This certainly looks like the bridge that will go over the gap between using a text-editor and into full-blown website design.
Another brilliant website that will no doubt save me hours and hours of time-consuming, and I’d self-proclaim as petty tasks for trying to work CSS problems out myself, this website will no doubt have a lot of things on it that will shed new light on problems that I’ve come to a standstill with - and show me better and shorter ways of doing the same thing that I’ve already done, but implemented better. Like my University coursework placing images in a tile pattern down the page took days and days of work, using floats and then finding new CSS3 rules for positioning them directly as a table-esque design.
I’ve found this with anything I start to learn of become interested in. There is always a very steep learning curve as one understands the very basics ground-up of an industry/technology/discipline, and once those basics have a good grounding all sorts of other brilliant resources come out of the woodwork as these ones linked above.
It proves to me time and time again how brilliant the Internet is, and what an never-ending source of knowledge it is - if you know where to look and put the time into finding good learning resources, vastly more resources and points-of-interest come flooding out.
Definite light-bulb moment today for website related things, and things can only get better from now on.