Page 1 of 2
How do you get this sort of style website?
Posted: Wed Oct 04, 2006 3:51 pm
by impulse()
The website in question is
http://www.firebox.com
Most websites have this sort of layout these days with gaps each side with a pretty looking header where the navigation lies. My questions is how is this done? Is it all CSS? Is the orange arch a background image with everything cleverly writen to always stay on top?
Hope somebody can point me in the right direction for guides on creating this sort of site.
Stephen,
Posted: Wed Oct 04, 2006 3:55 pm
by daedalus__
You could do that using pure CSS but that website uses tables for the layout.
Posted: Wed Oct 04, 2006 9:02 pm
by DaveTheAve
Tables = Easy
CSS = Bandwidth Friendly (and makes you more professional)
Posted: Thu Oct 05, 2006 1:42 am
by matthijs
Tables = hard
Tables = for tabular data
CSS = not for making you look professional
CSS is better for many many reasons. Seperation of markup and style. Smaller and faster pages. Better accessibility (both human and machines). Easier maintainance. Easier to code.
Posted: Thu Oct 05, 2006 3:04 am
by CoderGoblin
matthijs wrote:Tables = hard
Tables = for tabular data
CSS = not for making you look professional
In an ideal world where all browsers followed the CSS rules the same, this is true, tables should only be for tabular data. Unfortunately we are not in an ideal world. Often project have timescale constraints and getting the CSS 100% can soon eat up the time. Forms are an example where 2 column "<label><input>" is often easier to do via tables rather than CSS. Yes you can do it in CSS but you tend to need to set the widths explicitly which if you are dealing with translated information is not always possible.
This whole issue is one where you have people taking sides. I would say use CSS wherever you can for the reasons already stated but don't be afraid to use tables if it gets the job done.
Posted: Thu Oct 05, 2006 5:12 am
by matthijs
Code: Select all
label {display:block;float:left;width:40%;} // replace with px or ems if you wish
Indeed, that's quite difficult and will take up a lot of time ...

Posted: Thu Oct 05, 2006 6:23 am
by CoderGoblin
Not if you have complex forms... Some 2 column, others 4 columns or more of potentially varying widths. Then add multiple checkboxes on the same line/separate lines... Also have labels with different translations with the requirement not to wrap.. If you have complex site with many different forms/form layouts the styling starts getting out of control. The possible form layout variations are large, even when trying to maintain a consistent look and feel, and the CSS would potentially need to be coded on a per form basis. Your example only works for the simplest case. Try to create a "catch all form layouts" in CSS and I doubt if you can...
As previously stated "... this whole issue is one where you have people taking sides ..." Whilst I prefer to use CSS, even for forms where practical I am not adverse to using tables to get a job done on time and sometimes use some form php code to assist in the creation of the forms based on tables. Some people are of the opinion "you should never use tables except for tabular data" which, in an ideal world would be correct but this world isn't.
Posted: Thu Oct 05, 2006 8:43 am
by DaveTheAve
matthijs wrote:Code: Select all
label {display:block;float:left;width:40%;} // replace with px or ems if you wish
Indeed, that's quite difficult and will take up a lot of time ...

Yeah I agree, I love CSS. Problem is and will continue to be for some time is the way browsers handle the CSS. Firefox handles it diffrently then IE6, IE7, Opera, etc... Everyone handles them diffrently.
My fix? I don't know how to fix the CSS for EVERY browser so I use a hybrid approch. I use both tables (for layout) and CSS untill i can figure it out.
Posted: Thu Oct 05, 2006 8:45 am
by matthijs
Of course people take sides.. that's the point of a discussion forum isn't it? Hopefully in the end we all learn something from it
I'll respond to your points and make some general remarks:
- I doubt there's any form so complex it can't be made using css. Will it be easy? No. But my principle is always that how easy or hard something is for the developer should not be an argument for one method or another. If something is difficult I'll just have to learn more.
- With complex forms accessibility is even more important. So if one really has no other choice then to use a table, make sure you use labels and use correct markup. If you have ever heard a screenreader read out nested table markup used for layout purposes you know what I mean.
- More in general: often one has to accept that the web is not the same as print design. With so many browsers, operating systems, etc etc it's impossible to control everything pixel-perfect. As soon as you accept that, and I think you should, you'll make your life as a developer a lot easier. Content on the web is flexible and fluid. Let it flow a bit, give it some breathing room. If the graphic designer of the team does design everything in a way that forces you (as the html/css developer) to do the impossible, he or she should take a lesson in webdesign.
So I do understand your point. And of course in some cases one has to take a shortcut. I won't say I never do. But before that one has to really make the effort to do the right thing. And that should also be advocated here on this forum

Posted: Thu Oct 05, 2006 10:23 am
by Luke
In my opinion, forms are basically tabular data. They are my only exception to the rule... but CSS is really quite easy once you get used to it. If you build your website to standards, and make sure it looks OK in Firefox/other standards-complient browser... then use hacks to fix it for IE... cuz 99% of the time it's only IE that has any issues.
Posted: Thu Oct 05, 2006 10:28 am
by DaveTheAve
I'm sorry if i'm getting off topic, but sence they (M$) realizes that IE6 can't handle CSS right and are implamenting it "better" in IE7, shouldn't they release a MUST-UPDATE package for all IE6 users so they can view CSS currectly?
Oh wait, i forgot, it's M$. Why should THEY make OUR life easier.
Posted: Thu Oct 05, 2006 10:38 am
by Grim...
Especially when you insist on calling them by such a stupid name.
You got to remember that if they update IE6 to work properly, millions of websites will suddenly break.
Posted: Thu Oct 05, 2006 11:17 am
by DaveTheAve
Well, they COULD make it like a 6.5 or something that way sites coded for IE6 won't pick it up as such unless they are specificly programed for said version of 6.5.
Posted: Thu Oct 05, 2006 11:21 am
by Maugrim_The_Reaper
Isn't IE7 being released through Windows Update anyways???
Posted: Thu Oct 05, 2006 12:03 pm
by matthijs
Yes it is. Too bad IE7 introduces new bugs, so it will only get harder, not easier. As it is now, most of the times I only have to deal with one buggy browser. if IE7 has new bugs, that's a doubling of my debugging time.