Does anyone know of a good guide explaining how to position elements using CSS?
Asked by
nashish (
196
)
November 29th, 2009
I am coding my first website using HTML and CSS and am having a lot of trouble getting my images to be placed exactly where I want.
I’ve read about the position modes “absolute”, “fixed”, “relative”, etc, but I am unsure which to choose to realize my idea.
My goal is to be able to move my images around my page, pixel-by-pixel, so that they sit exactly where I like. I have yet to figure out how to set up my code to have such freedom of movement. No matter what values I set as “top”, “left”, or whatever, my images do not budge. I am generally confused on this whole aspect of CSS. Any help would be greatly appreciated!
Observing members:
0
Composing members:
0
9 Answers
Google “css box model tutorial” and start experimenting. Don’t worry, it was a blur starting out for me too..
www.csszengarden.com is a great place to get inspiration too..
@nisse I did a search for “CSS Box Model Tutorial”, is there a specific site I should be seeking a tutorial from? Also, CSS Zen Garden is a great site! It’s featured in some books I have and a friend recommended that I check it out as well.
@jaytkay I looked through the W3 School site and found a chapter concerning the Box Model Nisse wrote about. Thanks!
Also try avoiding position: absolute (or any other than the default). It may seem very easy to resort to that and using top: and left: at the beginning, but once you get the hang of just stacking the things next to and below eachother that becomes much easier, also to maintain or expand on. Also, often there’s really no reason to have everything layed out pixel-precise – it may still look good if there’s a couple of pixels more margin. Since users can have different browsers, monitors, operating systems and what not, this is a tedious and difficult task and often not worth the effort.
Youtube is your best friend, search for some tut’s…
@nanish: Can’t really recommend any specific ones since it was a while since i learned it myself, but i remember the first 50 or so hits contained like 20 really decent tuts, so just pick one that looks good and start working it.
You Tube is actually a good resource for this; I think this is something I need to see being done to understand.
if you want to use top:; left:; etc you need to add position:absolute: or relative or fixed to the element, otherwise it wont do anything.
I made a quick example of this here
if you have firebug you can play with the styling right in the browser but you can also copy this code into your own file and and play with it.
@wenn I appreciate your quick example! I found a nifty video on YouTube that had me create colored columns and move them around in relation to each other. It made this whole subject more clear to me, and I think I can move on with my design.
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
