Free Templates

[jont]

Is Wednesday your product testing day Mal?

[Darren B]

6 months! Thats pretty optimistic in light of his first post on the forum.

Tell me about it i had just got used to V5, V6 & V7 which took me 3 years now i have to re-learn loads (not all i admit). I just wish i had 8 hours a day to learn, more like 30 mins these days

With regards template, anyone here willing to offer a costing for some, i am not after anything major just something a bit different to the standard layouts, you see i am not knowledgeable or brave enough to customise to heavily.

If anyone is interested please pm me with details of some of the site you have done and i can have a look to see if they are similar to what i am after.

Cheers
Darren

[gabrielcrowe]

actually, i think this gibbon has an idea with his free template.

actinic is yet to give us a good template, that is css, without any formatting.

i'm truly an advocate of bare designless html, with all layout and design included as css. so far,every actinic template has far too much design and such built into the code.

what's the closest template that contains next to nothing? I mean, without adding too much markup, id be happy to contribute to a community template that is a drop in for any site, that would let the css designer style it as they choose.

[pinbrook]

clean css is my layout of choice.

there are loads of posts from people asking how to add a third column, this one has it.

I have been attempting to get a 3 col fluid layout working properly, to me this is the holy grail.

I'll help test this with you if like. My css is not good enough to create a masterful master.

[Duncan Rounding]

Agreed, a three column fluid layout would be ideal but beyond my CSS skills.

[fleetwood]

I have been attempting to get a 3 col fluid layout working properly, to me this is the holy grail.

Have been working on this for weeks.
Its is possible to build three column - fluid centre, in css, that works across some platforms, or on some monitor sizes, but unless you keep it very simple, some part always breaks somewhere along the line. For me, it was the addition of a slightly more complex tabbed navigation in the header, that refused to work well (across all platforms) with my 3 col design.

The killer problem I came up against, was when I tried to constrain the fluid design, to within min and max widths ie keep it fluid, but don't allow too wide or too narrow.

The css min-width, max-width does not appear be widely recognised yet.
The only way I could find to make this work, was with tables (back to square one!!).

You can get to simple header and footer and 3 col middle with fluid centre, but beware of how fragile the finished product can be. What works at the outset, can easily be thrown with the addition of one extra little bit of mark up.

I have gone back to fixed widths for now, but am bouncing between fixed width or fluid using tables - still undecided.

Loads of css help sites out there maintaining they have cracked the 'holy grail', but test them across all platforms, and watch little bits break!

[jont]

The killer problem I came up against, was when I tried to constrain the fluid design, to within min and max widths ie keep it fluid, but don't allow too wide or too narrow.

Percentage margins are often a good solution (depending on the structure) rather than specifying widths.

I have got 2 sites underway at the moment with a 3 column layout ... (fixed | fluid | fixed ...... and..... fixed | fixed | fluid) with everything in CSS on the product, section and brochure pages. Unable to show at the moment as WIP and not signed off.

It has been a pig to sort and required using many fixed layout selectors to ensure the CSS does not break. This would be the pitfall for any such template (free or paid for) as users would want to modify the fixed layout to suit their own needs and most likely kill the design.

[leehack]

I don't think you will see a layout for 2 years yet that meets all of your criteria and even that might not be long enough. There is a serious relationship problem with divs.

Until divs are usable with a parent & child hierarchy, i can't ever see it possible, just as we currently go <table><tr><td>, divs will have to take on a similar hierarchy with an inbuilt relationship.

If you create the outer layout with a table, give each <td> an id and then style that id with CSS, you have exactly what you need, apart from the fact that you are using <td>'s instead of <div>'s. But the <td>'s give you the relationship. It is only this very outer layout that needs to be a table, just convince yourself that you are using <div>'s, there is so little difference. Set margins and padding to 0 and you have the holy grail. This is guaranteed cross browser perfect and moves around as fluid as you could ever hope for.

The closest i have come is absolutely positioning (yuck) a centre column with a % width and applying 200px left and right hand borders for the side columns, however it is mandatory that your centre column is the longest on every page. So it's crap basically.

It's an interesting challenge to crack, if noone has done this yet, is it going to be possible with what we have to work with?

[pinbrook]

a nice fixed, fluid, fixed should be acheivable?

left for nav, right for BS, promotions, shipping info etc etc

[gabrielcrowe]

the layout i'm working on currently is currently fulfilling all these criteria. three cols in every browser was easy peasy.

The killer problem I came up against, was when I tried to constrain the fluid design, to within min and max widths ie keep it fluid, but don't allow too wide or too narrow.

this problem i solved with javascript.

for example: www.dabs.com

layouts change depending on the browser width. this is possible by using the DOM to sculpt css. as the browser is of a certain width script watches the width of the page and changes the css accordingly.

see this article:
http://alistapart.com/articles/switchymclayout

these techniques are all css and javascript, so this means that in a template where the html is always static, dynamic presentation will allow for much greater browser versatility.


additional resource for perfect layouts:
http://blog.html.it/layoutgala/

[fleetwood]

Lee

You have hit the nail on the head.

It is the fact that you can't nest divs effectively (the way you can with tables), that ultimately lets everything down.

I have done so much reading, researching, rebuilding and testing, and cannot see how you can get a parent div to constrain the width of any child within.

Tables can do this, divs can't (as far as I have found).

Jont - I did try and put both yours and Lees advice to use (from a previous thread).
Whether you use percentages or some other way, I came unstuck when integrating a fixed width element (my tabbed navigation bar - which could only shrink so far, before breaking) into the design. The only solution I could see, was to limit the middle section (the fluid bit) to a min-width, which would stop my header navigation breaking in small browsers.

I could not find an accepatable way of doing this with css - the reading that I had done suggested that the use of min-width was not widely recognised.

The only way around I could see, was as Lee has suggested above - to build a basic outline structure with a table, and then style everything within, with css.

Having the outer layout as a table, would allow me to nest another table of set width (my min desired width), within the middle section, which should restrict the width to a set width, in small browser windows (I must say that I have only tested this idea outside of a site design, and not tried to incorporate it within my current design yet, but it seems to work).

As a side note, a lot of my research involved deconstructing major retail websites - its hard to find one that dosen't use tables within the design element!

[leehack]

Jont - I did try and put both yours and Lees advice to use (from a previous thread).
Whether you use percentages or some other way, I came unstuck when integrating a fixed width element (my tabbed navigation bar - which could only shrink so far, before breaking) into the design. The only solution I could see, was to limit the middle section (the fluid bit) to a min-width, which would stop my header navigation breaking in small browsers.

From memory Martin, your navbar was the only item sitting at that level in your shop, rather than constrain it to the centre <td>, why don't you use the full width colspan=3 etc and it will never break then? As long as it is not wider than 770px it should be perfect on all setups.

[gabrielcrowe]

well, as much flack as i may get for this comment... but, this non nested approach is by design in the DOM.

tables have a grid structure and have definite function when it comes to web design. tabular data.

in the classic '<table><tr><td>' its this structure that gives us an easy to understand framework for our data. knowing exactly where in the grid our html will go is a must.

the lack of constraint for css constructed pages is actually an important part of its use. where a large image would strech your site wider if it were in tables, css lets us neatly tuck a couple of spare pixels off the end of an image under the edge of a div.

i have found that there is no shame in defaulting to a table, if the task is too difficult for you in css. some layouts are just bastards to implement.

I mentioned earlier up on this thread, a page with 40 layouts in css. these are alctually all the major ones. what i do, is use the same markup, nested inside itself. for example: a 3 col layout that has a 2 col layout inside its content area. this is a good example of how to do a product page. with the two col layout in the content area being the actual product data.

with the correct markup, its very possible to have your cake and eat it, design and complexity wise.

[jont]

Martin - I have the same nav bar working in CSS ... if you want the layout code PM me as you may be able to integrate into your site.

[leehack]

In pursuit of the holy grail, CSS files are bloated and pages are loaded with Javascript. I think this goes against the whole principle of moving over to CSS and <div>'s. We're bloating code so that we can adhere to what a table should be ideally used for. <div>'s have made a massive difference and CSS is quite stunning at times with the power it provides, however it all seems like tryin to cut a tree down with a butter knife to me.

Some CSS files are plain ridiculous, just to be in vogue, i bet the designer himself or herself cannot even understand it after 6 months of not working on it. Design needs to be at the edge of development for sure and it's important to constantly improve standards and move forward, however it's also as important to keep things simple.

I think it will be 5 years before a true, easy to design, flexible and perfect layout will be achieved using divs and CSS. Until we have a second type of div or a setting to define parent or child status, i don't see any simple way forward. Maybe we need a child div <cdiv> or something alike or some kind of a setting to relate divs to each other.

As it is we are not using divs and css as they should, which is exactly the reason why the industry is trying to move away from tables.

Tables are wrong to use, so we will use divs, css and javascript wrongly to try and counteract it, is all i can see. A truly pointless exercise IMO. CSS was created to make styling easy and this it does fantastic, it is shite at laying out without creating tenfold more work - which is arse upwards to even try.