• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

xhtml: background-image will nicht

lowsaxonian

lowsaxonian

Neues Mitglied
Moin Forianer,

heute habe ich mich an meinem ersten xhtml-Dokument versucht, klappt auch alles, nur der Background will nicht kommen.

Eingebunden habe ich die css per
HTML: 
<style type="text/css">
@import url("css/gasthof.css");
</style>
in der css steht
Code: 
body
        { background-image:url("/pics/hintergrund.base.jpg");
        background-repeat:repeat;
        background-attachment:fixed;
        background-repeat:repeat; }
Egal, ob ich den Pfad für das Pic in "" setze oder nicht, einen Slash vor den Pfad setze oder sonstwas anstelle, das Ding kommt nicht auf den Monitor.
Abgespeichert habe ich die Datei als *.xml, als *.html funzt es.
Baue ich den Background in den body-tag, ist er auf dem Monitor, aber es zerschiesst mir die Formatierung. Ich stehe auch dem Schlauch und weiß vor lauter googlen nicht mehr, was ich richtig oder falsch mache. Büdde helft mir !

Grüsse aus dem Norden
low
 
Werbung:
Was passiert, wenn du die CSS-Dateien auf die "normale" Art verlinkst?

Im <head>:

Code: 
<link href="css/gasthof.css" media="screen" rel="stylesheet" type="text/css" />

Mit der Endung .html geht es, mit der Endung .xml nicht? Das ist schon etwas sonderbar. :) Ich denke, eine Testseite oder Einblick in den Code wäre gut.
 
mermshaus schrieb:
Was passiert, wenn du die CSS-Dateien auf die "normale" Art verlinkst?
Im <head>
Zum Vergrößern anklicken....
Nichts, gleiches Ergebnis

mermshaus schrieb:
Mit der Endung .html geht es, mit der Endung .xml nicht? Das ist schon etwas sonderbar. :) Ich denke, eine Testseite oder Einblick in den Code wäre gut.
Zum Vergrößern anklicken....
Gerne doch !

Das ist die html
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gasthof zu verkaufen</title>
<meta name="author" content="markus"/>
<meta name='description' content='Gasthof zu verkaufen'/>
<meta name='keywords' content='gasthof, verkaufen, feuerwehr, feuerwehrball, schützenfest, schützenball, königsball, schützen, vereine'/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="21 days"/>
<meta name="page-topic" content="gasthof, immobilien, verkaufen"/>
<meta name="language" content="deutsch, deutschland, de"/>
<meta name="Rating" content="general"/>
<meta name="country" content="germany"/>
<meta name="city" content="bremervörde"/>
<meta name="state" content="niedersachsen"/>
<meta name="zipcode" content="27432"/>
<meta http-equiv="content-Language" content="de"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="content-type" content="text/xml; charset=UTF-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<style type="text/css">
@import url("css/gasthof.css");
</style>
</head>
<body>
<div id="wrapper">
<h1>Gasthof zu verkaufen</h1>

<p>Sehr geehrte Besucher,</p>
<h2>dieser beliebte Gasthof im Osten des Kreises Rotenburg/Wümme steht zum Verkauf.</h2>
<img src="pics/aussen.jpg" width="500" height="375" alt="Ansicht Gasthof" title="Ansicht Gasthof"/>
<h3>Gut in die Vereinslandschaft des Ortes eingebunden, finden alljährlich viele Veranstaltungen dieser Vereine statt. Hier eine kleine Auswahl:</h3>
<ul>
<li>Januar: Königsball (1 Tag)</li>
<li>Februar: Karneval (3 Tage)</li>
<li>Februar: Pietscherball (1 Tag)</li>
<li>März:Feuerwehrball (1 Tag)</li>
<li>Juli: Schützenfest (2 Tage)</li>
<li>September: Herbstabschießen (1 Tag)</li>
<li>Oktober: Konzert der Chöre</li>
<li>November: Geflügel-Ausstellung (2 Tage)</li>
</ul>
<h4>Hinzu kommen die Versammlungen und Jahreshauptversammlungen fast aller Vereine und Vereinigungen, wie z.B. Männerturnverein, Schützenverein (Gesamtverein, Schützinnen,
Jungschützinnen, Jungschützen), Chöre, Geschichts- und Heimatverein, Sozialverband, u.v.m.)</h4>
<p style="font-weight:bold">Der Gasthof ist voll inventarisiert und konzessioniert.</p>

<img style="float:left; padding:30px" src="pics/zimmer.jpg" width="300" height="225" alt="Zimmer im Landhausstil" title="Zimmer im Landhausstil"/>
<p style="margin-top:100px; text-align:left">7 Zimmer im Landhausstil stehen zur Verfügung (alle mit DU/WC)</p>

<img style="float:right; margin-top:100px; padding:30px" src="pics/restaurant.jpg" width="300" height="225" alt="Restaurant" title="Restaurant"/>
<p style="margin-top:200px; text-align:right">ein Restaurant (ca. 45 Plätze, im Mai 2009 aufwändig renoviert und neu eingerichtet)</p>

<img style="float:left; margin-top:100px; padding:30px" src="pics/gaststube.jpg" width="300" height="225" alt="Gaststube" title="Gaststube"/>
<p style="margin-top:200px; text-align:left">eine Gaststube mit 16 Sitzplätzen (zzgl. Tresenplätze)</p>

<img style="float:right; margin-top:100px; padding:30px" src="pics/frst.raum.jpg" width="300" height="225" alt="Frühstücksraum" title="Frühstücksraum"/>
<p style="margin-top:200px; text-align:right">ein Frühstücksraum mit 18 Plätzen</p>

<img style="float:left; margin-top:100px; padding:30px" src="pics/ulmensaal.jpg" width="300" height="225" alt="Ulmensaal" title="Ulmensaal"/>
<p style="margin-top:200px; text-align:left">der Ulmensaal mit Platz für bis zu 90 Personen</p>

<img style="float:right; margin-top:100px; padding:30px" src="pics/saal1.jpg" width="300" height="225" alt="Festsaal" title="Festsaal"/>
<p style="margin-top:200px; text-align:right">der Festsaal für Veranstaltungen bis zu 400 Personen</p>

<img style="float:left; margin-top:100px; padding:30px" src="pics/hinten1.jpg" width="300" height="225" alt="Biergarten" title="Biergarten"/>
<p style="margin-top:200px; text-align:left">sowie ein ruhiger Biergarten auf der Rückseite des Anwesens.</p>

<p style="clear:left; margin-top:180px; font-weight:bold">Geschirr und Besteck ist für alle Veranstaltungen reichlich vorhanden.</p>

<p>Die Küche ist bestens für Großveranstaltungen ausgestattet, hier ein Auszug:</p>

<img style="float:left" src="pics/kueche.jpg" width="500" height="375" alt="Küche" title="Küche"/>
<ul style="margin-top:60px">
<li>2 Konvektomaten (Strom)</li>
<li>1 E-Herd (6 Platten) mit E-Ofen</li>
<li>1 Gasherd (6 Flammen) mit Gas-Ofen</li>
<li>1 Bain Marie (Strom) mit E-Ofen</li>
<li>1 Kipper</li>
<li>1 Großkessel (100L, Strom)</li>
<li>1 Großkessel (150L, Gas)</li>
<li>6 Frosttruhen</li>
<li>2 Frostschränke</li>
<li>2 Kühlschränke</li>
<li>1 Kühlhaus</li>
<li>Töpfe in allen Größen von 2L bis 60L</li>
<li>Pfannen in allen Größen von 15cm bis 45cm</li>
<li>2 Wärmeschränke, 2-türig)</li>
</ul>
<p style="margin-bottom:10%">&nbsp;</p>
<p style="clear:left">Das Restaurant wird derzeit im a-la-Carte-Geschäft betrieben, jeweils Mittags und Abends geöffnet (Montag Mittag geschlossen). Kleinere Gesellschaften bis
45 Personen greifen ebenfalls sehr gerne auf die gemütliche Umgebung zurück.</p>
<h5>Eine gut gepflegte und umfangreiche Website ist ebenfalls vorhanden. Sie finden diese <a href="http:www.schomakers.info/" title="Website">hier</a></h5>
<p>Wenn Sie Interesse an unserem Gasthof haben, senden Sie uns bitte eine Mail mit Bezug auf den Gasthof und Ihren Kontaktdaten, wir rufen Sie gerne zurück: <a href="[email protected]">Bla Blalbla</a> oder <a href="[email protected]">Bla Blala</a></p>
</div>
</body>
</html>
und hier die css
Code: 
* { padding:0; margin:0; }   
   
body        {
        color:#000000;
        font-family:verdana, arial, sans-serif;
        font-size:0.9em; }

body        {
        background-image:url("/pics/hintergrund.base.jpg");
        background-repeat:repeat;
        background-attachment:fixed;
        background-repeat:repeat; }        
        
body        { text-align:center; }

h1        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1.4em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:1.5em; }

h2        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1.3em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:1.5em; }

h3        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1.2em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:1em; }

h4        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1.1em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:1em; }

h5        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:0.5em; }

h6        {
        color:#000000;
        font-family:arial, verdana, sans-serif;
        font-size:1em;
        font-style:normal;
        font-weight:normal;
        margin-top:0.5em;
        margin-bottom:0.5em; }

p         {
        margin-top:0.5em;
        margin-bottom:0.5em; }


a:link    {
        color:#4F4F4F;
        text-decoration:underline;
        font-style:italic;
        font-weight:normal; }

a:hover    {
        color:#000000;
        text-decoration:none;
        background-color:yellow;
        font-style:italic;
        font-weight:normal; }

a:active{
        color:#4F4F4F;
        text-decoration:underline;
        font-style:italic;
        font-weight:normal; }

a:visited    {
            color:#4F4F4F;
            text-decoration:underline;
            font-style:italic;
            font-weight:normal; }

div#wrapper    {
            width:95%;
            height:97%;
            margin:0.4% 0.2% 0.4% 0.8%; overflow:hidden;
            padding:1% 1% 1% 1%;
            float:right;
            text-align:center; }
Abgespeichert als UTF-8 in Notepad++. Wie bereits geschrieben, ist meine erstes Mal in xhtml, nicht zu laut meckern, wenn was nicht stimmt :wink:

Grüsse
low
 
Werbung:
Hm, bei mir lokal klappt es mit den Endungen xml und html gleichermaßen. Ich würde tippen, das ist irgendeine Art von Servereinstellung. Kannst du mal für beide Endungen gucken, was der Firefox als "Type" zurückgibt (Rechtsklick in die Seite -> View Page Info)?

So richtig kann ich mir keinen Reim drauf machen.
 
...die xml habe ich erst mal verworfen, die html gibt er als text/html aus. Ich schätze mal, dass da irgendwo ein dicker Brocken lauert, den ich mir nicht erklären kann. Muss jetzt leider noch etwas arbeiten, komme später wieder.

Ach ja, das image funzt jetzt:
Code: 
body        {
        background-image:url(../pics/hintergrund.base.jpg);
        background-repeat:repeat;
        background-attachment:fixed;
        background-repeat:repeat; }
Warum der jetzt eine Ebene tiefer gehen will, verstehe ich nicht, aber Hauptssache ist mal, es geht.

Grüsse aus dem Norden und vielen Dank für die Unterstützung
low
 
So dele, da bin ich mal wieder kurz da. Zwischenzeitlich ist mir der Rechenknecht 2mal abgek..., ich hab´s dann grad nochmal probiert und siehe, alles funzt. Das xml-Dokument wird als text/xml ausgegeben, der Hintergrund ist sowohl bei der html- wie auch bei der xml-Variante da wo er hinsoll.

Bei Start mit xampp werden in der Fehlerkonsole auch keine Fehler ausgegeben, falls das unter localhost möglich ist.

Ich denke mal, da hat sich irgendwas aufgehangen - besser ein Programm als ich !

Danke und Grüsse
low
 
Werbung:
lowsaxonian schrieb:
Warum der jetzt eine Ebene tiefer gehen will, verstehe ich nicht
Zum Vergrößern anklicken....

Weil Dateien die im CSS referenziert werden ausgehend von der CSS-Datei referenziert werden. Da deine Datei in einem Unterverzeichnis liegt und die Bilder parallel dazu muss man auch erst in das obere Verzeichnis wechseln um die Bilder referenzieren zu können.
 
Moin threadi,

nur zum besseren Verständnis: in html 4.01 habe ich das nie so gemacht. Alle CSS-Sheets sind im Unterverzeichnis "css" abgelegt. Die xml-Datei liegt im Rootverzeichnis, ebenso wie z.B. die Index.php bei meinen anderen Projekten. Dort habe ich ein Unterverzeichnis nur ansprechen müssen, wenn die entsprechende Datei auch in einem Unterverzeichnis lag. Ist das eine xhtml/xml-Besonderheit ?

Grüsse
low
 
Nein, das ist bei XHTML und HTML genau dasselbe. Wichtig ist übrigens nur der MIME-Type (z. B. text/html) im Response-Header (nicht in erster Linie die Dateiendung oder ein meta-Tag im HTML-Dokument). Der MIME-Type bestimmt, als was deine Datei vom Browser interpretiert wird. Zwar sind Webserver meist so konfiguriert, dass sie gewisse Dateiendungen mit einem entsprechenden MIME-Type ausliefern, aber das lässt sich nicht grundsätzlich sagen.

Der XML-Prolog (<?xml ... ?>) ist übrigens meines Wissens völlig optional und eher falsch als richtig. Üblicherweise wird er weggelassen. Im IE6 sorgt er glaube ich dafür, dass eine ansonsten valide Seite dennoch im Quirksmode gerendert wird.

Solange du deine XHTML-Seite nicht mit einem XML-MIME-Type zurückgibst (z. B. application/xhtml+xml), lieferst du übrigens essentiell HTML aus, das lediglich den XML-Syntaxregeln folgt. Das ist das, was 99 % aller Seiten machen, die XHTML nutzen. application/xhtml+xml setzt fast niemand, da der IE das in manchen (allen?) Versionen nicht rendern kann und da XML "Draconian Error Handling" einsetzt. Das bedeutet: Ein Client bricht beim kleinsten Fehler den Rendervorgang der Seite ab und zeigt eine Fehlermeldung (Draconian error handling: still the worst idea ever [dive into mark]).

Mehr Hintergrund hier:

- How Did We Get Here? - Dive Into HTML5
 
Werbung:
Au Backe, ich versteh bestenfalls die Hälfte. Da muss man ja fast ausgebildeter Informatiker sein !

Ist denn mein oben eingefügtes Dokument (der Header) bis auf das (<?xml ... ?>) korrekt ? Beide Validatoren haben nichts zu meckern, also kann´s so schlimm nicht sein 8)

Erstmal Danke für die Ausführungen, muss kurz mal arbeiten, schau später noch mal rein und werde mir Deine Ausführungen dann in aller Ruhe zu Gemüte führen.

Grüsse
low
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben