Hello all,

I'm trying to figure out the correct ways to implement "complicated" website designs by nesting divs and what not. I have the general idea of how div layouts work but I'm still having issues when adapting the techniques to designs that need to be split up from a sample image created in somewhere like Photoshop.

Can anyone point me to any really good references on how to layout designs properly, with nested elements and what not? namely css and divs. I'm fine with the old table layouts, they seem much easier! but on the other hand I understand the benefits of the new standards..

Sites such as W3 schools are good.. but they only seem to list the things you can do.. I'm not always sure how to use them or what they are all for.

Any references or means of guidance will be grealy appreciated! 😃 because I can only ever seem to find "simple" references.. alternatively any sample sites which I might be able to break down and follow how they work? I've looked at some, all seem very professional and I see how they work.. but the things I'm not always sure why certain things are used and not others..

Many thanks,
Ben

    alistapart is a good source, but I'm afraid in general you have to learn how the commands function by trial and error. That's annoying, I know, especially since the way CSS commands work is not the least bit intuitive, in my opinion. I think the system has room for major improvement, but this is what we have now, so we have to use it.

      www.bluerobot.com has some useful templates for some basic CSS-based layouts, which can be good starting points for different designs. www.htmldog.com has one of the more readable set of HTML and CSS tutorials, in my opinion.

      Also, I'd just like to point out that CSS != DIVs. DIV tags can be useful at times to group related elements together so that you can apply a style for that grouping, but CSS can be applied to any HTML element. For instance, if you just have one paragraph of text that you want to position at the top right corner of the page in a box, you can just apply your style to that paragraph - there's no need to create a styled DIV then stick your one P element inside of it. I mention that here just because I see a lot of people who tend to suffer from "divitis" when they first start learning to use CSS styling, sticking way too many unneeded DIV tags into their markup.

      Also note, somewhat related to the preceding paragraph, that if you are creating the sort of layout where you might have used image slicing before, with CSS absolute positioning and other aspects of CSS, you may not need to slice up your images (or not as much). You can simply create one main container div which has your entire image as its background, then position various other HTML elements within that DIV as desired to overlay particular parts of that image.

      PS: Take a look at www.csszengarden.com when you have some time to poke around there. Every design there uses the same exact HTML source code; it's just the CSS stylesheet that changes. It will give you lots of examples on how to lay out pages using CSS (but there are no tutorials or explanations, just examples).

        Now these were the kind of links I was hoping for!

        Thanks guys! I'ma try to break these down a bit, see how they all work.

          The author of CSSPlay has an example of a page which he had originally built as a jigsawed-image-in-a-table, and his later reimplementation using CSS.

          The rest of the site bears a look as well.

            4 days later
            Write a Reply...