CommNews Forum Home  

Zurück   CnC Foren > Verschiedenes > Tech-Support / Tech-Talk

Antworten
 
Themen-Optionen Thema bewerten Ansicht
  #1  
Alt 20-09-2006, 23:49
Benutzerbild von Narodnaja
Narodnaja Narodnaja ist offline
Kirov Aufpumper

 
Registriert seit: Aug 2001
Ort: kurz vor München
Beiträge: 1.182
Narodnaja hat noch keine Bewertung oder ist auf 0
Narodnaja eine Nachricht über ICQ schicken Narodnaja eine Nachricht über MSN schicken
OL Nick: Narodnaja
Style: vBulletin Default
Question Stehe aufm CSS-Schlauch ...

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;
border1px solid green;
vertical-align:bottom;
}

.
inhalt {
background-imageurl(./testbild.jpg);
background-repeatno-repeat;
background-attachment:fixed;
background-positioncenter;
overflow:auto;
width:810px;height:350px;
border1px 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.
__________________
Manche Leute sagen, Fußball ist ein Spiel auf Leben und Tod.
Ich mag diese Haltung nicht. Es ist viel ernster als das.
Mit Zitat antworten
  #2  
Alt 21-09-2006, 02:24
Benutzerbild von Sven
Sven Sven ist offline
Tech-Admin

 
Registriert seit: Dec 2000
Ort: Neuss
Beiträge: 37.842
Sven ist ein C...
OL Nick: xysvenxy
Style: cncboard
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.
__________________
Zitat:
Wir sind im Augenblick dabei, zu prüfen, ob es im öffentlichen Interesse liegt, ihnen mitzuteilen, ob wir die Informationen haben, die Sie erbitten, und ob es, sollte das der Fall sein, im öffentlichen Interesse liegt, Ihnen diese Informationen zur Verfügung zu stellen.
Mit Zitat antworten
  #3  
Alt 21-09-2006, 21:20
Benutzerbild von Narodnaja
Narodnaja Narodnaja ist offline
Kirov Aufpumper

 
Registriert seit: Aug 2001
Ort: kurz vor München
Beiträge: 1.182
Narodnaja hat noch keine Bewertung oder ist auf 0
Narodnaja eine Nachricht über ICQ schicken Narodnaja eine Nachricht über MSN schicken
OL Nick: Narodnaja
Style: vBulletin Default
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 
    
{
    
colorwhite;
    
background-color#003;
    
margin0px
    
}

#mittellinie        
    
{
    
colorwhite;
    
background-color#0ff;
    
text-aligncenter;
    
positionabsolute;
    
top50%;
    
left0px;
    
width100%;
    
height1px;
    
overflowvisible;
    
visibilityvisible;
    
displayblock
    
}

#rahmen    
    
{
    
font-familyVerdanaGenevaArialsans-serif;
    
background-color#f00;
    
color white;
    
margin-left: -401px;
    
positionabsolute;
    
top: -288px;
    
left50%;
    
width802px;
    
height576px;
    
visibilityvisible;
    
text-alignleft
    
}
    
#oben {
    
overflow:hidden;
    
width:800px;height:222px;
    
padding:0px;
    
border1px solid green;
    
vertical-align:bottom;
    
text-aligncenter
}

#inhalt {
    
background-image:  url(./testbild.gif);
    
background-repeatno-repeat;
    
background-attachmentfixed;
    
background-positioncenter;
    
overflow:auto;
    
width:800px;height:350px;
    
border1px 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 ?
__________________
Manche Leute sagen, Fußball ist ein Spiel auf Leben und Tod.
Ich mag diese Haltung nicht. Es ist viel ernster als das.
Mit Zitat antworten
  #4  
Alt 21-09-2006, 21:39
Benutzerbild von Sven
Sven Sven ist offline
Tech-Admin

 
Registriert seit: Dec 2000
Ort: Neuss
Beiträge: 37.842
Sven ist ein C...
OL Nick: xysvenxy
Style: cncboard
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 )
__________________
Zitat:
Wir sind im Augenblick dabei, zu prüfen, ob es im öffentlichen Interesse liegt, ihnen mitzuteilen, ob wir die Informationen haben, die Sie erbitten, und ob es, sollte das der Fall sein, im öffentlichen Interesse liegt, Ihnen diese Informationen zur Verfügung zu stellen.
Mit Zitat antworten
  #5  
Alt 21-09-2006, 21:40
Benutzerbild von Narodnaja
Narodnaja Narodnaja ist offline
Kirov Aufpumper

 
Registriert seit: Aug 2001
Ort: kurz vor München
Beiträge: 1.182
Narodnaja hat noch keine Bewertung oder ist auf 0
Narodnaja eine Nachricht über ICQ schicken Narodnaja eine Nachricht über MSN schicken
OL Nick: Narodnaja
Style: vBulletin Default
Fein merci !
Und: schönen Aufenthalt noch *g*
__________________
Manche Leute sagen, Fußball ist ein Spiel auf Leben und Tod.
Ich mag diese Haltung nicht. Es ist viel ernster als das.
Mit Zitat antworten
  #6  
Alt 22-09-2006, 02:37
Benutzerbild von Sven
Sven Sven ist offline
Tech-Admin

 
Registriert seit: Dec 2000
Ort: Neuss
Beiträge: 37.842
Sven ist ein C...
OL Nick: xysvenxy
Style: cncboard
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 
    

    
colorwhite
    
background-color#003; 
    
margin0px 
    


#mittellinie         
    

    
colorwhite
    
background-color#0ff; 
    
text-aligncenter
    
positionabsolute
    
top50%; 
    
left0px
    
width100%; 
    
height1px
    
overflowvisible
    
visibilityvisible
    
displayblock 
    


#rahmen     
    

    
font-familyVerdanaGenevaArialsans-serif
    
background-color#f00; 
    
color white
    
margin-left: -401px
    
positionabsolute
    
top: -288px
    
left50%; 
    
width802px
    
height576px
    
visibilityvisible
    
text-alignleft 
    

     
#oben { 
    
overflow:hidden
    
width:800px;height:222px
    
padding:0px
    
border1px solid green
    
vertical-align:bottom
    
text-aligncenter 


#inhalt { 
    
background-image:  url(testbild.gif); 
    
/* background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; */
    
overflow:auto
    
width:800px;height:350px
    
border1px 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
__________________
Zitat:
Wir sind im Augenblick dabei, zu prüfen, ob es im öffentlichen Interesse liegt, ihnen mitzuteilen, ob wir die Informationen haben, die Sie erbitten, und ob es, sollte das der Fall sein, im öffentlichen Interesse liegt, Ihnen diese Informationen zur Verfügung zu stellen.

Geändert von Sven (22-09-2006 um 02:45 Uhr).
Mit Zitat antworten
  #7  
Alt 22-09-2006, 08:29
Benutzerbild von Narodnaja
Narodnaja Narodnaja ist offline
Kirov Aufpumper

 
Registriert seit: Aug 2001
Ort: kurz vor München
Beiträge: 1.182
Narodnaja hat noch keine Bewertung oder ist auf 0
Narodnaja eine Nachricht über ICQ schicken Narodnaja eine Nachricht über MSN schicken
OL Nick: Narodnaja
Style: vBulletin Default
*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-attachmentfixed;
    
background-positioncenter;

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
__________________
Manche Leute sagen, Fußball ist ein Spiel auf Leben und Tod.
Ich mag diese Haltung nicht. Es ist viel ernster als das.

Geändert von Narodnaja (22-09-2006 um 10:19 Uhr).
Mit Zitat antworten
  #8  
Alt 22-09-2006, 13:40
Benutzerbild von EEBKiller
EEBKiller EEBKiller ist offline
Moderator

 
Registriert seit: May 2002
Ort: Irgendwo in Bayern
Beiträge: 8.989
EEBKiller hat noch keine Bewertung oder ist auf 0
OL Nick: EEBKiller
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
__________________

Raubkopierer, IT-Experten und E-Gamer in den Knast !!!
Kinderschänder, Sexualstraftäter, Bankräuber und Mörder in die Gesellschaft reintegrieren,
wir brauchen Platz für Computer-Kriminelle in den Gefängnissen !!!

Geändert von EEBKiller (22-09-2006 um 13:45 Uhr).
Mit Zitat antworten
Antworten

Lesezeichen


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

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist An.
Smileys sind An.
[IMG] Code ist An.
HTML-Code ist Aus.
Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:00 Uhr.


Powered by vBulletin Version 3.7.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Template-Modifikationen durch TMS

Affiliates
United Forum GetBoinKeD cnc.onlinewelten.de