|
Posted by Werner Partner on August 7, 2007, 2:08 pm
Please log in for more thread options
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,blockquote,nobr,b,i
{ font-family:Arial,sans-serif;}
p,ul,ol,li,div,td,th,address,nobr,b,i
{ font-family:Arial,sans-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:#a7a09a;
color:#000;
}
body {
min-width:900;
}
#wrap {
background:#99c;
margin:0 auto;
width:950px;
}
#logo {
background:#FF8844;
float:left;
width:120px;
height:100px
}
#banner {
background:#FF8844;
float:right;
width:830px;
height:100px
}
#sidebar {
background:#FF8844;
float:left;
width:120px;
}
#main {
background:#ffffff;
padding:10px;
float:right;
width:810px;
}
#footer {
background:#999
clear:both
}
--
--------------------------------------------------
Dorothee & Werner Partner, 45699 Herten
http://www.sonoptikon.de
|
|
Posted by John Hosking on August 7, 2007, 4:23 pm
Please log in for more thread options
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
|
|
Posted by Werner Partner on August 8, 2007, 1:46 am
Please log in for more thread options
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
|
|
Posted by John Hosking on August 8, 2007, 1:49 pm
Please log in for more thread options
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
|
|
Posted by Werner Partner on August 8, 2007, 5:50 pm
Please log in for more thread options
John Hosking schrieb:
> 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):
You suggested to change from <table> to CSS, and I followed the tutorial
in the link you gave me. It was just easy enough for me ;-)
>
> > No surprise. Step 1 is always to validate your code.
>
ok ...
I changed some items and did something cosmetical, now it looks quite
better:
http://www.kairos-team.de/test/
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.
I validated the document and there were 17 errors, I will correct them
later. CSS makes everything easier and it will be automated by PHP, so I
will first make the new document and then validat again.
regards
Werner
--
--------------------------------------------------
Dorothee & Werner Partner, 45699 Herten
http://www.sonoptikon.de
|
| Similar Threads | Posted | | How do I call a program | August 18, 2005, 11:12 pm |
| possible to use hyperlink to call a vbscript sub? | October 19, 2004, 10:46 am |
| Call for Presentations - Open Publish 2007 | January 2, 2007, 4:01 pm |
| Call for Papers Opens for ApacheCon US 2008 | March 1, 2008, 3:04 pm |
| Call for Papers Extended for ApacheCon US 2008 | April 2, 2008, 10:53 pm |
| XML 2005 Call for Papers Ends May 13 --- Keynotes Announced | May 5, 2005, 2:25 pm |
| WWW/Internet 2006: Call for Papers (Murcia, Spain) | June 30, 2006, 12:09 pm |
| Optimal way to call a sound file on a mouse/button click. | August 5, 2004, 7:28 am |
| Deadline for discounted hotel rate for XML 2005 is Oct 21 - Call for Posters/XML Artwork now open | October 17, 2005, 10:38 am |
| How to call a simple perl script from HTML without need of HTTPS but simple HTTP ? | May 11, 2006, 4:36 am |
|
XML Sitemap