Learn CSS Positioning

http://www.barelyfitz.com/screencast/html-training/css/positioning/

by r11t • 16 years ago

107 32 16 years ago

unignorant• 16 years ago

Important to know, I suppose...

But if you are building a quick app or prototype, I've found frameworks like blueprint (http://www.blueprintcss.org/) to be quite helpful.

CoryMathews4• 16 years ago

Personally I cannot stand frameworks for css. They completely screw up the default styles, and make it much harder for other developers to quickly make css changes to a site.

CSS frameworks are different from other programming frameworks because it overwrites defaults. It is equivalent to something like overriding printf in c to do add an extra character at the beginning. Its just ridiculous.

ludwig• 16 years ago

You know that's on purpose, right? Different browsers have different defaults. Therefore, the easiest way to ensure consistency is to start from a clean slate and be explicit.

antidaily2• 16 years ago

I can't stand trying to figure out a 4 column layout that works in most browsers. Also, there are really lightweight frameworks that don't touch default text and form styling.

nbrochu3• 16 years ago

I fail to see the use of CSS frameworks (and yes, I have tried most of them).

Honestly, in my experience:

- The time you invest in learning the ropes of that framework would be better invested in properly learning CSS. I wouldn't say this of any framework in any language, but CSS is easy and, contrarily to what I constantly hear, it isn't that hard to master.

- Once you know CSS well, it's much faster to convert a PSD by hand than trying to make it work with your framework. The more detailed the actual design, the more this applies.

- The only pseudo-framework that actually boosts styling speed is leveraging a well-maintained css reset stylesheet.

Keep in mind that this is coming from somebody that knows CSS well... I understand why a framework sounds appealing, especially since we have a lot of them on the development side, but in the case of CSS, it is total overkill.

gnaritas• 16 years ago

Frameworks are just reusable classes, this is most valuable when they're your own reusable classes. Coupled with something like less or sass to extend CSS to allow mixins, having parameterized reusable classes is awesome.

The problem with other peoples frameworks is, well... they're other peoples frameworks. Develop your own and you'll love it. Such frameworks allow you to factor your CSS and eliminate repetition and patterns you use often.

pmjordan• 16 years ago

I've been using CSS off-and-on pretty much since the first browsers started supporting it; I too struggle to see the point of the frameworks I've tried. There's only one thing I have trouble with: maintaining clean & tidy CSS once a site grows beyond a certain point. Details get changed, which causes classes, etc. to be forked, rules don't get deleted because it's not clear if they're really unused, etc.

Do you have any advice for dealing with this? I feel there ought to be some way of semi-automatically "refactoring" style sheets, or keeping them compact and neat to begin with, but I haven't yet found it.

obeattie• 16 years ago

Yay! Just what the readers of Hacker News love to read… basic CSS tutorials! Can we have a "how to get amazing mouse cursors with JavaScript" one, too?

CoryMathews4• 16 years ago

haha here ya go http://www.javascriptkit.com/script/script2/simpleimagetrail...

daleharvey• 16 years ago

judging by the points it does look like what hacker news wants to read, but we can always do with less snark.

This looks like the best example I have so far to pass along to people asking me about css, which happens quite often.

That aside CSS is messy and complicated, lots of programmers dont understand the basics, and even experienced developers can easily miss a few very useful tips.

kowen• 16 years ago

I think CSS itself isn't so complicated, but the whole different support in different browsers thing certainly does make a mess of it!

One of the most helpful things I ever did with respect to CSS was read the apress book on html/css patterns (just ignore the parts that use javascript).

http://books.google.com/books?id=xq9IOomk1tUC

(I never realized that standard CSS actually operates with 6 box models!)

nbrochu3• 16 years ago

What is so wrong exactly with basic material?

Sure you might know CSS inside out, but I'd be willing to bet some people here could learn something useful out of it. The rest of us that already are familiar with it get a quick refresher in under 5 minutes.

Positioning and the box model are at the core of understanding CSS layouts. Sure it's not the next cool thing and it certainly isn't advanced, but I'd much rather browse a Web where people understand layouts properly, than one filled with a lot of the trendy, over-complicated crap that fails at the basics.

We have to be careful with that basic = not challenging = not geek-worthy attitude. A beginner reading HN comments will most likely emulate it and miss out on the important stuff.

Groxx2• 16 years ago

If the reader doesn't know basic CSS - a definite possibility, remember - then this is concise and programmer-friendly.

If the reader does know CSS, then they're probably asked "can you make this for me?" by everyone and their extended family, and this is concise and has immediate, clear examples to make it newbie-friendly. I wouldn't dare throw a big CSS book at a non-programmer new to CSS.

verdant• 16 years ago

I read this tutorial a long time ago for a basic app I was working on and found it quite helpful. It was my first brush with css positioning

tel• 16 years ago

Step 11 should be: If you don't have an element to clear out the bottom, you can get limited functionality by applying

  overflow: hidden

to the containing element. In most cases this will cause it to extend and prevent the inner elements from bleeding out. In some edge cases it will cause them to be hidden, though.

treyp• 16 years ago

it's pretty surprising how prevalent `clear: both` is. yes, it works, but you're putting presentational code in your markup more than you need to.

let me put it in simple terms for people:

you probably don't need to use `clear: both`. almost all of the time, you can use `overflow: hidden` on the parent element instead of `clear: both`.

(the exception of course is when you've got elements with negative margins that would actually be hidden with `overflow: hidden`)

edit: relevant link - http://www.quirksmode.org/css/clearing.html

loup-vaillant2• 16 years ago

There is one case in which I don't know how to do away without extraneous presentation divs: I want a 2-columns layout where the left column is written after the right column in my source code. Good for my eye (navigation on the left) and for search engines and text based browsers (relevant text first).

Right now, my div structure looks like this:

    <body>
      <header />
      <div-hackw>
        <div-hack1>
          <div-hack2> <article /> </div-hack2>
          <nav /> -- written after, displayed on the left
      <div-hackw>
      <footer />
    <body>

http://www.loup-vaillant.fr/css/style.css

http://www.loup-vaillant.fr

inspired from http://matthewjamestaylor.com/blog/ultimate-2-column-left-me... (down right now).

Header, footer, nav, and article are okay (they eventually will be actual html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a way to ditch them ?

volomike• 16 years ago

Don't forget to add a doctype. It can make the difference of night and day.

callmeed2• 16 years ago

Can you give a brief example?

lambda• 16 years ago

If you leave off the doctype, you are put into quirks mode, in which browsers try to emulate bugs from the Netscape 4 and IE 5 era.

The biggest difference is probably the IE 5 box model (also called "traditional box model" or "border box"), which doesn't comply with the standard CSS box model. In the IE 5 box model, the size of boxes includes their borders and padding, while in the W3C box model, the size of boxes includes only the content of the boxes (the IE 5 version actually makes more sense, but it's not what's in the standard). In later versions of IE, the standard box model is used, but only if you're in standards mode; the IE 5 model is used in quirks mode. Nowadays, almost all browsers support a CSS3 property, box-sizing that can control which box model to use, so you can actually enable the traditional box model in a standard way (though it's prefixed -moz-box-sizing or -webkit-box-sizing in Gecko and Webkit, as that's the preferred way to implement standards that aren't yet finalized)

For more detail on the differences between quirks and standards mode, see:

http://en.wikipedia.org/wiki/Quirks_mode

and

http://www.quirksmode.org/css/quirksmode.html

callmeed2• 16 years ago

Awesome because #4 clears up some confusion I've had lately.

scorxn• 16 years ago

If you need your columns to be equal height (eg: full-height backgrounds) try http://www.alistapart.com/articles/holygrail/

rbrcurtis• 16 years ago

Needs position:fixed

Groxx2• 16 years ago

For a quick overview / intro, this is excellent. Fast, to the point, and clean. I wish I had this when I started.

Of course, with only 9 effective steps of a single demonstration, it's rather lacking in completeness. But that's not its point, and I love all the links in this thread. Loads of good stuff :)

Learn CSS Positioning

Related Stories