Stehe aufm CSS-Schlauch ...

Narodnaja · #1 20-09-2006, 23:49

Vielleicht kann mir mal jemand meinen Denkfehler erklären.

Zwei divs, 810px breit, direkt untereinander. Eines normal mit Inhalt, das zweite mit Hintergrundbild.

Folgender Code: (mal mit Tags)

PHP-Code:


			
<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html;">

<style type="text/css">

.oben {

overflow:hidden;

width:810px;height:225px;

padding:0px;

border: 1px solid green;

vertical-align:bottom;

}



.inhalt {

background-image: url(./testbild.jpg);

background-repeat: no-repeat;

background-attachment:fixed;

background-position: center;

overflow:auto;

width:810px;height:350px;

border: 1px solid green;

}

</style>

</head>



<body bgcolor="#000000">



<div class="oben">

</div>



<div class="inhalt">

</div>



</center>

</body>

</html>

Eigentlich sollte doch die background-position: center; in der inhalt-class das Hintergrundbild zentriert bezüglich des entsprechenden HTML-Elementes ausrichten, also des definierten divs. Soweit dachte ich eigentlich kenne ich CSS ...

Der IE (gerade der !!!) macht das auch. Opera und Firefox dagegen richten das Bild zentriert auf die Seite aus. Was natürlich zur Folge hat, dass das Bild absolut nicht da ist, wo es sein soll. Nur: Warum ???

Wenn mir irgendjemand nen Stein an die Birne werfen kann, bin ich dankbar.

***Sven*** · #2 21-09-2006, 02:24

Ich würd als erstes einen gültigen DocType etc. definieren um zu verhindern, daß der IE sich in den Quirksmodus versetzt und dann so einige Konstrukte umsetzt die nach HTML gar nicht gehen dürften.

Dann hast du noch unterschiedliche Notationen in den CSS Angaben (mal mit, mal ohne Leerzeichen) und die <div>s haben unnötigen Inhalt (Zeilenumbruch und etwaige Leerzeichen).
Zu guter Letzt steht da ein </center> ohne das ein <center> davor wäre - vermutlich der eigentliche Grund für eigenartiges Browserverhalten.
Versuch doch mal das Ganze komplett ohne depricated HTML-Tags (also auch kein bgcolor= - das macht man in css mit body {...}) und dann durch den W3C Validator gejagt.
Erst wenn der keine Fehler mehr meldet solltest du dich darüber wundern, daß verschiedene Browser deine Seiten unterschiedlich darstellen.

Narodnaja · #3 21-09-2006, 21:20

Zitat:

Zitat von Narodnaja

Werde das mal durchtesten.
Eh - der center-Tag und einiges anderes sind noch fälschlicherweise übrig geblieben, wie ich unnötigen Inhalt gelöscht habe, der wird natürlich auch eröffnet

Validator wäre eine Idee

war zu spät gestern.
Ich meld mich heute Abend nochmal. Verdammter Quirks-Mode.

Ich habs mir nochmal angeschaut. Es war natürlich alles andere als valide, aber dummerweise hilft das auch nix ...
Hier mal verlinkt, diesmal CSS2 und HTML4.01 strict valide.
Der Quellcode ist hier (neuer Versuch mit Hilfe des bekannten Dead-Center-Beispiels), diesmal komplett:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css" media="screen"><!--

body 

    {

    color: white;

    background-color: #003;

    margin: 0px

    }



#mittellinie        

    {

    color: white;

    background-color: #0ff;

    text-align: center;

    position: absolute;

    top: 50%;

    left: 0px;

    width: 100%;

    height: 1px;

    overflow: visible;

    visibility: visible;

    display: block

    }



#rahmen    

    {

    font-family: Verdana, Geneva, Arial, sans-serif;

    background-color: #f00;

    color : white;

    margin-left: -401px;

    position: absolute;

    top: -288px;

    left: 50%;

    width: 802px;

    height: 576px;

    visibility: visible;

    text-align: left

    }

    

#oben {

    overflow:hidden;

    width:800px;height:222px;

    padding:0px;

    border: 1px solid green;

    vertical-align:bottom;

    text-align: center

}



#inhalt {

    background-image:  url(./testbild.gif);

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

    overflow:auto;

    width:800px;height:350px;

    border: 1px solid green

}



</style>



</head>

<body>

<div id="mittellinie">

            <div id="rahmen">

                <div id="oben">

                </div>

                

                <div id="inhalt">

                </div>

            </div>

</div>

<p>

 <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://faenger.de/csstest.html">

  <img style="border:0;width:88px;height:31px"

       src="http://jigsaw.w3.org/css-validator/images/vcss" 

       alt="Valid CSS!" >

 </a>

</p> 

<p>

    <a href="http://validator.w3.org/check?uri=referer"><img

        src="http://www.w3.org/Icons/valid-html401"

        alt="Valid HTML 4.01 Strict" height="31" width="88"></a>

  </p>

<p>

  <a href="http://www.validome.org/referer">

    <img style="border:none"

         src="http://www.validome.org/images/set2/valid_html_4_0_1.gif"

         alt="Valid HTML 4.01" width="88" height="31">

  </a>

</p>

 </body>

</html>

Schau dir das mal im IE, Firefox und Opera (den ich benutze) an. Ich kapier nicht, warum die Zentrierung des verdammten Hintergrundbildes bei Opera 9.01 und Firefox 1.5.0.7 auf die Gesamtseite erfolgt, und nicht bezüglich des divs, in dem es steckt

Hat jemand (Sven ?) eine Idee ?

***Sven*** · #4 21-09-2006, 21:39

Mhmmm, ich schau mir das mal heute abend in Ruhe vom Hotelzimmer aus an.... (jetzt sag nicht es sei schon Abend, hier ist es erst 15:40

)

Narodnaja · #5 21-09-2006, 21:40

Fein

merci !
Und: schönen Aufenthalt noch *g*

***Sven*** · #6 22-09-2006, 02:37

Keine Ahnung warum, aber wenn du ein paar Angaben für den Container mit dem Hintergrundbild weglässt funktioniert es einwandfrei:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Test</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<style type="text/css" media="screen"><!-- 
body 
    { 
    color: white; 
    background-color: #003; 
    margin: 0px 
    } 

#mittellinie         
    { 
    color: white; 
    background-color: #0ff; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 0px; 
    width: 100%; 
    height: 1px; 
    overflow: visible; 
    visibility: visible; 
    display: block 
    } 

#rahmen     
    { 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    background-color: #f00; 
    color : white; 
    margin-left: -401px; 
    position: absolute; 
    top: -288px; 
    left: 50%; 
    width: 802px; 
    height: 576px; 
    visibility: visible; 
    text-align: left 
    } 
     
#oben { 
    overflow:hidden; 
    width:800px;height:222px; 
    padding:0px; 
    border: 1px solid green; 
    vertical-align:bottom; 
    text-align: center 
} 

#inhalt { 
    background-image:  url(testbild.gif); 
    /* background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; */
    overflow:auto; 
    width:800px;height:350px; 
    border: 1px solid green 
} 

</style> 

</head> 
<body> 
<div id="mittellinie"> 
            <div id="rahmen"> 
                <div id="oben"> 
                </div> 
                 
                <div id="inhalt"> 
                </div> 
            </div> 
</div> 
<p> 
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://faenger.de/csstest.html"> 
  <img style="border:0;width:88px;height:31px" 
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" > 
</a> 
</p> 
<p> 
    <a href="http://validator.w3.org/check?uri=referer"><img 
        src="http://www.w3.org/Icons/valid-html401" 
        alt="Valid HTML 4.01 Strict" height="31" width="88"></a> 
  </p> 
<p> 
  <a href="http://www.validome.org/referer"> 
    <img style="border:none" 
         src="http://www.validome.org/images/set2/valid_html_4_0_1.gif" 
         alt="Valid HTML 4.01" width="88" height="31"> 
  </a> 
</p> 
</body> 
</html>

Die fragliche Stelle ist jetzt nur auskommentiert.

Da dein Hintergrundbild eh genau so groß ist wie der Container sind die Angaben auch recht überflüssig

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)