tester: Textpositionierung Quelltext / Design

Beitrag lesen

SELF-Forum

Textpositionierung Quelltext / Design

tester
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich habe mal ein Problem mit einer Darstellung.

Die Anordnung von Texten im Quellcode fällt hier mit der Anordnung im Design auseinander.

Dazu untenstehendes Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
 <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  <title>Untitled Document</title>  
  <STYLE TYPE="text/css" MEDIA=screen>  
   <!--  
     #eins  { background: red; color: black }  
     #zwei  { background: yellow; color: black }  
   -->  
  </STYLE>  
  
 </head>  
 <body>  
  
  
  <p id="eins">Dieser Text soll im Design eigentlich unten stehen.  
     Im Quelltext hingegen ist es wichtig das er über dem  
     Text Zwei auftaucht.</p>  
  
  <p id="zwei">Dieser Text hingegen soll im Quelltext an letzter  
     Stelle zu finden sein. Wichtig ist aber das er im  
     Design über Text Eins auftaucht</p>  
  
  
 </body>  
</html>

Ich könnte

a) mit negativen Margins arbeiten

  
#eins {  
background:red none repeat scroll 0%;  
color:black;  
margin-top:100px;  
}  
#zwei {  
background:yellow none repeat scroll 0%;  
color:black;  
margin-top:-60px;  
}

Nachteil: wenn ich die Schriftgröße ändere passen die Margins nicht mehr. Auch mit EM habe ich das nicht hinbekommen.

b) mit Floats arbeiten

  
#eins  { background: red; color: black; float:right; width:100px;}  
#zwei  { background: yellow; color: black; float: left; width: 100px; }

Nachteil: Die Texte sollen nicht nebeneinander, sondern untereinander stehen.

c) absolute Positionierungen

Nachteil: wie bei a) nehmen die Texte beim ausdehnen keine Rücksicht aufeinander

Gibt es keine Lösung die "bulletproof" ist?

Danke für Eure Ideen.

Beitrag melden
–
Informationen zu den Bewertungsregeln