Request learning material. Focus on nitty gritty of Layouting, Styling in Percent, and Em

Forums » Dev.Opera » Archived Opera Web Standards Curriculum Discussions

You need to be logged in to post in the forums. If you do not have an account, please sign up first.

29. March 2009, 19:42:25

okaprinarjaya

Posts: 4

Request learning material. Focus on nitty gritty of Layouting, Styling in Percent, and Em

Hello WSC team smile
I'am a student in a university. I build small web design community with my friends in my campus. I and some of my friends be the speaker for members of my community.
We have problems in CSS layouting. We have problem in layouting and styling in Percent, and Em. We don't understand how Percent, and Em work. We difficult to create background image size, and placing a background image with Percent,Em based layout.

Not just that, we also can't understand how to calculate background positioning using percent and em. It's harder than using pixel. It is very hard to calculate when creating a layout with faux column.

is it possible WSC team write in detail about layouting and styling with percent and em?

Thank you smile

1. April 2009, 17:38:34

Erinyes

the Reasoner.

Posts: 378

With out going into detail:
  • em = line height (so, 1em = 1line, 2em = 2lines, .5em = 0.5 size of 1 line)
  • % = dimention proportionate to parent container.

I think what you mean to say is you wish for the theory on creating "elastic layouts".

Listening to what you have said, I would just say: "if it sounds wierd and unconventional, it's probably bad! take 2 steps back" (hint: background positioning with em/% units)

^ http://24ways.org/2006/compose-to-a-vertical-rhythm
^ http://www.alistapart.com/articles/elastic
Just as I thought...

3. April 2009, 05:05:58

okaprinarjaya

Posts: 4

Originally posted by Erinyes:


I think what you mean to say is you wish for the theory on creating "elastic layouts".



Yes! that's what i mean. What u mean with "It's probably bad, take 2 steps back" ?
any tutorial for css background in em / % unit?

Thank you smile

15. April 2009, 13:51:54

daniiswara

Posts: 6

Hi Oka,
I knew one of the best implementation of elastic/liquid layout, please check Tommy Olsson's site
try to ctrl+[+] his site twice or more

19. April 2009, 13:17:53

kaqfa

Posts: 2

I use blueprint css lately, i think it's a great framework to make css grid easy.
Want to use liquid layout, we need only add liquid layout plugin.

Okay, i know many people say using css frameworks isn't good, but i still think it's very good tool to make a good design in strict time.

Forums » Dev.Opera » Archived Opera Web Standards Curriculum Discussions