How do you get this sort of style website?

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

impulse()
Forum Regular
Posts: 748
Joined: Wed Aug 09, 2006 8:36 am
Location: Staffordshire, UK
Contact:

How do you get this sort of style website?

Post 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,
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

You could do that using pure CSS but that website uses tables for the layout.
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Post by DaveTheAve »

Tables = Easy

CSS = Bandwidth Friendly (and makes you more professional)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 ... :wink:
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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.
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Post 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 ... :wink:
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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Post 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.
Grim...
DevNet Resident
Posts: 1445
Joined: Tue May 18, 2004 5:32 am
Location: London, UK

Post 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.
User avatar
DaveTheAve
Forum Contributor
Posts: 385
Joined: Tue Oct 03, 2006 2:25 pm
Location: 127.0.0.1
Contact:

Post 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.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Isn't IE7 being released through Windows Update anyways???
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply