Denis Oliver Kropp wrote: > Using stylesheets, I'm a total beginner, so if something could > be done better, please tell me. Especially the table stuff still > sucks. > I much prefer it to the existing site. Looks very nice. Well done!
The measure of good web-site design should be clarity of information layout, ease of navigation, and good accessibility. You score high on all of these.
A few suggestions on HTML/CSS:
1. Regarding someone's comment on font-sizes being too small:
A font-size of 76% is actually common for many web pages and usually gives a font-size approaching a user's system (e.g. menu bar) font, which many would say is preferable. Much of this is down to taste, but the following articles contain some sound reasoning about CSS font-sizes:
http://www.thenoodleincident.com/tutorials/typography/index.html
http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html
I use the following font-size declarations in my CSS, which provide a consistent set of sizes across all the whoe web page on all the main browsers:
body {
font-size: 76%;
}
table, p, li, pre, h2, h3, input, select {
font-size: 100%;
}
h1 {
font-size: 120%;
}
.smalltext {
font-size: 92%;
}
The reason for the 100% is that font-sizes are inherited. Without specifying the 100% then, for example, p would inherit 76% from body and end up at 76% of 76%, or worse as elements get nested in tables.
Note also that using % for font-size, as you are already doing, actually allows the text in the web-browser to respond to a user's font-size settings in ways that using em/px/pt for fonts does not. The majority of users with higher resolution screens already set their font-sizes larger.
2. The "top" table is not needed and, if you put the td.top padding style into p.top, could be simplified to:
<p class="top">
<img src="images/logo.gif" alt="DirectFB - Home of the pragmatist">
</p>
3. To replace the news items table on the news page, I would suggest replacing <p class='news'><table.../table></p> with the following:
<div class="news">
<h3><span class='newsdate'>2004-09-28</span>
<span class='newscaption'>First autogenerated news from new web site</span></h3>
<p class='newstext'>
This is the first news entry that was loaded
from file and converted to HTML/CSS by PHP.
</p>
</div>
and change the contents of news.css to:
div.news {
margin: 0;
padding: 0;
text-align: left;
background-color: #101010;
border: 1px solid #303030;
}
div.news p, div.news h3 {
margin: 0.5em 0.7em;
font-size: 1.0em;
font-weight: normal;
}
.newsdate {
font-weight: bold;
color: #d0c040;
padding-right: 0.5em;
}
.newscaption {
color: #f0a010;
}
.newstext {
text-align: justify;
}The use of <h3> and <p> here ensure that the page degrades gracefully on non-CSS browsers.
4. If you wanted to emulate the old news table on the home page, you could do something similar:
<div class='oldnews'>
<h3><span class='directfbfloat'>directfb</span> <a href="news/dok/voodoo.xml">Voodoo - The network transparency layer of DirectFB</a></h3>
<p>Thu, 03 Jun 2004 <span class='author'>dok</span></p>
<p>The recent development of Voodoo enables DirectFB applications
to run over a network connection without modifications.
</p>
</div>
.oldnews p {
margin: 0.2em 0;
}
.oldnews h3 {
background-color: #203153;
font-face: Arial, Helvetica, sans-serif;
font-size: 1.0em;
font-weight: bold;
margin: 1.0em 0 0 0;
}
.author {
font-size: 76%;
font-style: italic;
}
.directfbfloat {
float: right;
font-weight: normal;
border-left: 2px solid #102020;
}
5. Since you have <div class="menusection"> you shouldn't need the class="menusection" on the <ul> tags. This is a matter of taste, but I would not put a class in the <ul> tags, but rather in the CSS replace:
"ul.menusection" with ".menusection ul"
and
"ul.menusubsection" with ".menusection ul ul"
You would also get a smaller file-size (less white-space!), and improved HTML code readability if you did each bullet point ("<li>...</li>") all on one line without line breaks.
Use of tables for the layout of the two main sections of the page (menu/content) is fine. You could accomplish something similar with <div> tags and CSS, but it ends up just as convoluted and doesn't degrade as well on older browsers. Replacing tables with CSS is only recommended where degrading to a list is acceptable (as it is for your news items).
Hope this is helpful.
-- Simon Poole www.appliancestudio.com
