El Supremo: Element nur in Opera richtig positioniert

SELF-Forum

Element nur in Opera richtig positioniert

El Supremo
– Informationen zu den Bewertungsregeln

Hallo,

ich bin gerade dabei, ein Layout zu entwerfen. Allerdings will sich ein Bild nicht so positionieren lassen, wie ich es gerne hätte. In Opera funktioniert es, in IE und FF aber nicht. HTML und CSS sind valide. Da das Dokument in strict geschrieben ist, gehe ich nicht von einem Problem mit dem Box-Model aus.
Das Problem ist, dass das untere Bild, dass sich eigentlich ganz unten in der "backgroundbox" befinden sollte, am unteren Rand des Browserfensters befindet. Wer will, kann sich das Problem hier ansehen.
Es wäre schön, wenn sich einer den Code mal ansehen und mir einen Tipp geben könnte.

<!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=ISO-8859-1">  
  <meta http-equiv="Content-Style-Type" content="text/css">  
  <title>Test</title>  
  <link rel="stylesheet" type="text/css" href="formatierung.css">  
 </head>  
 <body>  
 <div class="backgroundbox">  
  <img alt="" src="rahmen_oben.gif" width="750" height="100" class="rand_oben">  
  <img alt="" src="rahmen_unten.gif" width="750" height="100" class="rand_unten">  
  <div class="contentbox">abc</div>  
 </div>  
 </body>  
</html>

Und die dazugehörenden Stylesheets:

body  
 {  
  background-image:url(hintergrund.jpg);  
  background-attachment:fixed;  
  background-repeat:repeat;  
  margin-top:25px;  
  margin-bottom:25px;  
 }  
  
.backgroundbox  
 {  
  height:950px;  
  width:750px;  
  margin-left:auto;  
  margin-right:auto;  
  background-image:url(background_gesamt.jpg);  
  background-repeat:repeat-y;  
 }  
  
.contentbox  
 {  
  margin-left:120px;  
  margin-right:120px;  
  padding-top:25px;  
  padding-top:25px;  
 }  
  
.rand_oben  
 {  
  position:absolute;  
  top:25px;  
 }  
  
.rand_unten  
 {  
  position:absolute;  
  bottom:25px;  
 }
--
Ich weiß, dass ich nichts weiß. (Sokrates)
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Element nur in Opera richtig positioniert

    Froschpopo
    – Informationen zu den Bewertungsregeln

    Hi,

    position:relative /* weil relativ zur übergelegenen div*/

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Element nur in Opera richtig positioniert

      Cheatah
      – Informationen zu den Bewertungsregeln

      Hi,

      position:relative /* weil relativ zur übergelegenen div*/

      ähm. position:relative richtet relativ zur _eigenen_ Position aus.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Element nur in Opera richtig positioniert

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    ich bin gerade dabei, ein Layout zu entwerfen. Allerdings will sich ein Bild nicht so positionieren lassen, wie ich es gerne hätte. In Opera funktioniert es, in IE und FF aber nicht.

    danke, an mir war bisher vorbei gegangen, dass Opera dermaßen gigantische Probleme mit der absoluten Positionierung hat. Ich werde die Angelegenheit mal näher untersuchen, wenn es meine Zeit zulässt.

    Das Problem ist, dass das untere Bild, dass sich eigentlich ganz unten in der "backgroundbox" befinden sollte,

    Warum meinst Du, dass es das sollte?

    <div class="backgroundbox">

    <img alt="" src="rahmen_oben.gif" width="750" height="100" class="rand_oben">
      <img alt="" src="rahmen_unten.gif" width="750" height="100" class="rand_unten">
      <div class="contentbox">abc</div>
    </div>

      
Woah. Welche von der Darstellung vollständig unabhängigen Beweggründe haben zu den Klassennamen, den inhaltlichen Elementen (<img>) sowie der Tatsache, dass Du Klassen einsetzt, geführt?  
  

> Und die dazugehörenden Stylesheets:  
  
Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, welches eine von "static" unterschiedliche position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.  
  
Auswendig lernen. Und irgendwann mache ich mir dafür noch einen Hotkey. Am besten gleich morgen. Ja, genau, morgen. Oder übermorgen.  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Element nur in Opera richtig positioniert

      El Supremo
      – Informationen zu den Bewertungsregeln

      Das Problem ist, dass das untere Bild, dass sich eigentlich ganz unten in der "backgroundbox" befinden sollte,

      Warum meinst Du, dass es das sollte?

      Dass es sich dort befinden sollte, bedeutet, dass ich versucht habe, es so zu positionieren, dass dies meiner Meinung nach eintreten sollte, dies aber nicht geschehen ist. So war es zumindest zu dem Zeitpunkt, als ich den Thread erstellt habe. Mehr dazu unten...

      [...]mein Code[...]

      Woah. Welche von der Darstellung vollständig unabhängigen Beweggründe haben zu den Klassennamen, den inhaltlichen Elementen (<img>) sowie der Tatsache, dass Du Klassen einsetzt, geführt?

      Spricht denn etwas dagegen, Klassen zu verwenden?! Oder ist mir jetzt der Witz entgangen?
      Das Selbe gilt für die Image Tags: was spricht gegen deren Verwendung in diesem Zusammenhang?

      Die absolute Positionierung richtet sich nach dem innersten Vorfahrenelement, welches eine von "static" unterschiedliche position-Angabe besitzt, bei Nichtvorhandensein eines solchen nach dem Viewport.

      Das wusste ich zwar bereits, hatte mir aber nicht klar gemacht, was die Konsequenzen daraus sind. Danke dafür, auch wenn ein kurzer, konkreter Hinweis auf eine Lösung (und nicht nur das Grundprinzip) noch nett gewesen wäre. Naja, es ging auch so, ich will mich nicht beklagen.

      Meine jetzt gewählte Lösung ist, beim <div>, welches die Bilder enthält, einfach position:relative; an zu geben und sonst keine Angaben zur Position zu machen. Spricht da etwas dagegen?

      Gute Nacht...

      --
      Ich weiß, dass ich nichts weiß. (Sokrates)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Element nur in Opera richtig positioniert

        El Supremo
        – Informationen zu den Bewertungsregeln

        So, ich habe jetzt ein wenig weitergebastelt und die Image Tags durch Div Tags mit Backgroundimage ersetzt. Könnte sich vielleicht mal jemand den Code ansehen und mir sagen, ob bzw. was daran noch unsauber ist?

        Hier kann man sich das ganze auch "in Aktion" ansehen.

        <!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=ISO-8859-1">  
  <meta http-equiv="Content-Style-Type" content="text/css">  
  <title>Test</title>  
  <link rel="stylesheet" type="text/css" href="formatierung.css">  
 </head>  
 <body>  
 <div class="backgroundbox">  
  <div class="backgroundbox_oben"></div>  
  <div class="contentbox">  
  <img src="header.gif" class="header" alt="SSV Auenstein, Abteilung Tischtennis" width="621" height="101">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  
  </div>  
  <div class="backgroundbox_unten"></div>  
 </div>  
 </body>  
</html>

        Und die Stylesheets:

        body  
 {  
  background-image:url(hintergrund.jpg);  
  background-attachment:fixed;  
  background-repeat:repeat;  
  margin-top:35px;  
  margin-bottom:35px;  
 }  
  
.backgroundbox  
 {  
  position:relative;  
  width:750px;  
  margin-left:auto;  
  margin-right:auto;  
  background-image:url(background_gesamt.jpg);  
  background-repeat:repeat-y;  
  border-style:solid;  
  border-color:red;  
  border-width:1px;  
 }  
  
.backgroundbox_oben  
 {  
  background-image:url(rahmen_oben.gif);  
  width:750px;  
  height:100px;  
  position:absolute;  
  top:0px;  
  left:0px;  
 }  
  
.backgroundbox_unten  
 {  
  background-image:url(rahmen_unten.gif);  
  width:750px;  
  height:100px;  
  position:absolute;  
  bottom:0px;  
  left:0px;  
 }  
  
.contentbox  
 {  
  margin-left:100px;  
  margin-right:100px;  
  padding-top:25px;  
  padding-bottom:25px;  
  position:relative;  
  text-align:justify;  
 }  
  
img  
 {  
  display:block;  
 }  
  
.header  
 {  
  position:relative;  
  left:-35px;  
  margin-bottom:35px;  
 }

        Ein kleines Problem gibts auch noch. Im IE ist die "backgroundbox" breiter als sie sein sollte. Um das zu verdeutlichen auch der rote Rahmen. Laut eigentlichger Breitenangabe wäre sie genauso breit wie der schwarze Rahmen.
        Übrigens würde mich noch sehr interessieren, was Cheatah an der Verwendung von Klassennamen aus zu setzen hatte. Ich bin mir in der Hinsicht keines Fehlers bewusst.

        Wäre schön, wenn mir da jemand weiterhelfen könnte.

        --
        Ich weiß, dass ich nichts weiß. (Sokrates)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln