close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Replacing tables with CSS

Thread began 12/09/2009 6:12 pm by Art | Last modified 12/11/2009 8:19 pm by Jimmy Wu | 1590 views | 7 replies |

Art

Replacing tables with CSS

I'm pretty comfortable using CSS. I learned to use CSS before purchasing CSS Sculpture.

That said, I have not used Sculptor that much.

The one general area I have problems with, when using CSS, is when I need a box to hold graphics.

I'm finding that it just takes too long to design a set of boxes in CSS that perfectly match the parameters that I need to hold the graphics. With tables, doing something like this took seconds; with CSS, although I understand the value of not using tables, they do allow for quick formatting.

I'm wondering if there's a way to use Sculptor to build boxes inside the site containers? Are there other strategies that people are using here?

On a side note, I've been playing with Adobe Fireworks CS4. It builds "boxes" and allows you to export that to css and html. I will need to get back to you on whether or not it works very well for this purpose.

Sign in to reply to this post

Jimmy Wu

I'm not sure exactly what you're asking about. Using Sculptor you can create a layout that has these boxes and save it as a preset so that you don't have to create the boxes again. Could you please clarify a little more on what you're asking?

Sign in to reply to this post

Art

I'm not talking about containers that hold all the content of the site.

For example, a site normally has a header, footer, and body.

What I'm talking about are smaller containers for additional boxes that fall inside the body or even, sometimes inside a smaller area inside the body.

For example, I just got done doing a sale for some National Geographic maps sets. Each had to have a box (one on the left and one on right). Within each of those boxes, I need more areas to hold copy below the pictures. I then also need more smaller areas that would hold a price and other small descriptive copy.

So really, this isn't something that I could plan for when creating the original template.

Be advised, I've only had CSS sculptor for about two weeks and I haven't spent enough time to know if it does, in fact, create these sort of boxes

Sign in to reply to this post

neilo

Hi Art,

I find that trying to use tables when you need to fine-tweak a design is a whole lot more work - and with less reliable results -than using just CSS.

There are a few tips and tricks you need to know, but it really is well worth it. Practically anything you want to do with design, you can do with CSS.

There are times when tables are justified, however - i.e. presenting tabular data (which is what they were designed to do) such as repeating data returned from a database, etc, but not for design purposes.

You can have boxes within boxes, make some boxes have common css styles (change one, you change them all) or individual styles. Absolute control, site-wide.

A crude example here: Boxes inside Boxes

Sign in to reply to this post

Art

Neilo, thanks. I appreciate your response.

But to do something like the example you had is possibly 15 min. or probably more worth of work. And then, if experience is any lesson, it won't look right because IE ver 7 isn't happy with one thing or the other. Or, someone will want it changed and unless you have a box full of boxes to use, you need to start over. I understand that tables were not meant to be used for design. There are a lot of things that are being used for something they shouldn't be. Take, for example the use of Unordered Lists. Now they're being used for everything. They sure are handy but eventually someone will come along and tell us how they weren't, originally, meant to be used this way. I don't know, PERHAPS THE CONSORTIUM SHOULD CONSIDER DESIGNERS for once. And since I'm on a rant, do you think they should have figured out a standard for making column heights the same by now? Instead, we have to do "Faux" backgrounds to make it "look" like a div is the same height as the other. They keep making things fancier without solving basic design issues. Anyways, sorry about the rant.

CSS is great; I totally understand it's value. That said, this sort of CSS design work just takes way too long to get to the design. It really should be as easy as drawing a few boxes where you need them, dropping the text and pictures in and that's it. It literally takes 5 seconds to do the same thing using tables and since I know how to do it, it's easy.

I'm looking for a better way without tables. I want to use CSS but CSS just takes way too long to do it. I'm just trying to get some strategies together and I was hoping CSS Sculptor would make this task easier; perhaps it does and I just need to spend some more time with it. Most likely, it doesn't quite do it. Perhaps that will come in some future update.

Have you tried using Adobe Fireworks to create boxes? It slices the boxes up nicely and then exports images and all of its css. I've played with it enough to know that it's more to my style of design but I've not put it into production yet so I don't know how well it stands up to all the different browsers.

Sign in to reply to this post

Jimmy Wu

Sculptor allows you to add divs to content areas and divs to those divs, which is what it seems like you're looking to do. You can set a lot of the styles using the wizard to get the div to behave the way you want it to. You should try the Customize CSS interface within sculptor to see if that works for you. We are always open to new suggestions, so if you have any input we would be happy to listen to it.

Sign in to reply to this post

Art

Thanks Jimmy Wo

This post has been deleted.

Art

Thanks Jimmy Wu

Thanks,

Perhaps this is a solution. However, since posting here, I've been looking deeper at Adobe Fireworks and it's ability to mock-up a site, drop graphics in and export to standards CSS and I'm pretty impressed. If you haven't looked at it, try going to tv.adobe.com and click on the "Program/Fireworks" and check out the videos there.

Fireworks is doing some really nice things these days. I actually thought they were going to remove it but there seems to be more life in it.

I worked in Fireworks some more since I posted here and it looks like it will do what I want it to do. I think it fits more with the tactile design style I want to use. It's quick and once I have the exported graphics, css and html files, I can move them around fairly quickly and get what I want done in the time-frame I was looking for.

I'll probably play around with Sculptor some more so as to make sure I'm not losing out on something I should know.

Thanks

Sign in to reply to this post

Jimmy Wu

I'm glad that you are able to find a tool that will work for the way you design. If you have any other questions on any of our products feel free to open a new thread.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...