| SitePoint Sponsor |
Hi all,
I'm looking to move away from table based designs to full CSS. Are there any hard and fast rules with regard to positioning divs ?
Am i right in saying that they should conform to a document flow, where they stack up on top of each other and then you position them as is appropriate ...
Should I always use relative positioning ? When should I use absolute positioning ?
or does it matter ? are there any gains/problems depending on how they are positioned
many thanks in advance
alan
I personally find using absolute positioning for large chunks of the layout tricky - I prefer to only use it for smaller bits and pieces and stick to relative positioning and floats for laying out the page - more reliable generally in my experience.
thanks tailslide......i've been looking through tutorials and thought i missed something.....for a basic two column design with header/banner i've been using relative.....tho i've tried out some 3 column layouts using float...
so far my pages have been two columns....i guess i'll use relative for images too...??
Generally, you dont often need to use relative positioning for layouts. Relative positioning is normally used for more subtle effects.
Absolute positioning for layout is fine but like tailside said, it can get tricky using absolute positioning for large chunks of the layout.
Using floats is normally the best way to go and it should be easy to create a two or threee column layout with a header using this technique.
cheers for the advice....
i had started off using a header/banner relative to a container div...
then a menu positioned absolutely underneath that (not sure why i did that!!)..
and my main content div positioned relative...
does the positioning have any bearing when using different resolutions or if a user resizes their browser window ?
It can.
The two things you have to remember are that CSS is predicated on clean, valid and semantic (X)HTML code, and that it works best with the bare minimum of markup. Don't code your (X)HTML to work with your CSS, code your CSS to work with your (X)HTML.
Most site layouts tend to have a header, left column, main column, (possibly a right column), and a footer. Marking up your structure that way will allow for a much easier time when it comes to apply the styles.
I prefer to use a simple source code order, and then use a combination of floats and margins (margins on the main column equal to the width of the column next to it) to achieve the layout I want. I also set a default font size of 100% in the body selector (which is tied in with the <body> element), and then use EM units for all subsequent font size changes and my layout. For example, if the font size is set to 16px (which in my stylesheet the 100% font size gets read as 16px), and I have a column that is 9em wide, then at 16px that column will be 144px wide. This allows for the layout to expand and contract as needed. Only when I have a column that must be a certain size (like a sidebar with a calendar that has an image above it) will I use pixels instead of EMs--and then the main column will have the margin for that side set in pixels instead of EMs.
Also, be sure to strip the margins and padding from virtually every element. Use the universal selector (* { /* style rules here */ }) to do this. Understand though, that when you do this, you will be responsible for the margins andpadding of all your elements. It's powerful, so be sure to use it with care, and learn how to fully maximize it.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
I agree with Dan (again, seems that I agreeing with Dan in every single thread)
I also tend to do my layouts liquid whenever is possible, so they will expand/contract as necessary.
Most of the time, I use floats to get the result I want, but in order to know what it is best for you, you need to understand floats and positioning, so you can take the right decission.
I was going to give you a really brief explanation but I decided to take a small break... maybe later (sorry if I am feeling lazy, but it's friday and I am tired)
Before asking, do a search... if you don't find the answer, then ask
The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
SP Guidelines - No fluff.
Thinking Web: Voices of the Community - The Community Book
thanks guys for all the great advice...
i've seen some liquid layouts for 3 column.....and i will take a look at ones for 2 column now too....
am i right in thinking that with a liquid layout, different screen resolutions are handled in an easy and efficient way ?
are there any other methods for dealing with different screen resolutions in css ?
at the moment i'm making sure my header is 800px wide and the menu+content is 800px wide combined also.
thanks
alan
one thing that I had to learn the hard way (actually many things but lets not go there!!) is the importance of doctype. If you don't get that right forget the rest!
lordy....i've opened up a hornets nest!
i'm trying to make the xhtml compliant also...and have been referring to the w3.org transitional dtd....
trying to satisfy that...pretty okay so far...
is there anyway it relates to css and layout in particular that i should watch out for ?
cheers
alan
the doctype doesn't relate to CSS, only your markup. Obviously, if you do not conform whatever specification you are using and the browser goes into quirks mode, that's going to affect how your page is rendered and hence, indirectly, your css... to conform any specification you need the doctype.
The only thing important about XHTML is the version you are using and how you are sending it (the only version that can be sent as text is 1.0, any other needs to be sent as application). If it isn't really necessary, I would use HTML 4.01, because Internet Explorer doesn't really understand XHTML, and just treats it as bad formed HTML, so no benefits there.
Before asking, do a search... if you don't find the answer, then ask
The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
SP Guidelines - No fluff.
Thinking Web: Voices of the Community - The Community Book
Posting Permissions
Bookmarks