33 replies [Last post]
Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Hi,

I am pretty new at making my own CSS layout but I can

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Your doctype declaration is

Your doctype declaration is ill formed (xhtmlll?) and leaves IE6 in "Quirks" mode where it renders block sizes wrongly.

Also you have invalid xhtml - CSS does not work properly without valid html or xhtml.

Your use of absolute postioning for layout is also very brittle cross-browser. For a two column layout all you need to do is float one element. Please take a look in the "How to" forum for instructions in this.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Thank you very much for

Thank you very much for having a look.

As you understand I am an complete newbie at CSS and xhtml although I have been doing php for years.

I have changed the doctype to valid HTML for the time being. I

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

[email protected] wrote:TI

[email protected] wrote:
TI have changed the doctype to valid HTML for the time being.

But since you were using xhtml style coding you now have html errors that need fixing. Things like
in xhtml must be
instead when you are coding html.

Your DTD establishes the dialect of html or xhtml your browser will use and having defined it you must code to it's standards. Whatever DTD you use, valid html or xhtml is a requirement for successful use of CSS and you must validate and correct your code to the DTD standard. The W3C validator will help you do this, and using it or it's equivalent is an essential skill that the CSS designer cannot do without.

The html validator extension for Firefox will actually do this all for you without any effort on your part except cutting and pasting. If you are not using Firefox as your design-to browser now is the time to start.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Thanks for all advice. Ok,

Thanks for all advice. Ok, so I went the other (correct?) way, and made the whole code xhtml valid.

The firefox extension you recommended was great for this.

My CSS still has warnings/errors but that

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

A basic two column layout is

A basic two column layout is extremely easy to do. The element that encloses the left column comes first in the source code and is given an explicit width and a "float: left rule". The element that encloses the right is given a "margin-left" slightly larger than the width of the floated element. That's pretty much all there is to it.

Important is that the element to be floated must come first in the source code. You can turn the left column into the right column without changing the source simply by changing it to float: right and adjusting the right side margin of the other element instead of the left.

If you want to have special effects and differently colored columns you should google for "faux columns".

But it is the content that is really important. Does your content call for a two column layout? If not then why impose a structure on it that might not work well?

Remember, The Web is not Paper and you can't make it into paper. I recommend you check out the "Truth & Consequences of web site design"

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Hi, am back. And now with a

Hi, am back. And now with a site (well, page actually) that is valid xhtml and has valid css:) Thanks. I did a float on the left side and margins top and left for the rest.

Hope this looks better in IE6..

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, there's hardly any

Well, there's hardly any content, so it seems like rather a pointless page to me. If you mean it as a "splash" screen they are rather out of date these days for good reasons, and you should try to start serving your content right at the start.

What is the page actually about and why should I come back to it?

Also, you are sure using a whole lot of DIV elements for the rather simple effect you are making. As far as I can see you don't actually need any DIVS on that page at all. The left hand side should, it looks to me, semantically be an H1 element using image replacement and styled to float where you want it.

Remember that you have about ten seconds for each new visitor to decide if they are going to use your site, and you have to give them a reason. I see no reason to stay at that page.

But it's nice to see valid html for a change!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

The site is for a friend of

The site is for a friend of mine who is an architect here in Norway. So it

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The thing you want to learn

The thing you want to learn about is the idea of "semantic" coding of html. The idea is that the markup tags in your actual html should not say anything about how the page will look, only what it's content actually means. So you use tags like P for paragraphs, H1 through H6 for headings, and so on.

Menus are really lists of links in html, so the semantic coder will put them in one of the list constructions, usually UL, but occasionally DL or even OL if appropriate to the meaning.

Tables are not to be avoided for properly tabular information either, just for layout. If you are showing information that belongs in rows and columns naturally, then you use tables.

Then when a page is marked up semantically we use CSS to define it's presentation and layout. This is the old computer science idea of "separation of concerns" in a new guise. HTML for semantic markup, CSS for presentation.

In the course of using CSS for defining layout one will naturally come across situations where grouping is needed, and the DIV tag then provides a simple way to group elements to provide hooks for CSS rules.

An example of the difference is the old B and I tags, used to bold or italicise text and still in html. But semantically there are the STRONG and EM tags which are usually styled the same way but mean something about the structure of the text. "This text is to be emphasized ("EM") and this text is to be strongly emphasized ("STRONG")" is better because it marks up meaning, not presentation.

Anyway, fire up google and type in "semantic html" as a search term. You'll come accross some interesting links on the concept The one at the
Brainstorma and raves site
seems quite good. Also TPH's article on
"Divitis: what it is, and how to cure it" should be required reading.

If you have a read through these articles and do some thinking about it, I bet you could code up that page in a much simpler way, that would still look the same.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

By the way I have my doubts

By the way I have my doubts about CMS systems because I have yet to come across one that does clean, valid, and semantic code. And I've tested a bunch of them, Drupal included.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you tried TextPattern?

Ed, have you tried Textpattern?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

wolfcry911 wrote:Ed, have

wolfcry911 wrote:
Ed, have you tried Textpattern?

Nope, I haven't. I've sort of given the search for a good CMS up for awhile after trying dozens of them and not finding one I could really live with. I decided to pause for awhile and see if the state of the art advanced. Should I try Textpattern? I've just looked at their site and I'm not too sure. Looks sort of like it involves learning yet another markup language to enter stuff in the CMS.

My demand list is something like: valid, semantic html output, completely skinnable with CSS alone. Does Textpattern make it, do you think?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

sNews claims to be xhtml and

sNews claims to be xhtml and css valid - never used it but i keep it on the back burner inscase i decide to build a blog for some reason.
http://www.solucija.com/home/features/

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I want more than just that,

I want more than just that, though. I want at least a claim of semantic code and I want at least a claim that it can be skinned with CSS alone.

I've been running a forum using SMF, which claims and delivers valid xhtml. But it delivers valid xhtml in nested tables for layout and can't be skinned by just adjusting it's CSS. It's a pain because of that.

Ed

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

I think Drupal is awesome as

I think Drupal is awesome as a CMS, and should spit out valid xhtml as a standard installation (Drupal 5.Innocent. But some modules break that because of their sometimes hardcoded invalid code. But Drupal 5.0 modules are supposed to use the xhtml themeing engine in the core.

Anyway. Although I would change the code in my aforementioned site to semantic xhtml, what do you think is still breaking it in IE ? I used a float and margins, "center" positioned the logo horizontally, used percentages and em as positioning information. (I'm now at work so can

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

After reading the

After reading the recommended articles above about semantic html I certainly see that I have suffered from Divitis Smile

I have learnt more through this thread the last couple of days than I have learnt about html/css the 3 last years. Even though my main hobby is Drupal and php development (and photography but that

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Actually even the csscreator

Actually even the csscreator site has some quirks with IE6 as the sidebar starts below the last reply in the thread. Unfortunately even this site runs on Drupal, but it

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Ed Seedhouse wrote:By the

Ed Seedhouse wrote:
By the way I have my doubts about CMS systems because I have yet to come across one that does clean, valid, and semantic code. And I've tested a bunch of them, Drupal included.

I think you need to look beyond the default templates that come with a lot of CMSs then. I've only used Wordpress and Expression Engine for actual site production, but they will output whatever code you put in, so the cleanliness of the code is up to the user, not the system (there's certainly nothing wrong with the default themes that come with Wordpress). I'm pretty sure it's the same for others like Textpattern and CMS Made Simple which I've had passing looks at before.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Tyssen wrote:Ed Seedhouse

Tyssen wrote:
Ed Seedhouse wrote:
By the way I have my doubts about CMS systems because I have yet to come across one that does clean, valid, and semantic code. And I've tested a bunch of them, Drupal included.

I think you need to look beyond the default templates that come with a lot of CMSs then.

Well I agree that's what I would have to do, but I shouldn't have to. If I had an absolutely vital need for a CMS right now I'd dig in and do that but, as I don't, I can afford to wait until someone does a CMS right or a need arises that I can't fill without a CMS.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

In many respects though Ed

In many respects though Ed that is exactly what you should have to do If a CMS is any good it's as an engine/controller and you should be responsible for the 'views' part of the abstraction.

Themes are only there as such to provide out of the box functionality so to speak.

Both Drupal and Wordpress are pretty good at this and although Drupal does have a tendency to wrap elements in divs when not obviously required, that tends to come with the complex nature of markup generation in CMS's, but Drupal and wordpress are both very easy to customize, both perfectly able to handle being dropped into existing layouts and with Drupal it is very easy to overide default node,page,block template files with your own.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Right ! Back on topic though

Right ! Back on topic though .. Wink

My simple little http://ide.sidene.info should now be cool semantic xhtml (even the logo is in a h1 tag! woohoo!) and is valid xhtml strict and valid css Smile I

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I think I would have

I think I would have approached this differently, but here are two hacks to add to the css to get the page to work in IE6.
* html body {
height: 100%;
}

* html #imgbox {
position: static;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

As much as I avoid the use

As much as I avoid the use of tables for layout, this is a situation where 1) the table needed is trivial, and 2) the added complexity of making IE work in a pure html+css layout is contra-indicated.

The simple one table, two cell layout does not cause an ambiguous structure, and semantic markup is only slightly harmed in the making. (obligatory PETA statement)





IDE Arkitekter - Et arkitektkontor i Vestfold n

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Wow, thanks, wolfcry. I'll

Wow, thanks, wolfcry911. I'll check this out this evening (CET).

And I see your point, gary, but this was just as much for learning css and xhtml semantic. And I still like how design and content is totally separated with html+css. IE has been a bigger pain in the arse than I thought so I definately will consider your approach the next time in simple designs.

The iWeb app preinstalled on my Mac probably would have made this site in 10 seconds, but it would most probably not be beautiful and valid code, and it wouldn't be as interesting.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Perhaps this is of interest,

Perhaps this is of interest, Ed: http://drupal.org/project/sympal_theme

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

[email protected]

[email protected] wrote:
Perhaps this is of interest, Ed: http://drupal.org/project/sympal_theme

Well, it's a good sign that someone is apparently trying to do this, anyway.

But I still think that it's the CMS itself that should be built from the ground up with proper semantic, valid html in mind. I also think that you should be able to skin a CMS, or a blog product, or a forum, using CSS alone. After all, skinning is about presentation, and presentation should be done in CSS.

But as I myself have not designed any such product I may be asking for more than is easily available with current web technology and programming languages.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 21 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I think we mods and leaders

I think we mods and leaders and gurus should take on the challenge of creating a simple lightweight semantic valid CMS/forum/blog system skinned with CSS alone.

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I started building one that

I started building one that I called phpSiteContent but it sort of got boring.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

thepineapplehead wrote:I

thepineapplehead wrote:
I think we mods and leaders and gurus should take on the challenge of creating a simple lightweight semantic valid CMS/forum/blog system skinned with CSS alone.

Erm, these sort of products already exist:

http://wordpress.org/
http://textpattern.com/
http://getvanilla.com/
http://www.assetnow.com/
http://www.defacto-cms.com/
http://www.ecru.co.uk/
http://www.qnecms.co.uk/
http://www.thinkcolony.com/
http://www.tradingeye.com/
http://www.jadu.co.uk/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Precicesly. Couldn't be

Precicesly. Couldn't be bothered. I did try a few but found many too hard to follow.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The issue is, I believe,

The issue is, I believe, that all these CMSes are trying to be all things to all men, or however the saying goes. There are too many possible usages, leading to too many conditions.

Ideally, all the logic would do is be a bunch of black boxes that you hand values or you get values. The templating engine would combine the variables with whatever html the developer wanted to use. That would allow the css to control the presentation. Trouble is, the developer would have to learn an API and write his own template.

My own stuff has been best served by writing site/page specific CMSes, but I haven't had to include forums.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Offline
Regular
Norway
Last seen: 15 years 15 weeks ago
Norway
Joined: 2007-04-13
Posts: 13
Points: 0

Gary: could you please

Gary: could you please modify your reply where you post my entire xhtml source ? Because it interfers with the search results for the actual site I made for my friend. He wondered what the CSScreator result in Google was all about... At least just lose the head part in the source code or something.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The only link to the site

The only link to the site was the one in your original post. The referer in your log or in Google analytics is simply from people visiting the page from CSSCreator. It should be trivial to configure your analyzer to ignore this referer entry.

As for Google search, having the link here will help to boost the page rank, a Good Thing®.

I did break the url so that it will no longer be seen as a link.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.