PDA

View Full Version : css tableless design


pinbrook
07-Jul-2006, 12:07 AM
is the theme called "clean CSS layout" the only theme which uses css only with no tables?

cdicken
07-Jul-2006, 09:46 AM
I think the Contemporary theme (which you may recognise) also ditches tables - in the overall page layout anyway.

You can then change the 'Product List Layout' to 'Bare Product List' to remove any tables from the product list.

There are still tables in the checkout, but all the other unnecessary ones are now gone.

pinbrook
07-Jul-2006, 10:44 AM
crash course in tableless design - here I come

That will keep me out of beta for a few days

jont
08-Jul-2006, 04:22 PM
I am seeing tables in the TopLevelSectionLink and also the Home_Image_Navigation_Button as well as around the products!

How do I change say the TopLevelSectionLink to use css layout and not tabled?

pinbrook
08-Jul-2006, 06:17 PM
Can't quite get my head around 3 CSS definitions

one called actinic.css
one called theme.css

and also there is inline css

whilst I can understand the contents of theme.css is the extra css required for each theme, and it is probably easier for actinc to keep this out of actinic.css.

I cant quite grasp why there is also inline css, and if I generate my own theme what are the implications of merging all 3?

RuralWeb
09-Jul-2006, 10:26 AM
one called actinic.css
one called theme.css

and also there is inline css

I spotted these on day one when I converted and uploaded my site live just to see what happened. I played with them but could not understand why there was so many css files which looked like they did the same thing. They ignored my own external css and as a result I could not resize the text on my site anymore.

I have also been playing with the clean theme and looking at the css, you should be able to resize the text with ie but it does not seem to work.

Also when you apply a style to text using the Actinic html editor it applies it as an inline style rather than adding it to actinic.css so that may be what the inline.css is doing??

pinbrook
09-Jul-2006, 11:32 AM
hopefully if actinic are listening they will be able to offer a cleaner solution.

Initially I started working on my own theme, where I had everything in actinic.css, I was having problems working stuff out so I thought I'd work on changing an exsisting theme, contemporary is supposed to be tableless hence I chose it, to learn from it.

It is still confusing, I can't see if theme.css is actually used, so I may merge all css and see the result - as long as I can get to grip with what needs to be editted where. I hate it when there's stuff sitting there and you don't know if its important or not. I'm still working with outer layouts, I feel you are right about font changes etc being applied inline - I think Jont has already asked about that in another thread.

Separate button folder is neat, although using it has crashed the software a few times. {EDIT} I tell a lie, somehow i managed to get it so everytime I try to change the colours actinic crashes. I created my own set of buttons and they were sitting in a folder in the buttons folder, I changed button sets, a few times before I got it to take properly. The end result was a change of colour scheme also (not requested) and subsequent attempt to return to my chosen colour scheme or any other colour scheme crashes {/EDIT}

I may now revert to my own theme and see where that goes!

Sunday lunch and Wimbeldon first though

pinbrook
09-Jul-2006, 11:40 AM
How do I change say the TopLevelSectionLink to use css layout and not tabled?

I think ChrisD has said the themes won't be entirely tableless so I guess theres the answer - i'm not saying you have to live with tables but more as an explanation as to why tables are still there. Although I may look at normans menus as an alternative

my next task is to get a horizontal nav bar which pulls in all the buttons and doesn't change from page to page

RuralWeb
09-Jul-2006, 02:02 PM
everytime I try to change the colours actinic crashes Same for me.

I have also been trying to edit the css using the web outer layout tab but with little success. It may be ok if you are an html wizard but not if you are used to DW css formatting.

Also trying to change the width of main area in site options seems to have no effect.

RuralWeb
09-Jul-2006, 04:24 PM
jo, have you seen the site options | properties | stylesheetlayout which give the option of using an external style sheet. I dont see how it works though!

RuralWeb
09-Jul-2006, 04:28 PM
ooops - tried playing with it and it crashed

Blue screen of death:eek:

Microsoft error messages on opening again

RIP V8

pinbrook
09-Jul-2006, 05:30 PM
I've noticed on reinstalling, if you uninstall from Add/Remove Programs, then reinstall, unless you go to the v8 folder directly after uninstalling you have to close the install routine to go back and delete the site1 folder. It would be nice if this was built in

pinbrook
09-Jul-2006, 05:33 PM
jo, have you seen the site options | properties | stylesheetlayout which give the option of using an external style sheet. I dont see how it works though!

so far I've taken actinic.css and added my own bits and bobs to it.

I'm assuming that by keeping actinic.css then formatting the inner layout will remain as is.

How else am I going to be able to apply css to inner layout if we can't get to "templates"

RuralWeb
09-Jul-2006, 05:52 PM
so far I've taken actinic.css and added my own bits and bobs to it.

I'm assuming that by keeping actinic.css then formatting the inner layout will remain as is.

I tried that as well but when I published the site the Actinic css took over and ignored my css.

I have also just found that if you try and change the css within Actinic you can only use absolute sizing ie px not small, smaller etc.

eg the variable smallfontsize uses 11px when it need to be small. The dropdown only gives px options

This is why I was getting confused as Actinic describe them as relative in the css file but apply absolute sizes. A complete mess - I cannot see a way of changing it.

This is important to me as many clients require thier sites to use text that can be resized.

pinbrook
09-Jul-2006, 06:02 PM
I've just realised that I am talking twaddle.

I've reinstalled the software, created a site in DW (site1) copied my previous design (overall.html, images and css) into site1 and then registered the design.

I then realised that my overall html was calling css called mystyle.css and not actinc.css - Doh! in fact there is no actinic.css in the site1 folder....

I'll report back .....

Yes it is important to have resizable font, I prefer % for font size

RuralWeb
09-Jul-2006, 06:07 PM
What theme are you using to register the design with?

pinbrook
09-Jul-2006, 06:21 PM
I'm not using an exsisting theme

you can see the mess I've created at test dot pinbrook dot net

RuralWeb
09-Jul-2006, 06:26 PM
I'm not using an exsisting theme I thought that every site starts with a theme eg the default is Exec which I am changing to clean 2.

Nice mess - similar to mine!

pinbrook
09-Jul-2006, 06:48 PM
its probably exec then which I have changed to my own.

jont
09-Jul-2006, 08:00 PM
Until Actinic release (hopefully) the actinic.css into the site1 folder may be an option to copy the contents of actinic.css into mystyles.css and attach to the "Act_Primary" or @import the file over - this can then be saved in the site1 folder for editing in DW.

Best to not edit the appearance of any of the variables inside Actinic as hese create inline fomatting styles - instead <span> or <div> tag them for external control on a global level via mystyles.css

jont
09-Jul-2006, 08:03 PM
see the mess I've created at test dot pinbrook dot net

That takes talent ... or v8 :eek:

RuralWeb
09-Jul-2006, 08:09 PM
Have we gone backward with V8 or is it me just being thick:confused:

RuralWeb
09-Jul-2006, 08:10 PM
Best to not edit the appearance of any of the variables inside Actinic as hese create inline fomatting styles Dont they ever:eek:

jont
09-Jul-2006, 08:16 PM
Have we gone backward with V8 or is it me just being thick:confused:

Side-stepped years of knowledge, understanding and a format that may not have been easy to grasp but was at least "available" in the site1 folder

jont
09-Jul-2006, 08:17 PM
Dont they ever:eek:

Try changing a variable colour back to the default - it still keeps the inline formatting for the RGB set to the standard colour rather than deleting it out.

RuralWeb
09-Jul-2006, 08:21 PM
Side-stepped years of knowledge, understanding and a format that may not have been easy to grasp but was at least "available" in the site1 folder

Glad to hear it - I can sleep sound tonight, I thought I was going mad.

I have a rule with software - if I cannot gain a working knowledge of it within a few hours then its either too complex or not for me.

RuralWeb
09-Jul-2006, 08:24 PM
Try changing a variable colour back to the default - it still keeps the inline formatting for the RGB set to the standard colour rather than deleting it out. I have tried several variables and have a mass of scrap code. Can you imagine what a site will look like after 6 months of development and what will the SEs make of it all - that is if they can find the interesting bits.

At least V7 kept it pretty clean.

jont
09-Jul-2006, 08:26 PM
I have a rule with software - if I cannot gain a working knowledge of it within a few hours then its either too complex or not for me.

Considering the posters to this v8 forum have all been using Actinic for several years (and more) it does raise certain concerns....

RuralWeb
09-Jul-2006, 08:30 PM
it does raise certain concerns.... I dont consider myself an expert with Actinic but it does bother me that the Grand Masters are having problems.

pinbrook
09-Jul-2006, 08:50 PM
thankfully we have the design day to look forward too.

I was hoping to get something under my belt first though

jont
09-Jul-2006, 08:54 PM
I was hoping to get something under my belt first though

me also ... best prepared and all that .....

pinbrook
09-Jul-2006, 08:56 PM
alot can happen in 2 weeks.... like crashing my pc ten milion times and losing all my hair

RuralWeb
09-Jul-2006, 09:04 PM
thankfully we have the design day to look forward too. I will have my laptop hooked up and waiting for the posts:)

dscontroller
09-Jul-2006, 09:08 PM
Sounds like fun all this. I've just downloaded the programme so look forward to the fun, or otherwise!!

Thought I would read up on what everyone else is doing, pick out the positive bits and go!

There are sure some interesting posts for v8, but haven't found the GO bit yet!

You've got to admit that the boys at Actinic have made it pretty interesting.

David

cdicken
10-Jul-2006, 10:51 AM
How do I change say the TopLevelSectionLink to use css layout and not tabled?Which theme are you working on? Basically you can go to 'Settings | Site Options | General' and set the 'Top Level Section List Layout' to anything other than 'Standard Top Level Section List'.

Alternatively, use 'Standard Top Level Section List' then go to the 'Design' tab.

Click on one of the links in the list then click the 'Navigate to Parent Layout' button on the toolbar below the layout code (yellow spiral with up arrow).

You should then be in the layout called 'Standard Top Level Section List' (if not, click the navigate to parent button again).

Click the 'Edit List Layout' button.

Remove the table code from the 'Start of List' and 'End of List' fields in the 'Overall Design' tab, and then remove the <tr> and <td> code from the 'Edit Rows and Columns' tab. You might want to put <br />s (or similar) in the 'After' fields.

cdicken
10-Jul-2006, 10:55 AM
Johopefully if actinic are listening they will be able to offer a cleaner solution.As I mention in my other post, I think it is probably possible to improve this, and I am looking at this today.

As a rule of thumb, just edit the 'Actinic Stylesheet' layout as this will change the 'actinic.css' file.

Basically, the thinking behind the two files is
'Actinic Stylesheet' is styles for general design items that can be used in any theme
'theme.css' contains style information to help the design work with teh images that cone with a particular theme
Any inline styles are for making sure a specific overall page layout works correctly.

cdicken
10-Jul-2006, 11:13 AM
Separate button folder is neat, although using it has crashed the software a few times. {EDIT} I tell a lie, somehow i managed to get it so everytime I try to change the colours actinic crashes. I created my own set of buttons and they were sitting in a folder in the buttons folder, I changed button sets, a few times before I got it to take properly. The end result was a change of colour scheme also (not requested) and subsequent attempt to return to my chosen colour scheme or any other colour scheme crashes {/EDIT}The issues with changing colours is a known problem that has been fixed. Please though make sure you report ANY problems to v8beta@actinic.co.uk otherwise we are not going to know about them and not going to be able to improve the software in time for release.

cdicken
10-Jul-2006, 11:16 AM
I have also just found that if you try and change the css within Actinic you can only use absolute sizing ie px not small, smaller etc.

eg the variable smallfontsize uses 11px when it need to be small. The dropdown only gives px optionsMalcolm - you can change these in 'Site Options | General | Appearance'.

cdicken
10-Jul-2006, 11:24 AM
Side-stepped years of knowledge,

I have a rule with software - if I cannot gain a working knowledge of it within a few hours then its either too complex or not for me.

v8 is different from v7.

There are new concepts to learn, granted, but there is a guide available which will step through all the new concepts, with exercises, and help you to understand how v8 has changed. Then you should find it much easier to try upgrading/editing your own designs with v8.

So there's a learning curve, but it's a much smaller one that with v7. Remember how long it took to get your head around templates and NETQUOTEVARs? It will not take anywhere near that to understand layouts and variables.

On a sidenote, I agree about the point about having a css file in the 'Site1' folder, and we are looking at that at the moment, but for now there is a workaround to help with that.

RuralWeb
10-Jul-2006, 02:47 PM
Malcolm - you can change these in 'Site Options | General | Appearance'. Found that but it will only allow you to use absolute sizes ie px, what is needed is the option to use relative ie small, smaller, large etc

pinbrook
10-Jul-2006, 02:51 PM
or percentage sizes and other relative sizing options

don't forget there in a difference in the way some browsers render small, smaller etc

cdicken
10-Jul-2006, 05:18 PM
don't forget there in a difference in the way some browsers render small, smaller etcThis is why I went for pixel values - I hate the fact v7 Actinic stores look different on IE than they do on Mozilla.

You can add % and em values into the fields in 'Site Options | General'. It is just the drop down list of sizes in the preview window toolbar which are fixed point sizes.

As a side note (and a discussion point) do you not think that any internet users who require larger text sizes would use a browser that implements it properly (i.e. anything but IE). I'd be interested to know your thoughts.

pinbrook
10-Jul-2006, 05:30 PM
As a side note (and a discussion point) do you not think that any internet users who require larger text sizes would use a browser that implements it properly (i.e. anything but IE). I'd be interested to know your thoughts.

I have a close friend who although he is registered blind he can make out shapes. He uses software called Supernova to magnify the screen, and can get to supernova to talk to him too. So the broser itself is largely irrevelant.

This is why tableless design is important as supernova looses its way through table cells.

Additionally I think there are too many users out there who are self taught and prefer to stick with what they know even though it is sub standard. When they call in help it isn't always the best help.

RuralWeb
10-Jul-2006, 06:01 PM
use a browser that implements it properly (i.e. anything but IE As jo says those in the know use screen readers but the vast majority use ie so you need to go with that. I agree that sites will look different in different browsers but many click away when they see small text.

With the population aging this is going to be a big issue I think.

cdicken
11-Jul-2006, 08:43 AM
With the population aging this is going to be a big issue I think.I've done some research and it looks like IE7 has a page zoom feature, which will resize all text, so it soon won't really matter whether your text is in pixels or relative. Hurrah!

Also, interestingly, the page zoom seems to not work that brilliantly with images in tables, so it's another reason to lose tables for layout.

RuralWeb
11-Jul-2006, 08:47 AM
Ive not played with ie7 yet - I will check it out, thanks Chris.

cdicken
11-Jul-2006, 08:52 AM
Please note that IE7 sometimes seems to have a negative effect on the preview in v7 - this is because we use an IE plug-in to do the in-built preview and IE7 loads a DLL into your PC that Actinic has trouble working with. We are investigating this now to get to the bottom of it.

RuralWeb
11-Jul-2006, 09:28 AM
I've done some research and it looks like IE7 has a page zoom feature, which will resize all text, so it soon won't really matter whether your text is in pixels or relative. Hurrah If you look below the zoom option you will see that the text size option from ie6 is still there, the ie7 help file says:

"You can make webpages easier to read by changing the text size. If you change the text size, graphics and controls will remain in their original size but the text size will change."

As you say zoom will increase the size of everything but changing the text size only is the way I expect most people in improve thier ability to read the text. Also high res monitors are becoming the norm and a fixed width page designed for 800x600 with 9px text looks very odd as well. people are buying bigger screens to get a better view of websites but on an absolute sized website they may have well have stuck with thier old CRT 12".

I like to build sites for the user ie they can change things like the text and that are fluid so they fill whatever resolution screen is being used.

So back to the original question and is it possible to have relative sized text with v8 on the dropdowns.

I see that the forum uses relative text as does the microsoft website - if its good enought for MS then its good enough for me!!

RuralWeb
11-Jul-2006, 09:41 AM
W3C says that webpages that use css should "degrade gracefully" if the css is disabled or not used. ie7 now makes the option of turning off css easy, I have just checked the Exec theme with css disabled and it is a mess!

Designing sites with css is going to be the way ahead but I dont think we are there yet - I have seen some very strange sites (big boy sites) with layers all over the place. I think I will stick to tables for a while yet:D

RuralWeb
11-Jul-2006, 09:39 PM
is it possible to have relative sized text with v8 on the dropdowns. Well I may be making progress:) The variables are editable so you can enter relative sized font but it would be nice to have it on the dropdowns in addition to px font sizes.

Also nice to see that the text wraps round the product image as it resizes

pinbrook
13-Jul-2006, 10:22 AM
Basically, the thinking behind the two files is
'Actinic Stylesheet' is styles for general design items that can be used in any theme
'theme.css' contains style information to help the design work with teh images that cone with a particular theme
Any inline styles are for making sure a specific overall page layout works correctly.

Any chance or combining themes.css and inline css this will give us cleaner code.

I don't think any designer is going to be happy with inline css, shopinaboxer will make messy code as they don't know its there

having to look for styles in 3 places is not cool

jont
13-Jul-2006, 10:44 AM
having to look for styles in 3 places is not cool

Especially when the inline code is found in the "edit appearance" box and not shown as traditional HTML / XHTML

jont
13-Jul-2006, 10:48 AM
I have just checked the Exec theme with css disabled and it is a mess!

The only real solution is to design the outer layer from the ground up with this in mind - disabling CSS on a CSS layout will always cause issues but if done correctly should still be accessible and be navigatable (is that a word?) ... header tags should nest properly, links should be readable etc.

With the use of floated divs and absolute / relative positioning it is possible to create a site that will degrade without CSS (or of the user has an old Netscape browser) but this is a real investment of time ... and skill

cdicken
13-Jul-2006, 03:22 PM
Jo - I've removed all but the essential CSS classes from the <head> section and put them in the main 'Actinic Stylesheet' layout.

The essential classes are generally just to do with line spacing and body heights etc.

pinbrook
13-Jul-2006, 05:37 PM
Thanks Chris, I'm waiting for the next beta release before I hit the design side of beta again.

jont
13-Jul-2006, 05:38 PM
Do we know when the next Beta is anticipated for release?

cdicken
14-Jul-2006, 09:50 AM
Do we know when the next Beta is anticipated for release?Soon :)

You should be hearing from us next week.