How do you get this sort of style website?
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?
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,
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,
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
- DaveTheAve
- Forum Contributor
- Posts: 385
- Joined: Tue Oct 03, 2006 2:25 pm
- Location: 127.0.0.1
- Contact:
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
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.matthijs wrote:Tables = hard
Tables = for tabular data
CSS = not for making you look professional
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.
Code: Select all
label {display:block;float:left;width:40%;} // replace with px or ems if you wish- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
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.
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.
- DaveTheAve
- Forum Contributor
- Posts: 385
- Joined: Tue Oct 03, 2006 2:25 pm
- Location: 127.0.0.1
- Contact:
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.matthijs wrote:Indeed, that's quite difficult and will take up a lot of time ...Code: Select all
label {display:block;float:left;width:40%;} // replace with px or ems if you wish
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.
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
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
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.
- DaveTheAve
- Forum Contributor
- Posts: 385
- Joined: Tue Oct 03, 2006 2:25 pm
- Location: 127.0.0.1
- Contact:
- DaveTheAve
- Forum Contributor
- Posts: 385
- Joined: Tue Oct 03, 2006 2:25 pm
- Location: 127.0.0.1
- Contact:
- Maugrim_The_Reaper
- DevNet Master
- Posts: 2704
- Joined: Tue Nov 02, 2004 5:43 am
- Location: Ireland