Free Templates

[george]

And there was me thinking the interweb worked fine as it is...

[gabrielcrowe]

you're right mr hack, but i'm wondering... what sort of scenario would you need a 'cdiv'?

[leehack]

A "cdiv" is just an example. We revert to tables because what happens in one cell can affect another and the whole layout is treated as one, instead of divisional. In simple terms i'd like to float 3 divs next to each other and tell em to talk to each other in a simple, non bloated, non hacked css and non javascript way. Depth of the div being the biggest pain in the ass, they all need to be the same, when told to be.

This is simple in a table as the whole thing is treated as one, with a <division> it obviously breaks this relationship and this is where the problem exists.

Until this is cracked, it will always be a pain in the ass to layout css and code will be far bigger than it should and IMO less efficient than a simple easy to use table layout.

If we had:

<div>
<cdiv id="leftCol"> blah blah... </cdiv>
<cdiv id="centreCol"> blah blah... </cdiv>
<cdiv id="rightCol"> blah blah... </cdiv>
</div>

much like we have:

<tr>
<td id="leftCol"> blah blah... </td>
<td id="centreCol"> blah blah... </td>
<td id="rightCol"> blah blah... </td>
</tr>

Now that would be something special

[gabrielcrowe]

you heard the man. lets start a riot.

and i just tried to create this structure type in some javascript and css.

the resulting js library was actually very large. and therefore pointless to include.

[fleetwood]

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.

The navbar is now laid out within a table, so I don't have the previous problem of the design breaking.

What I was referring to was designing with pure css.
I had the nav working fine with css, with the individual tabs floating left, but when the monitor size was taken down to 800px, there wasn't enough width, and the right hand tabs ended up in a second row underneath the left hand ones, which just dosen't work.
I couldn't find a way of forcing the page to a minimum width.

One 'solution' was to set the width of the div holding the header navbar, and setting the width of the middle section, but the 2 wouldn't react in tandem, as one would hope ie. if the monitor size is too small for the header nav, one would hope that the wider navbar forced the whole page (the outermost container) to the correct width, to accomodate all divs contained therein.

Instead what happened at 800px wide, was the centre section fitted itself to the 800 wide screen, whilst the wider header simply spilled out to the right, all on its own. Despite being in an overall container, it didn't force the width of the container to match of all its inner containers. I think this is one of the fundamental problems with css, that you have already spelled out.

I needed a way to force the page width to a minimum to accomodate the nav bar, and the only way I could find was to use a table, which did the trick.

http://www.comicwarehouse.co.uk/

I'll will get in touch with Jont, as I'm always willing to take another look at the css way, but am rapidly running out of time, as this design needs to be finished, and have stalled too long on just a couple of elements!

[RuralWeb]

for example: www.dabs.com

Interesing you mention dabs as I use it a lot and I saw the complete mess it was when they launched it and for a longtime after they had problems - now consider the resources and money that was thrown at that site to get it working (it still sometimes falls over).

I agree with Lee that css is years away from being worth the effort untill then tables do the job for layout everytime.

[leehack]

What I was referring to was designing with pure css.
I had the nav working fine with css, with the individual tabs floating left, but when the monitor size was taken down to 800px, there wasn't enough width, and the right hand tabs ended up in a second row underneath the left hand ones, which just dosen't work.
I couldn't find a way of forcing the page to a minimum width.

It's always easier to just type what should happen than actually do it, but if you ensured the overall width of the tabs did not exceed 770px, i can't see why it wouldn't naturally centre itself on the page if positioned correctly.

This would apply whether it was styled with either CSS or within a td. If that is the only element on that line and it is either in its own div or its own colspanned td and it is 770px width max along with a clear all above and below, i can't grasp why it would ever fail unless it was viewed on 600x480. There is no need for it to wrap as screens from 800 upwards will always have enough room for it to show.

If it is within a div, then just centre it on page and if within a td, then centre it within the td.

3 col layouts dont work on 800 width anyway, or i should say i am yet to see one. Just as people think they have cracked it, rest assured the shopping cart trashes it.

[fleetwood]

but if you ensured the overall width of the tabs did not exceed 770px, i can't see why it wouldn't naturally centre itself on the page if positioned correctly.

like you said, its easy to write, less easy in practice,

trust me, I tried every which way.

For that particular tabbed nav to work with css, the tabs have to float left, and use the 'sliding doors' method to reposition the background of the selected tab, rather than any scripts or somesuch.

You can't easily centre the floated tabs - there are methods - but all that I tried had a downside.
I did achieve near centering, by defining the width of a container holding the tabs (the ONLY way to cetre is to have a defined width with this sort of float), but that defined width is what caused the problem when the monitor resized.
I wouldn't have minded a scroll bar at 800px wide, but this simply burst out the side of the screen, totally independently to the rest of the layout with one method, or wrapped the tabs using a different method.
I don't think its worth you trying to replicate (although feel free if you have a spare day or two), but just trust me that its harder to achieve in practice (using css without any tables), than one might imagine.

I'm sticking with the table tabs for now, until something better comes up

[jont]

For that particular tabbed nav to work with css, the tabs have to float left, ...... You can't easily centre the floated tabs - there are methods - but all that I tried had a downside.

This is one of the few drawbacks in that method, centering is almost impossible to achieve on an effective basis due to the float:left;

The tabs are also designed to degrade if the browser width is reduced ... forcing the tabs onto a new line ... this is another effect or float:left... if you don't want them to collapse to 2 lines you do indeed need to fix the width OR ensure the tabs occupy less than the width of the minimum screen resolution you need to use ... this is done being either/and editing the tab text or removing the number of tabs.

Looks like for your needs Martin using a <table> is the only real world solution at the moment

[bowraven]

Template

Just wondering whether any body has changed to a new template and found that sales on their site have dramatically improved as a result

[gabrielcrowe]

holy crap man, excellent bumping of an old thread. lol, 2005?

[TraceyHand]

free 'advertising', innit?

[chris ashdown]

Yes mine has

[fergusw]

..... wondering whether any body has .....

I'm sure I saw a body just the other day trying to change to a new template, however without it's head it was just flapping around aimlessly at the keyboard - shame!

On a serious note, we consistently see websites (particularly aged and established sites) gaining a real boost, both in ranking and sales, when changing from heavy table-based HTML to CSS based code.