Gernot Back: Grenzen der Beeinflussbarkeit von semantischem Markup

Beitrag lesen

Hallo nochmal,

Name .......... Position (z.B. Chef)
Namezwei ...... Position (z.B. Hiwi)
Nocheinname ... Position (z.B. Assi)

... ich schwanke wie du wahrscheinlich auch noch zwischen einer Tabelle und einer Definitionsliste.

So könnte das dann aussehen:

  
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">  
<html>  
<head>  
<title>Definitionsliste</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
dl {  
  margin-top:.4em;  
}  
  
dt {  
  background:url(dot.gif) repeat-x 0 .5em;  
  float:left;  
  width:20em;  
}  
  
dt a {  
  text-decoration:none;  
  color:#0000AA;  
  position:relative;  
  top:-.4em;  
  padding-right:.3em;  
  background-color:#FFFFFF;  
}  
  
dt a:hover {  
  text-decoration:underline;  
}  
  
dd {  
  margin-left:20.5em;  
  position:relative;  
  top:-.4em;  
  background-color:#FFFFFF;  
  height:100%;  
}  

</style>
</head>
<body>
<dl>
  <dt><a href="mailto:chef@kloebner.de">Dr. Paul Klöbner</a></dt>
  <dd>Chef</dd>
  <dt><a href="mailto:spezi@bundestach.de">Guido Müller-Lüdenscheid (MdB)</a></dt>
  <dd>Aufsichtsratsvorsitzender</dd>
  <dt><a href="mailto:info@kloebner.de">Erna Hoppenstedt</a></dt>
  <dd>Chefsekretärin</dd>
  <dt><a href="mailto:kurzwaren@kloebner.de">Hans Hallmackenreuther</a></dt>
  <dd>Abteilungsleiter Kurzwaren</dd>
</dl>
</body>
</html>
[/code]

Wenn man das Fenster sehr klein zieht, stehen die Lemmata (DT-Elemente) und die zugehörigen Einträge (DD-Elemente) nicht mehr auf einer Linie. Die Beeinflussbarkeit von semantischem Markup mittels CSS scheint ihre Grenzen zu haben, oder hat jemand eine andere Idee, wie man das lösen könnte?

Gruß Gernot