Moin, Am Sun, 30 Apr 2006 17:43:44 +0200 schrieb Andreas Jellinghaus:
> http://www.opensc-project.org/new/ > > has the new web page. less content, but nearly everything we had > on the old page is in the wiki these days. The font size is too small for me. There's a simple reason to this: you used body { font-size: 10px; } which is a big no-no. Never use font-size specifications in pixel for any text that anyone is supposed to read. The user should have the right to select his/her favourite font size, so he/she can choose one that matches his/her screen resolution and eyesight. 10px might look great to you on your screen, but keep in mind that there are users out there with different screens (some of them even have more than 75dpi! *gasp*) and different eyes. Instead, use font-size: 1em; which is my font size that I have chosen. (Yes, I could set my browser to scale the site up, but that's an unnecessary nuisance. And IE users can't do that.) Then, you might ask, what to do about the diffent width specifications in px, won't they depend on the font-size? em comes to the rescue here, too. You can replace the pixel widths with equivalent em widths and all will scale nicely with different font sizes. (This works not with all background images in the general case, but does work in this case.) That being said, you did a very good job of separating content from style, so all my proposed changes work on the CSS alone. I've changed the CSS to use relative units wherever possible (with some min-(width|height) in px when there's a picture that must be included in an area; these are unlikely to ever kick off) by scaling every px with 0.0571 em/px (rough guess on my side) and then adjusting some measures to get better proportions. The result should look mostly the same as your version if you set your font size to 10px, but should scale well with almost any font size. I also added background colors for the teaser areas, so it's no problem if the area is bigger then the background image. (There was also one CSS bug in #teaser-left: background: url(media/teaser-left-bg.png); overrides the previous background-repeat: repeat-x;). There are some slight issues left: Most importantly the upper right hand 'latest news' box will not fit 2 news items. Either make the box bigger, include only one news item or reduce the font size (only for this part of the site, that should be fine). Also I could not make the right hand table fit without line breaks in "Mac OS X Installer SCA" and "Windows Installer SCB". At least not without massive changes to the proportions of the right column. Maybe generally reducing the right column's font size to about 70% would be a solution to both problems (don't forget to compensate by multiplying the given widths with 1/0.7 to keep their effective size the same). Smaller font size is not a big problem in this case, because these are not massive amounts of text to be read, but are just there to be skimmed over. Still needs to be thought through and discussed. P.S.: One content note: "Welcome to opensc-project.org This sever hosts [...]" I always thought, 'sewer' would be written with a 'w' ;-) -- Henryk Plötz Grüße aus Berlin ~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~ ~ Help Microsoft fight software piracy: Give Linux to a friend today! ~
--- opensc.css.1 2006-04-30 17:37:07.000000000 +0200
+++ opensc.css 2006-04-30 23:37:24.000000000 +0200
@@ -1,12 +1,12 @@
/** HTML definitions **/
body {
text-align: center;
- font: 10px Verdana,sans-serif;
+ font: 1em Verdana,sans-serif;
background:url(media/background.gif) repeat-x #c0c0c0;
}
td {
- font: 10px Verdana,sans-serif;
+ font: 1em Verdana,sans-serif;
}
div {
@@ -24,38 +24,39 @@
h1, h2, h3 {
color: #BE1722;
+ font-weight: bold;
}
h1 {
- font-size: 180%;
+ font-size: 130%;
}
h2 {
- font-size: 150%;
+ font-size: 115%;
}
h3 {
- font-size: 120%;
+ font-size: 105%;
}
/** layout definitions **/
#page {
- width: 700px;
- margin:30px auto;
+ width: 45em; /* 40em */
+ margin: 1.7em auto;
background: #FFF;
- padding:0 15px;
+ padding:0 0.85em;
}
#header {
- padding-top: 10px;
- padding-left: 20px;
+ padding-top: 0.57em;
+ padding-left: 1.14em;
}
/** navigation definitions **/
#menu {
- height: 27px;
+ height: 1.67em; /* 1.54em */
background: #395598;
- margin: 5px 0;
+ margin: 0.285em 0;
}
#menu ul {
@@ -65,7 +66,7 @@
}
#menu li {
- font-size: 11px;
+ font-size: 1.05em;
float: left;
margin: 0;
padding: 0 0 0 0px;
@@ -74,7 +75,7 @@
#menu a {
float: left;
display: block;
- padding: 7px 15px;
+ padding: 0 0.85em;
color: #FFF;
text-decoration: none;
font-weight: bold;
@@ -86,38 +87,39 @@
/** teaser definitions **/
#teaser-right, #teaser-left {
- height: 150px;
+ height: 8.5em;
+ min-height: 150px;
}
#teaser-left {
- background-repeat: repeat-x;
float: left;
- background: url(media/teaser-left-bg.png);
- width: 468px;
+ background: #213158 url(media/teaser-left-bg.png) repeat-x;
+ width: 31.7em; /* 26.7em */
}
#teaser-right {
float: right;
- width: 205px;
- background: url(media/teaser-right.png);
+ width: 11.7em;
+ background: #b2b2b2 url(media/teaser-right.png);
background-repeat: repeat-x;
border-left: 1px solid #C0C0C0;
- padding: 0 10px;
+ padding: 0 0.57em;
}
/** content definitions **/
#content-left {
float: left;
- width: 420px;
- margin: 10px 20px;
+ width: 29em; /* 24em */
+ min-width: 400px;
+ margin: 0.57em 1.14em;
}
#content-right {
border-left: 1px solid #C0C0C0;
float: right;
- width: 205px;
- padding: 0 10px;
+ width: 11.7em;
+ padding: 0 0.57em;
background: #EFEFEF;
}
pgpGAUwtMp3jY.pgp
Description: PGP signature
_______________________________________________ opensc-devel mailing list opensc-devel@lists.opensc-project.org http://www.opensc-project.org/mailman/listinfo/opensc-devel
