mrx: Design in CSS umsetzen

Beitrag lesen

SELF-Forum

Design in CSS umsetzen

mrx
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche gerade ein Design in CSS umzusetzen:
So sollte es aussehen (Firefox und IE-Versionen >6): http://ipinfo.info/netrenderer/index.php?browser=ie8&url=http://vfb-stuttgart.piranho.de/test/

Für den IE 6.0 und IE 5.5 sieht es jedoch so aus:
http://ipinfo.info/netrenderer/index.php?browser=ie6&url=http://vfb-stuttgart.piranho.de/test/

Was kann ich ändern?
Die Seite könnt ihr unter http://vfb-stuttgart.piranho.de/test betrachten. hier noch der Quellcode, wobei ich die Textformatierungen mal rausgenommen hab, die sind unwesentlich:

  
  
<?xml version="1.0" encoding="UTF-8" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
 <head>  
   <title>Beispiel</title>  
  
[...]  
  
 </head>  
 <body style="background-color:#ffa200;">  
  
  
<div style="position:relative; height:100% !important; height:100%; min-height:600px; width:100%; max-width:1040px; margin:0 auto;">  
  
  
  
<div style="position:absolute; top:20px; left:250px; right:30px; bottom:20px; min-width:440px; max-width:800px;">  
  
<!-- Menü oben -->  
  
<div style="position:absolute; top:0px; left:20px; height:30px; width:100px;">  
<a href="" class="menobenakt">Startseite</a>  
</div>  
  
<div style="position:absolute; top:0px; left:120px; height:30px;">  
<a href="" class="menoben">Link</a>  
  
</div>  
  
<div style="position:absolute; top:0px; left:220px; height:30px;">  
<a href="" class="menoben">Link</a>  
</div>  
  
<div style="position:absolute; top:0px; left:320px; height:30px;">  
<a href="" class="menoben">Link</a>  
</div>  
  
<!-- 1.Zeile -->  
<div style="position:absolute; top:30px; left:0px; background-image:url(bild/lo1.png); height:20px; width:10px;"></div>  
  
<div style="position:absolute; top:30px; left:10px; background-image:url(bild/lo2.png); height:20px; width:10px;"></div>  
  
<div style="position:absolute; top:30px; left:20px; right:40px; background-image:url(bild/o.png); height:20px;"></div>  
  
<div style="position:absolute; top:30px; right:30px; background-image:url(bild/ro1.png); height:20px; width:10px;"></div>  
  
<div style="position:absolute; top:30px; right:0px; background-image:url(bild/ro2.png); height:20px; width:30px;"></div>  
  
  
<!-- 2.Zeile -->  
<div style="position:absolute; top:50px; bottom:40px; left:0px; background-color:black;width:10px;"></div>  
  
<div style="position:absolute; top:50px; bottom:40px; left:10px; right:10px; background-color:white;">Inhalt</div>  
  
<div style="position:absolute; top:50px; bottom:40px; right:0px; background-image:url(bild/r.png); width:30px;"></div>  
  
<!-- 3.Zeile -->  
<div style="position:absolute; bottom:0px; left:0px; background-image:url(bild/lu1.png); height:40px; width:10px;"></div>  
  
<div style="position:absolute; bottom:0px; left:10px; background-image:url(bild/lu2.png); height:40px; width:10px;"></div>  
  
<div style="position:absolute; bottom:0px; left:20px; right:40px; background-image:url(bild/u.png); height:40px;"></div>  
  
<div style="position:absolute; bottom:0px; right:30px; background-image:url(bild/ru1.png); height:40px; width:10px;"></div>  
  
<div style="position:absolute; bottom:0px; right:0px; background-image:url(bild/ru2.png); height:40px; width:30px;"></div>  
  
  
</div>  
  
  
<div style="position:absolute; top:200px; left:30px; width:220px; height:13px; background-image:url(bild/menlioben.png);"></div>  
  
<div style="position:absolute; top:213px; left:30px; width:5px; height:300px; background-color:black;"></div>  
  
<div style="position:absolute; top:213px; left:35px; width:215px; height:300px; background-color:white;">  
  
<a href="" class="menlinksakt">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks">Link</a>  
  
<a href="" class="menlinks" style="border-style:solid none solid none;">Link</a>  
  
  
</div>  
  
<div style="position:absolute; top:513px; left:30px; width:220px; height:23px; background-image:url(bild/menliunten.png);"></div>  
  
  
</div>
Beitrag melden
–
Informationen zu den Bewertungsregeln