I'm learning XHTML, CSS and JavaScript, not to work as web designer, but just so I can code sites for people I know and myself. I'm learning all that by reading tutorials all over the Web, mostly at W3Schools. There's something I just can't figure out: what technique can you use to position objects somewhere specific in the page? It's not easy as Photoshop: in that case, you just drag it!

2 answers

Mottie 1134

I believe you are referring to using CSS positioning. Check out the W3School's reference and also check out this tutorial on use of position:relative and position: absolute and how to use them together,

Answered over 9 years ago by Mottie

Positioning as stated above is one way of doing that. But you will never be able to just define where on the page HTML elements should be placed just with one click. Layout on the web just don't work that way. Mainly because web pages are dynamic, elements are layed out according to a flow (they relate to each other).

But, If you really wan't to learn how to position elements anywhere on a page I'll suggest that you learn about the Visual Formatting Model and The Box Model which both defines why and where elements are placed on a web page and how they relate to each other.

Basically there's is three different flows or dimensions:

  • Static flow - this is how elements are displayed as default. Inline elements are stacked vertically and block level elements are displayed on their own line (list of all html elements and if they are block and inline elements)
  • Floats - floated elements (having a CSS property of float: left or float: right or HTML-attribute of align) exist in their own space, and are stacked vertically if there is room, much like inline elements (but with som crucial differences).
  • Positioned elements - exists in their own dimension and does not relate to each other, a positioned element has it's own flow and doesn't "collide" or care about other elements (which differs from both static and floated flows where elements are stacked on each other).

You can find more on this - how elements are displayed and placed on a page - in CSS-books such as CSS The Definite Guide, CSS Mastery, Trancending CSS, and by practice; experimenting with layout with CSS. Reading about layout methods and solutions, analyzing code and adapting/using code snippets out there.

Answered over 9 years ago by Jens Hedqvist