Forum Moderators: not2easy
i have to build a quite complex site - you can see my mock-up <snip>.
I would normally create this using tables and a templates system using dreamweaver, i have a lot of experience with this and would not be too much of a challenge.
However, i have recently been hearing a lot about css positioning - i already use css for all text-styles etc, but i know it can be used for easily creating seperate designs for accesible and "print only" versions
The majority of the sites i have seen that use css seem to be quite basic - and more importantly, give the impression that they have been designed on-the-fly, rather than the technique i use - design it in photoshop first, then cut it up into the relevant bits and stick it together again.
As you can probably tell, i have not done any css positioning (don't even know if i am using the correct terms..) to create sites - Am i going to be able to make this site with css?
Is it possible to mix-and-match tables with css? so that i could have the ease-of-design (at least for me..) of tables, with the flexibility of css to create different looks depending on what the user wants (accessible, print, etc)
thanks,
jeff
[edited by: Woz at 2:41 am (utc) on Mar. 29, 2004]
[edit reason] no URLs please. [/edit]
You really shouldn't post links, but from what I saw, it easily done it css.
You can mix tables and CSS too. CSS just tells the browser how an element of the page should look. It adds a style. You can add the style to any element of the page, including tables.
You should check out sites like "a list apart" and "simple bits" for more CSS explanations and functionality.
what is wrong with posting links? sorry if i made a mistake.
thanks for the sites - i will check them out.
Would it be possible to create "module" sections - say one for the top nav, one for the side, and one for the bottom "footer" with tables, then use css to remove them for a print-ready page?, or shift them around/replace them etc?
anyway, i will have a look at some more css sites - if you think it is perfectly possible i won't be wasting my time.
thanks again,
jeff
i have been looking into using css with tables today - using the projectseven tutorials - i can see how it would be easily possible to achieve what i want without too much learning:
i can hide navigation and logos for print-version pages, i can change the look entirely for accessible version, but all of the "layout" is done using tables - is there a reason why i should abandon them?
The site i am working on is not even going to be live for 3 years - who knows what will have changed by then - am i digging a hole for myself by continuing to use tables?
i feel like i am grasping at something i can't quite make out..
The majority of the sites i have seen that use css seem to be quite basic - and more importantly, give the impression that they have been designed on-the-fly, rather than the technique i use - design it in photoshop first, then cut it up into the relevant bits and stick it together again.
I'm not sure you can describe CSS Zen Garden [csszengarden.com] as "quite basic" :-)
But a warning. If you try and re-design a page already laid out using HTML with CSS you're likely to run into trouble. I tried to do this and had considerable difficulties, until I designed a couple of sites from scratch.
The problem is that the thinking behaind the two approaches is different. CSS is much more flexible than a two-dimesional table and lends itself to fluid design, where the look of the page changes according to resolution, window size and browser type. You need to think about this before you start.
But, of course, once you get your head around the possibilities...
I've just recently made the conversion over to using "table-less" css designs and I heartily recommend it. Once you get the hang of it, you will find that it makes your web sites much easier to build and maintain.
Before you start, however, I really recommend reading the following books before trying to do a pure css or hybrid css-tables layout:
- Eric Meyer on CSS (by Eric Meyer) - Has 13 great tutorials on applying CSS to your pages
- Designing with Web Standards (by Jeffery Zeldman) - Teaches you more about how to implement css and standards for clean, easy to update pages
-CSS: The Definitive Guide (by Eric Meyer) - A great reference book.
Good luck! Hope it all goes well...
-Damon
The page i am making has not been made with tables yet - i am starting from scratch, although i do have a mockup made in photoshop which i will slice up for the images, so it does kind of have to fit an existing design exactly.. that is really the question i have - will it work? one way to find out..
dtribble - thanks for those - i will look into them - is there one book you would recommend over the others?
I would pretty much recommend them in the order I listed them above. Although I think they really should be read/used together as they build upon each other.
Good luck!
-Damon
The page i am making has not been made with tables yet - i am starting from scratch, although i do have a mockup made in photoshop which i will slice up for the images, so it does kind of have to fit an existing design exactly.. that is really the question i have - will it work? one way to find out..
If you haven't used CSS to create webpages before, be aware that many of the techniques you will find are not stable cross browser, and many will not work well on slower older PC's. Some will not work on IE 5 Mac. If you make your CSS layout, and then start finding bugs that you can't fix, I'd recommend going back to a table, unless you are willing to put a lot of time into your project. Make sure you do extensive testing on a wide range of platforms as you learn, CSS construction techniques are not nearly as stable cross browser as table construction techniques. I can usually create a table based layout in about 5 minutes for a site, for example, while a positioned div layout usually takes days to get even reasonably stable. This is why a lot of the CSS sites you are looking at look pretty plain. They don't have to, but it's the tendency, since the more slick techniques you use, the higher the odds of failure on browser or PC x or y.
The advice on of the posters gave, which is to design for CSS, is very good. If you make a sliced photoshop type site, which is generally a grid based table under the covers, and try to recreate it using CSS, you will find things are not as easy as if you had designed the site to be full CSS from the beginning, but in most cases be prepared to do a lot of debugging to get a reasonably stable layout, and don't be suprised to get emails from someone when it fails on some Mac browser.
The less stable CSS techniques are float:right and right: x and bottom: y, overflow: anything, position:fixed;
if you avoid these your page will be much easier to get stable cross browser.
I still do use tables created in Fireworks for things like my navigation side bar with graphical buttons. Whilst you can do graphical buttons with rollovers using only CSS, it is quite complex. But I put my navigation table in a DIV wrapper which means I can hide it for print layout and control its position on the page relative to the main content and the header and footer with CSS. But I no longer put the separate elements on the page in tables or use tables to create column layouts.
I am still using Dreamweaver MX and I understand that the latest version (MX 2004) is much better at CSS than previous versions. At the moment the only thing putting me off upgrading is the price which seems extortionate for the lack of additional features other than better CSS handling.
