Table to CSS - call for help

[Werner Partner]

I thought about your suggestion to leave tbales and, instead o, work
with css.

The problem is, that I still don't know veray much about css, so I have
some difficulites to understand css-suggestions and to make little more
complex designs by myself.

Nevertheless I tried

This is the original page:
http://www.kairos-team.de

pic-division, banner, sidebar, and main division are realized by tables.
The height of the banner must be the same as the height of the picture,
and the width of the sidebar must be the width of the picture. So
everything is automatic, and I have different pages as
http://www.sonoptikon.de
or
http://www.akkordeon-herten.de

It's always the same design and the same frame, it fits automatically

I made a trial to convert ist to css, the first, raw result is here:
http://www.kairos-team.de/test/

There are some questions and some problems:

One of the first problem is that in the banner there are two tables in
the tables, and perhaps this should be changed.

Otherwise it lookes nice, I know the width and the height of the
picture, so I can count the width of banner and main, that's easy.

Questions:
How can I pull the sidebar down to the legnth of the main section.

Why is the footer not under sidbar _and_ main?

thanks for help

Werner


This is the css File:
body,
h1,h2,h3,h4,h5, ul,ol,li,div,td ,th,address,blo ckquote,nobr,b, i
{ font-family:Arial,sa ns-serif;}
p,ul,ol,li,div, td,th,address,n obr,b,i
{ font-family:Arial,sa ns-serif;font-size:10pt; }

h1 { font-size:24pt; color:#AA0000; margin:8px; margin-left:4px}
h2 { font-size:16pt; margin:8px; margin-left:4px}
h3 { font-size:12pt; margin:6px; margin-left:4px}
h4 { font-size:10pt; margin:6px; margin-left:4px}

html {
margin:0;
padding:10;
background:#a7a 09a;
color:#000;
}
body {
min-width:900;
}
#wrap {
background:#99c ;
margin:0 auto;
width:950px;
}

#logo {
background:#FF8 844;
float:left;
width:120px;
height:100px
}
#banner {
background:#FF8 844;
float:right;
width:830px;
height:100px
}
#sidebar {
background:#FF8 844;
float:left;
width:120px;
}
#main {
background:#fff fff;
padding:10px;
float:right;
width:810px;
}
#footer {
background:#999
clear:both
}

--
--------------------------------------------------
Dorothee & Werner Partner, 45699 Herten
http://www.sonoptikon.de

[John Hosking]

Werner Partner wrote:

I thought about your suggestion to leave tbales and, instead o, work
with css.

Whose suggestion? Are you talking to me? Is this supposed to be an e-mail?

>
This is the original page:
http://www.kairos-team.de

I made a trial to convert ist to css, the first, raw result is here:
http://www.kairos-team.de/test/

There are some questions and some problems:

No surprise. Step 1 is always to validate your code. For markup use
http://validator.w3.org/ and for validating your stylesheets go to
http://jigsaw.w3.org/css-validator/ . Without valid code all bets are off.

>
Questions:
How can I pull the sidebar down to the legnth of the main section.

Why is the footer not under sidbar _and_ main?

Invalid CSS. You're missing a semi-colon in the #footer ruleset.

>
This is the css File:

No, don't paste this. We've got your URL, we can get your CSS.
--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

[Werner Partner]

John Hosking schrieb:

Werner Partner wrote:

>I thought about your suggestion to leave tbales and, instead o, work
with css.

Whose suggestion? Are you talking to me? Is this supposed to be an e-mail?

No, the suggestion came from Tim Streater, he posted a link with a
tutorial. I tried to follow the tutorial, and I am thinking about
throwing tables away and working with css.

>
Invalid CSS. You're missing a semi-colon in the #footer ruleset.

thanks! This was the mistake.

It's looking much better now - let's say it looks as it should look.
http://wwwkairos-team.de/test/

The banner is not ready yet.
I will put the questions if there are some.

thanks

Werner
--
--------------------------------------------------
Dorothee & Werner Partner, 45699 Herten
http://www.sonoptikon.de

[John Hosking]

Werner Partner wrote:

John Hosking schrieb:

>Invalid CSS. You're missing a semi-colon in the #footer ruleset.

thanks! This was the mistake.

You're welcome. But that wasn't the only mistake. In fact you seem to
have overlooked my actual advice (which you've snipped):

No surprise. Step 1 is always to validate your code.

If you had done *that*, you would have solved the problem of the
semi-colon "on your own" and your code would be valid now, too, which it
isn't.

>
It's looking much better now - let's say it looks as it should look.
http://www.kairos-team.de/test/

(URL corrected, maybe) Maybe it does, maybe it doesn't; with invalid
code, how can you be sure?

In my case, using FF, it doesn't; the footer is small and scrunched up
under the menu. In IE6, the footer is tall, stretching from under the
menu to the bottom of the content.

Anyway, it doesn't look like this URL, corrected or not, has the missing
semi-colon in the CSS. What URL really "looks as it should look?"

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

[Beauregard T. Shagnasty]

Werner Partner wrote:

But - there is another crucial thing: In the header are tables, too.
You see it, when you look at the source code.

But I think the header could be designed with css, too. I will try
tomorrow or the day after tomorrow.

Maybe this will give you some ideas:
http://k75s.home.att.net/banner.html

--
-bts
-Motorcycles defy gravity; cars just suck

[Werner Partner]

Beauregard T. Shagnasty schrieb:

Werner Partner wrote:

>But - there is another crucial thing: In the header are tables, too.
You see it, when you look at the source code.

But I think the header could be designed with css, too. I will try
tomorrow or the day after tomorrow.

Maybe this will give you some ideas:
http://k75s.home.att.net/banner.html

thanks

Slowly I will get along.

Werner

--
--------------------------------------------------
Dorothee & Werner Partner, 45699 Herten
http://www.sonoptikon.de