fellow earthians.
I, relatively sane of body and mind, hereby give up understanding CSS positioning by myself.
The online resources about CSS go to great length to explain that the "color" attribute lets you set the "color" of stuff. Unmöglish.
Then, that if you want to put something to the left of something else (crazy idea, right?), all you have to do is to set it to float to the left provided you set the "relative" flag on its parent block which has to have a grand-father node with the "absolute" flag set to true so that it's positionned relatively to an other container that may-or-not contain anything, have a position, a size, or not, depending on the browser, the size of other stuff, and possibly the phases of the moon. (CSS experts are advised not to take the previous paragraph seriously. I'm pretty sure someone will point out that my rant is not valid, or w3c-compliant - and that it only applies to the swedish beta version of IE6)
Joking apart, I'm looking for any resource that explains the root causes of all the crazyness behind layout in CSS. In essence, something that would be to CSS what Crockford's articles are to Javascript.
In this spirit, let me point out that I'm not looking for css libraries or grid frameworks like blueprint, or for CSS extension languages like lesscss. I've been using those to ease my sufferings, but I'm afraid it would be like telling someone to "just use jQuery" when they say they can't wrap their mind around prototype inheritence in JS.
If all you can point me to is http://shop.oreilly.com/product/9781565926226.do , I guess I'll consider myself doomed.
Thanks in advance.
EDIT : I probably should not have talked about "positioning" (thanks to all who've explained again that 'position:relative' does not mean 'relative to your container' and that 'position:absolute' means relative to something. I've never been so close to making a monty python script out of a SO questions). I think I meant layout in general (positioning + floats + baselines + all the nonsense required to put stuff on a straight line).
Also please excuse the ranting tone, I'm trying to pour some humour into frustration. I would use zen techniques to calm down if I could, but this only reminds me of
this.
It seems most others have not quite understood the gist of your post. I'll break it down for you:
CSS positiong is complex because it was designed by many different groups of people over a long period of time, with various versions, and legacy compatibility issues.
The first attempts were to keep things simple. Just provide basic styling. Colors, fonts, sizes, magins, etc.. They added floats to provide the basic "cutout" functionality where text wraps around an image. Float was not intended to be used as a major layout feature as it currently is used.
But people were not happy with that. They wanted columns, and grids, boxes, and shadows, and rounded corners, and all kinds of other stuff, which was added in various stages. All while trying to maintain compatibility with previous bad implementations.
HTML has suffered from two opposing factions warring it out. One side wanted simple (compared to existing SGML anyways) solutions, another side wanted rich applications. So CSS has this sort of schitzophrenic nature to it sometimes.
What's more, features were extended to do things they weren't initially intended to do. This made the existing implementations all very buggy.
So what does that mean for you, a mere human? It means you are stuck dealing with everyone elses dirty laundry. It means you have to deal with decade old implementation bugs. It means you either have to write different CSS for different browsers, or you have to limit yourself to a common "well supported" featureset, which means you can't take full advantage of what the latest CSS can do (nor can you use the features there were designed to add some sanity to the standard).
In my opinion, there is no better book for a "mere human" to undrstand CSS than this:
http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X
It's simple, concise, and gives you real world examples in a glossy "easy on the eyes" format, and lacking most of the nasty technical jargon. It is 10 years old, and doesn't cover any of the new stuff, but it should allow you to "grok" the way things work.
Positioning is easy to understand:
relative positioning -- Render the page exactly as your normally would. Once done, anything with relative positioning gets moved, relative to where it initially was. Nothing else is affected.
absolute positioning -- Removes the item from the page flow. Other things render as if this weren't there, i.e. they fill in the space that this item took up. They are now positioned absolutely to the nearest element with position: relative OR position: absolute set. In many cases this means they are positioned absolute to the body tag.
You then position things with top, right, bottom and left in CSS.
If something has absolute positioning set:
positioned relative to the top left of the page when using top and left. Positioned relative to the bottom right of the page when using bottom and right.
its width/height can be controlled with a combination of top / bottom or left / right, e.g.: top: 100px; bottom: 100px will make an item that is 100% - 200px of its parent's height (unless you specify a height too in which case top and height are used and bottom is ignored).
There's more to the positioning that just the position property. You need to understand how floats work as well.
http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
These two articles should get you going.
Read a bit on display properties as well, since they're likely to be one of the problematic areas in any given html/css.
this link is mainly about z-index but IMO it does a pretty good job of explaining how things are positioned on a page
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
This link is more focused on positioning but it is important to understand the z axis in order to understand the rest of the positioning puzzle
http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/
Have you checked out this great book? http://shop.oreilly.com/product/9781565926226.do
just kidding.
I don't think you need an entire resource devoted to this one question. It's rather simple once it clicks.
Think of CSS positioning as a way to position items either relatively to themsevels (wherever they fall on the page) or absolutely from on an X/Y coordinate.
You can position something relative and it will either move up or to the right with a positive number, or down and to the left with a negative number.
If you position an element absolutely it will remove itself from the layout altogether (the other elements will not recognize it as being on the screen) and then do one of two things. It will either:
1 - position itself from the top left of the page and either go up/down right/left as I mentioned before depending on whether the numbers are +/-.
2- if the PARENT element is either positioned absolute or relative it will position itself from the top left "corner" of the parent element, NOT the browser window.
Think of z-index as layers in photoshop. With 0 being the bottom (and newer browsers recognize negative z index for even more fun). and 100 as the top later (newer browsers recognize an infinite amount of numbers). The z-index only works with position: relative and absolute.
So if I position something absolute, and it happens to fall underneath another element, I can give it z-index: 100 and it will position itself on top. Keep in mind that the element itself is a rectangle, and the height/width of the element may inhibit you from clicking on the element beneath. You can't do angles,circles, etc. with pure CSS.
Does that help?
These two courses from code academy should explain CSS positioning well:
First, Second.
Related
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I have a design I want to accomplish and found 2 ways to achieve it using the 960gs framework. Although I don't know which one is better and there's not so much information about best practices in CSS as there is in, say, PHP. So I applied what I learned from vanilla HTML/CSS and PHP OO to find out none of them is actually "good".
This is [the important part of] my design:
The two ways of obtaining it based on the 960gs framework and the disadvantages I find are:
Modify the CSS to add margins to the text. Then, inside that div, apply a pure 960gs system with 12 columns. This works, but it makes the whole width wider than optimal (1000 px, not good for 1024x768, 9% of browsers).
Use the 24 column model and leave the first and last column empty, so they become the margin. The problem with this is that then I'm using structure elements purely for visuals, plus having to write them in every single part of every page (not very DRY).
Example for the second:
<div class='grid_22 prefix_1'>
<p>
The theory of relativity transformed theoretical physics and astronomy during the 20th century. When first published, relativity superseded a 200-year-old theory of mechanics created primarily by Isaac Newton.
</p>
</div>
What I want is to apply the 960gs framework in my page with some extra personalized margins.
So, how would you avoid these problems I said for achieving what I want?
PS, due to a bug in 960gs framework, it's not easy to find
Your column is 960px wide and it seems fine. Both box-shadow and the left/right extra width of heading outside your column can be made without declaring a different width so it won't create an horizontal scrollbar.
Working example: http://jsfiddle.net/q8brv/ using absolute positioning for left and right part of decoration of the heading (compatibility IE8+. IE7- can live without box-shadow and this decorations imo ;) )
The upper limit with a resolution of 1024px is 1004px, though it's for maximized browser window.
I'd like to get some feedback on using padding and margins for page layout versus absolute positioning. I realize that there are and will be scenarious where either or both are preferred and that will depend on the scenario.
But what I'm getting at is overall page layout for pixel perfect designs what is the general rule of thumb? I'm a little more than a year into HTML and CSS and I'm coming from a graphic design background, so most of my train of thought lies heavily on approaching a design from a layout standpoint first. So far in my web designs I have used the rule of thumb to use appropriately titled divs with floats, padding and margins when laying out a page, and if something requires absolute positioning (like an element to be stuck on the edge of the screen or a div) use it when necessary.
But lately I've really been starting to re-think my approach to page layout and wondering if starting with usign absolute positioning as a general rule of thumb is a better idea?
Can somebody point out some good articles or resources on this topic, and I'd love to hear everyone's personal feedback as well.
I can see where you're coming from, but using absolute positioning for your layout is extremely inflexible. I think you'd be best to carry on as you are, using the CSS box model. That's not to say absolute positioning is a bad thing, just that it's not flexible enough to handle fluid layouts, changing box-sizes etc.
I've been learning more and more about CSS layout and its quirks over the last 2 years and I am pretty much using the float/margin technique as it seems to give me the best results across different browsers.
Maybe it was just the way I was doing it, but I have experienced some pain with positioning (absolute inside relative containers) when trying to get the same results in all browsers. IE was usually the outlier and that was mostly with IE6/7. I have hesitations with going straight to absolute positioning, but perhaps others here might have had a better experience and can point you in a better direction.
Good luck and I hope you find something that feels comfortable to you!
As Rowan mentioned, absolute position is to inflexible with all the different devices and screensizes.
What you should do, especially if you come from a graphic background, is using a grid layout in your website designing process that corresponds to a grid framework for webpages, for example bootstrap.
Then you'll get
A: Symmetric and appealing layout
B: Someone that knows this a lot better than any of us that has handled all the problems that floats and margins might cause and that will update the framework in the future to compensate for the turns web development is taking.
Can we make cross browser css layouts with CSS positioning, without using float? What are the bad and good points of usin css positioning over Float+margin+padding? I want to make layout compatible with all A-Grade Browser and with IE6 Also? IN dreamweaver we have a layer functionaliy to make css layout quickly but it's uses absolution position. is this technique bad?
If you don't care how it looks if the browser is larger or smaller than you designed for then absolute positioning it great. :)
But, in most cases, if you are designing for a browser that may be on a 17" - 30" monitors, so it may be fullscreen, then float is helpful.
Now, if you are changing the positions to scale to the size of the window dynamically, and can handle a resize, then absolute will work well.
I think absolute positioning would be more work than it is worth, if you want to get rid of float.
When I put together a page, I consider the elements I am putting together and the kind of physical structure they form. If elements are lined up together, like a row of books, I will use floats to "press" them up against one another. If I have more sparse elements, like post-it notes on a sheet of paper, I will use absolute positioning because the position of one element is not closely tied to the position of another.
I also look at what I know about the elements and what I don't. If I have things that change in size, like elements with varying amounts of content in them, I will use floats to position them. This way the elements still "stack" up together in some orderly fashion. Positioning an element of arbitrary size can be tricky, since you can end up exceeding a container's boundaries and breaking a layout or displaying/hiding some content in a place you don't want it.
Of course, you can combine the two techniques together, too - it's all about what you need to put together.
Can we make cross browser css layouts with CSS positioning, without using float?
Certainly, if you like. Floats and positioning are just two more CSS properties, they are not mutually exclusive. For complex layouts you may often be mixing both.
IN dreamweaver we have a layer functionaliy to make css layout quickly but it's uses absolution position. is this technique bad?
Yes. Except for things that are naturally fixed-size like images, using exact page-pixel absolute positioning is a bad move, one that automated tools tend to produce because it's easy to do with a WYSIWYG interface but one which degrades badly for text.
One of the arguments I've heard about blueprint css is that it lets you think of your layout in terms of a grid rather than in terms of floats. This seems like a big advantage to me because I always get confused about where my floats are going to end up - sometimes a float will unexpectedly drop down below some other floats and I have a hard time figuring out how to reposition everything. Does this make blueprint css a good choice for me - or should I just put the time in to learn how to use floats properly and do all of my layouts manually?
Yes, absolutely it lets you use a grid - see this example page, which makes the grid visible by striping the background according to the grid columns.
(But I have to say, a little time spent learning how CSS layout really works would pay big dividends - better to understand it than to give up and try to work around it. And you'll then have the option of creating flexible layouts that work well on all sorts of different devices.)
One of the biggest issued with anything that is absolutely positioned is that items that are not absolutely positioned do not know that the absolutely positioned items exist.
Of course this is a debate that will go on forever about which is better but you will probably be better off using elements that can be scaled depending on the browser size and resolution.
Under the hood, Blueprint still uses floats.
Here's a novel approach to creating "float-less" layouts that are semantic and accessble,
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp
As stated, BluePrint is a grid system, but is based on CSS floats. So understanding CSS Floats is somewhat important to really grasp what BluePrint does.
I rarely use floats over absolute positioning for a variety of reasons.