Stehe aufm CSS-Schlauch ...

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

Fein

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

***Sven*** · #2 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

Narodnaja · #3 22-09-2006, 08:29

*wunder*

Nagut, jetzt geht das immerhin erstmal, danke

Das fixieren des Hintergrundbildes bei langem Text geht aber dann wieder nicht.

Ohne die Angaben klappts beim Opera und FF, beim IE nur mit den Angaben. Grrr...

/edit:
So einfach kanns sein:

PHP-Code:


			
* html #inhalt {

    background-attachment: fixed;

    background-position: center;

}

und oben raus mit den beiden Anweisungen. Dann klappts auch mit der Nachbarin, und zwar valide. Fein fein.

Unvalide wirds erst wieder, wenn ich die IE-Scrollbalken behandeln muss ... hrmpf. Aber man kann halt nicht alles haben.

Danke nochmal @ Sven

*EEBKiller* · #4 22-09-2006, 13:40

Zitat:

Zitat von Narodnaja

Unvalide wirds erst wieder, wenn ich die IE-Scrollbalken behandeln muss ... hrmpf. Aber man kann halt nicht alles haben.

1. Scrollbalken macht der IE nur im Quirks Modus, im normalen Modus lässt er diese Angaben auch untern Tisch fallen

Ausser, du machst das hier als erstes in dein Dokument und benutzt als DOCTYPE einen XHTML 1.0 oder den XHTML 1.1:

PHP-Code:


			
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>

Alles ausser IE stört diese Zeile nicht, sie finden sie sogar OK. IE 6 und abwärts spackt dann aber rum und fällt in den Quirks Modus zurück. Wobei das natürlich nicht wirklich gerade die beste Lösung ist, aber sie funktioniert. Und wenn du eine Seite im Standardkonformen Modus geschrieben hast, wird sie im Quirks Modus zu 99% genauso angezeigt.

2. Man kanns trotzdem Valid gestalten:

PHP-Code:


			
<!--[if lt IE 7]>
<style type="text/css">
/* Stuff for IE only */
}
</style>
<![endif]-->

Jedes Programm inklusive Validator, Mozilla, Opera erkennt diesen Block (korrekterweise) als Kommentar. Nur IE (6 und abwärts) erkennt diesen Switch und interpretiert den Inhalt auch

Beachte, dass du solche CSS-"Hacks" nur in den <head> der jeweiligen Seiten klatschen kannst, das geht nicht irgendwo im Quelltext oder gar einem ausgelagerten CSS

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken
Ansicht	Thema bewerten
Zur Linear-Darstellung wechseln Hybrid-Darstellung Zur Baum-Darstellung wechseln	Thema bewerten:

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