Hi to all,
http://www.briefwexl.at/index.php
The short examples are left of the head with firefox.
With IE and opera they do not start under "Personen" but at the fist
place where the head is as small that the images have enough place.
To use a background for the H1 text for the pictures is a little tricky,
but the images are displayed like overflow hidden at the right boarder
(to the head).
First question?
does anybody understand what I would like to get ;-)
Yes I do.
second question?
if yes any Idea to solve the problem without more space for the images?
Yes I have.
First, understand that your design is over-constrained. You over-code
somewhat to control pixel-precise layout.
Second, it is always best to use default values instead of declaring
them.
.briefwexl {
display: block;
...
}
and
#text1 h1 {
background: transparent url(../png1.png) no-repeat top left;
display: block;
...
}
Here, you can safely remove display: block; from both css rules since
<div> and <h1> elements are block-level elements: that's by
definition.
3rd:
Use inheritance and inherited properties instead of redeclaring and
redefining CSS declarations over and over.
color and font-family are good examples of inheritable properties.
Just declare once on the body element and then you have no need to
repeat it later. In other words
h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family:Arial,sans-serif,tahoma,Myriad,Optima; }
h4 { font-size:100%; font-weight:normal; color:black;}
h5 { font-size:90%; font-weight:bold; color:black;}
can be replaced (and better, correctly replaced) entirely with
body
{
background-color: rgb(254, 213, 1);
color: black;
font-family: Arial, Tahoma, Myriad, Optima, sans-serif;
margin-right: 0;
}
Writing Efficient CSS
Rely on Inheritance
http://developer.mozilla.org/en/docs/Writing_Efficient_CSS#Rely_on_inheritance.21
4th:
When you try to debug a webpage, one strategy is to surround each
major blocks with a border so that you can see what may be happening
in the rendering. Here, the .kopf block is too narrow to be holding
the images of the face and the 5 empty <h1> <span>s on its left (with
the pngX.png background images): you have an over-constrained layout,
not enough space... So, the 5 #textN h1 are pushed below in IE 7. I
wouldn't say this is a bug... but just that IE 7 float model is more
sensitive to constraints, pixel-precise layouts.
Solution:
just give your .kopf block a width of 40em instead of 35em.
.kopf
{
border: 2px solid blue;
clear: right;
float: right;
margin: 0em 0em 0em 1em;
width: 40em;
}
Another solution (strange) is to avoid, to remove
div {font-size: 92%;}
Anything under font-size: 100%;
is suspicious and is to be avoided except for fine-print.
Understand that now several browsers (Firefox 1+, Opera 8+, Safari 3,
K-meleon, Konqueror 3+, Icab 3+, Hv3 TKHTML alpha 16, etc) all offer
the users to set a minimum font-size for the rendering of webpage. So,
setting under 100% might not be rendered in the users' browsers.
Truth or consequences in web design:
Font-Size (excellent reading):
http://pages.prodigy.net/chris_beall/TC/Font size.html
"1em (or 100%) is equivalent to setting the font size to the user's
preference. Use this as a basis for your font sizes, and avoid setting
a smaller base font size.
Avoid sizes in em smaller than 1em for text body, except maybe for
copyright statements or other kinds of 'fine print.'"
W3C Quality Assurance tip for webmasters:
Care Font Size
http://www.w3.org/QA/Tips/font-size
"For this year's list of worst design mistakes, (...) I asked readers
of my newsletter to nominate the usability problems they found the
most irritating. (...)
1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many
votes as the #2 mistake. About two-thirds of the voters complained
about small font sizes or frozen font sizes;"
Top Ten Web Design Mistakes of 2005: 1. Legibility Problems
http://www.useit.com/alertbox/designmistakes.html
Regards, Gérard
