CSS questoin

[Knut Krueger]

Hi HTML Group,
I tried to setup a css style similar to the http://www.csszengarden.com/
But I do not understand how they managed textflow
around the container of *html file and css file*

maybe anybody has a hint for me
http://s013w22.srv13.mw-internet.net/test/index.html

by the way whats wrong with the <br> tag from test_left
HTML validation reports error I think there is an other error which
causes this one.

Regards Knut

 

[Jukka K. Korpela]

Scripsit Knut Krueger:

I tried to setup a css style similar to the
http://www.csszengarden.com/

As the CSS Zen Garden site explains, it's a fairly contrived example of
using style sheets - a demonstration by experts. You need _both_ quite some
artificial HTML markup _and_ (what's much more difficult) a competent
designer to create stuff like that.

But I do not understand how they managed
textflow around the container of *html file and css file*

That's a rather broad question, especially since style sheets there use many
different approaches and techniques.

maybe anybody has a hint for me
http://s013w22.srv13.mw-internet.net/test/index.html

Validate your HTML and "validate" your CSS, too, using the W3C tools. And
check how your page works _without_ CSS before starting to create a layout.

 

[Knut Krueger]

Validate your HTML and "validate" your CSS, too, using the W3C tools.
And check how your page works _without_ CSS before starting to create a
layout.

Ok the HTML Check problem

I did the validation - no errors without <BR>
8 errors with 8 <BR>

Do you have any suggestion for that?

Knut

 

[Jukka K. Korpela]

Scripsit Knut Krueger:

I did the validation - no errors without <BR>
8 errors with 8 <BR>

Do you have any suggestion for that?

Don't use <BR>, apparently. Or fix them to use the syntax that you declare.
You seem to be using XHTML 1.0, so they should be <br />. But that would be
pointless: XHTML 1.0 gives you nothing useful right now.

The contents of the page is a mess. Create something useful first, mark it
up properly (with semantic markup), validate it, and then consider styling.
Don't start with anything as ambitious as CSS Zen Garden kind of styling.
It's like trying to fly before you can walk.

 

[Ben C]

Scripsit Knut Krueger:


As the CSS Zen Garden site explains, it's a fairly contrived example of
using style sheets - a demonstration by experts. You need _both_ quite some
artificial HTML markup _and_ (what's much more difficult) a competent
designer to create stuff like that.

I thought one of the rules of the Zen Garden was that you can't touch
the HTML. You have to do it all with a stylesheet.

 

[Ben C]

Hi HTML Group,
I tried to setup a css style similar to the http://www.csszengarden.com/
But I do not understand how they managed textflow
around the container of *html file and css file*

It looks like they used a float.

maybe anybody has a hint for me
http://s013w22.srv13.mw-internet.net/test/index.html

URL doesn't work.

 

[Knut Krueger]

I thought one of the rules of the Zen Garden was that you can't touch
the HTML. You have to do it all with a stylesheet.

Hi Ben
I did not want to build a new Zen Garden sheet, I tried to implement
some features of them.
So I put in any text to see the background images working (not the final
ones).

But its working with Mozilla not with IE in the first step (except the
margin at the top)

Regards Knut

 

[Ben C]

Hi Ben
I did not want to build a new Zen Garden sheet,

The thing that surprised me was that Mr Korpela said you needed some
artificial HTML markup to make pages like the Zen Garden examples. But I
thought the HTML was very simple and the same for all the examples. It
is possible I misunderstood him.

 

[Jukka K. Korpela]

Scripsit Ben C:

The thing that surprised me was that Mr Korpela said you needed some
artificial HTML markup to make pages like the Zen Garden examples.

I did.

But I thought the HTML was very simple and the same for all the
examples.

I called it artificial since it deploys, for example, many <span> elements
that are logically redundant, used just to make it possible to overcome some
browser limitations. For example, <h1><span>heading text</span></h1> instead
of just <h1>heading text</h1>.

If someone wants to submit his design to the CSS Zen Garden, then he needs
to play by its rules, which means that both the markup and the content is
fixed. But if you just like to do something similar on your own pages, then
you need to create some artificial markup. Basically, you would write
logical markup and then add piles of <div> and <span> elements as well as id
and class attributes.

 

[Knut Krueger]

It looks like they used a float.

yes and I used a wrong nested div ...

URL doesn't work.

maybe for 10 minutes


but do you know whats not correct css or html?
Its wrong with IE - normally anything from the code is wrong

 

[Ben C]

yes and I used a wrong nested div ...

maybe for 10 minutes

Looks all right on Firefox.

but do you know whats not correct css or html?
Its wrong with IE - normally anything from the code is wrong

I don't have IE.

 

[Knut Krueger]

Looks all right on Firefox.


I don't have IE.

The Image left top is behind the repeated right upper part in IE.
Knut