mrx: Design in CSS umsetzen

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

  1. Design in CSS umsetzen

    Malcolm Beck´s Homepage des Autors
    – Informationen zu den Bewertungsregeln

    مرحبا

    Was kann ich ändern?

    Es wäre einfacher zu klären, was nicht geändert werden soll.

    Ich würde sagen, alles von Grund auf neu und Sauber schreiben.

    Du kannst <http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm@title=dieses Bsp.> frei verwenden und deinen Bedürfnissen entsprechend anpassen (bei deiner jetzigen Vorlage vllt. 2 St. für ein entsprechendes CSS (Grosszügig gerechnet, Pausen einkalkuliert)).

    mfg

    --
    Es gibt so viele nette Opas, was ist bei ihnen bloss schief gelaufen?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Design in CSS umsetzen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@mrx:

    nuqneH

    <?xml version="1.0" encoding="UTF-8" ?>

    Wenn du IE < 7 in den Quirksmodus [Jendryschik] schickst, solltest du dich über Darstellungsfehler nicht wundern. Die XML-Deklaration ist überflüssig, wenn als Zeichencodierung UTF-8 oder UTF-16 verwendet wird. Lass sie weg!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    XHTML 1.1 ist nur in Ausnahmefällen sinnvoll. Ein solcher ist in deinem Fall nicht gegeben. XHTML 1.1 hat etliche Nachteile (siehe Archiv). Verwende XHTML 1.0 Strict!

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

    Hier zeigt sich eins der Probleme von XHTML 1.1: Bei Auslieferung als 'text'mhtml' ist @xml:lang wirkungslos, @lang gibt es aber nicht in XHTML 1.1, damit ist keine Angabe der Textverarbeitungssprache möglich.

    <body style="background-color:#ffa200;">

    Styleangaben sollten nicht inline in @style-Attributen stehen, sondern gesammelt im Stylesheet.

    Und warum du alles absolut positionierst, ist mir ein Rätsel.

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Design in CSS umsetzen

    mrx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Okay, ich hab es jetzt nochmals versucht - bzw. ich bin dabei das Ganze ohne absolute Positionierung zu machen. Dabei ist jedoch ein Problem aufgetreten: Wie schaffe ich es nun, dass das Mittelteil sich soweit ausdehnt, dass das rechte Elememt 30 Pixel vom rechten Rand weg ist. Trotz der Angabe der 30 Pixel margin-right funktioniert das nicht. Was kann ich dagegen tun?

    http://vfb-stuttgart.piranho.de/test/

      
<?xml version="1.0" encoding="ISO-8859-1" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<title>Startseite</title>  
  
  
  
  
<style type="text/css">  
  <!--  
body {  
	background-color:#ffa200;  
}  
  
  
#mainlo1 {  
	float:left;  
	margin-left:250px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/lo1.png");  
}  
  
#mainlo2 {  
	float:left;  
	margin-left:0px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/lo2.png");  
}  
  
#maino {  
	float:left;  
	margin-left:0px;  
	margin-right:0px;  
	margin-top:50px;  
	height:20px;  
	background-image:url("bild/o.png");  
}  
  
#mainro1 {  
	float:left;  
	margin-left:0px;  
	margin-top:50px;  
	height:20px;  
	width:10px;  
	background-image:url("bild/ro1.png");  
}  
  
#mainro2 {  
	float:left;  
	margin-right:30px;  
	margin-top:50px;  
	height:20px;  
	width:30px;  
	background-image:url("bild/ro2.png");  
}  
  
   -->  
 </style>  
  
  
<div id="mainlo1"></div>  
<div id="mainlo2"></div>  
<div id="maino"></div>  
<div id="mainro1"></div>  
<div id="mainro2"></div>  
  
  
  
  
  
</head>  
<body>  
  
  
</body>  
</html>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Design in CSS umsetzen

      Malcolm Beck´s Homepage des Autors
      – Informationen zu den Bewertungsregeln

      مرحبا

      http://vfb-stuttgart.piranho.de/test/

      Besteht das Problem noch? Als ich mir dein Bsp. Gestern ansah, sah es noch ganz anders aus (hatte aber keine Zeit).

      mfg

      --
      Es gibt s☺ viele nette ☺pas, was ist bei ihnen bl☺ss schief gelaufen?
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Design in CSS umsetzen

      Struppi Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Okay, ich hab es jetzt nochmals versucht - bzw. ich bin dabei das Ganze ohne absolute Positionierung zu machen.

      Nicht auf dem von dir verlinkten Beispiel, da sind keine Tipps die du bisher bekommen hast eingebaut. Und die Seiten läßt sich nicht mal validieren.

      Struppi.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln