✔ Background-image geht nicht richtig

LordSikon · 13. September 2005

Hi

eine homepage mit div containern soll an einer stelle ein hintergundbild anzeigen. nach w3c ist der xhtml und css code valid, aber trotzdem zeigt er mir das bild nicht an, wieso?
Ordnerstruktur und alles stimmt, die datein sind auch da!

XHTML Code einer Seite

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
     tolle seite
    </title>
    <link rel="stylesheet" type="text/css" href="style/container1.css" />
    <link rel="stylesheet" type="text/css" href="style/global.css" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    /*<![CDATA[*/
 span.c2 {float:right}
 span.c1 {float:left}
    /*]]>*/
    </style>
  </head>
  <body>
    <!-- Head Start -->
    <div id="head">
      <div id="logo">
        <a href="main.html" title="Startseite"><img
        src="images/page/logo.gif" alt="Start" /></a>
      </div>
      <div id="quicklinks">
        <a href="main.html" title="Aktuelle News">| News</a>&nbsp;&nbsp;&nbsp; <a
        href="main3.html" title="Zu unserem Diskussionsforum">|
        Forum</a>&nbsp;&nbsp;&nbsp; <a href="suche.html" title="Suchfunktion">|
        Suche</a>&nbsp;&nbsp;&nbsp; <a href="rechtliches.html"
        title="Rechtliche Hinweise">| Rechtliches</a>&nbsp;&nbsp;&nbsp; <a
        href="main4.html" title="Zu unserem Impressum">| Impressum</a>&nbsp;&nbsp;&nbsp;
        <a href="main.html" title="Deutsche Sprachversion">| DE</a>&nbsp;&nbsp;&nbsp; <a
        href="main_eng.html" title="English version">| ENG</a>&nbsp;&nbsp;&nbsp;
      </div>
    </div>
    <!-- Head End -->
    <!-- Headimage Start -->
    <div id="headimage">
      &nbsp;
    </div>
    <!-- Headimage End -->
    <!-- Kategorienavigation Start -->
    <div id="mainnavigation">
      <a href="main.html" title="Aktuelles">
      <object id="aktuelles1">
        Aktuelles
      </object></a>
      &nbsp; <a href="main2.html" title="Unsere Produkte">
      <object id="produkte0">
        Produkte
      </object></a>
      &nbsp; <a href="main3.html" title="Zu unserem Diskussionsforum">
      <object id="forum0">
        Forum
      </object></a>
      &nbsp; <a href="main4.html" title="Servicefunktionen der Webseite">
      <object id="service0">
        Service
      </object></a>
    </div>
    <!-- Kategorienavigation End -->
    <!-- Navigation Start -->
    <div id="navigation">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td class="arrow1">
            &nbsp;
          </td>
          <td class="text1">
            <a href="main.html" title="Aktuelles">Aktuelles</a>
          </td>
        </tr>
        <tr>
          <td class="arrow01">
            &nbsp;
          </td>
          <td class="text01">
            <a href="main.html" title="2005">2005</a>
          </td>
        </tr>
        <tr>
          <td class="arrow00">
            &nbsp;
          </td>
          <td class="text00">
            <a href="jobs.html" title="Jobangebote">Jobangebote</a>
          </td>
        </tr>
        <tr>
          <td class="arrow0">
            &nbsp;
          </td>
          <td class="text0">
            <a href="presse.html" title="Presseberichte">Presse</a>
          </td>
        </tr>
      </table>
    </div>
    <!-- Navigation End -->
    <!-- Content Start -->
    <div id="content">
     Content
    </div>
    <!-- Content End -->
  </body>
</html>

PHP ist noch nicht fertig, aber egal.

Und hier der CSS Code dazu:

Code:

#head { 
position:absolute;
top:0px;
left:0px;
width:100%;
height:70px;
border:1px;
border-color:#DAD7D7;
border-style:solid;
background-color:#DAD7D7;
background-image: url(../images/page/bg_head.gif);
font-family:Verdana,Arial,sans-serif;
font-size:10px;
}

#quicklinks {
position:absolute;
right:0px;
top:0px;
height:15px;
background-image: url(../images/page/bg_quicklinks.gif);
}

#headimage { 
position:absolute;
top:71px;
left:0;
width:100%;
height:150px;
border:1px;
border-color:#DAD7D7;
border-style:solid;
background-color:#DAD7D7;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
background-image: url(../images/page/bg_headimage.gif);
}

#headimage01 { 
position:absolute;
top:0px;
left:0;
width:400px;
height:150px;
border:0px;
background-color:#DAD7D7;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
background-image: url(../images/page/headimage1.gif);
}

#mainnavigation { 
position:absolute;
top:222px;
left:0;
width:100%;
height:25px;
border:1px;
border-color:#DAD7D7;
border-style:solid;
background-color:#DAD7D7;
font-family:Verdana,Arial,sans-serif;
font-size:10px;

}

#aktuelles1 { 
position:absolute;
top:0px;
left:200px;
width:100px;
height:15px;
background-color:#FFFFFF;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
color:#000000;
padding-top:3px;
padding-left:50px;
border-left:1px;
border-style:solid;
border-color:#DAD7D7;
}

#produkte0 { 
position:absolute;
top:0px;
left:350px;
width:100px;
height:15px;
background-color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
color:#FFFFFF;
padding-top:3px;
padding-left:50px;
border-left:1px;
border-style:solid;
border-color:#DAD7D7;
}

#forum0 { 
position:absolute;
top:0px;
left:500px;
width:100px;
height:15px;
background-color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
color:#FFFFFF;
padding-top:3px;
padding-left:50px;
border-left:1px;
border-style:solid;
border-color:#DAD7D7;
}

#service0 { 
position:absolute;
top:0px;
left:650px;
width:100px;
height:15px;
background-color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
color:#FFFFFF;
padding-top:3px;
padding-left:50px;
border-left:1px;
border-style:solid;
border-color:#DAD7D7;
}


#navigation { 
position:absolute;
top:249px;
left:0;
width:200px;
min-height:1000px;
border:1px;
border-color:#E5E5E5;
border-style:solid;
background-color:#E5E5E5;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
}

#content { 
position:absolute;
top:249px;
left:200px;
width:600px;
min-height:1000px;
background-color:#FFFFFF;
font-family:Verdana,Arial,sans-serif;
font-size:10px;
padding-top:5px;
padding-left:10px;
}

#content a:link {
color:#C32020;
text-decoration:none;
}

#content a:visited {
color:#C32020;
text-decoration:none;
}

#content a:hover {
color:#C32020;
text-decoration:underline;
}

#content a:active {
color:#C32020;
text-decoration:underline;
}

#quicklinks a:link {
color:#000000;
text-decoration:none;
}

#quicklinks a:visited {
color:#000000;
text-decoration:none;
}

#quicklinks a:hover {
color:#000000;
text-decoration:none;
}

#quicklinks a:active {
color:#000000;
text-decoration:none;
}

#mainnavigation a:link {
color:#000000;
text-decoration:none;
}

#mainnavigation a:visited {
color:#000000;
text-decoration:none;
}

#mainnavigation a:hover {
color:#000000;
text-decoration:none;
}

#mainnavigation a:active {
color:#000000;
text-decoration:none;
}

#navigation a:link {
color:#000000;
font-style:normal;
text-decoration:none;
}

#navigation a:visited {
color:#000000;
font-style:normal;
text-decoration:none;
}

#navigation a:hover {
color:#000000;
font-style:italic;
text-decoration:none;
}

#navigation a:active {
color:#000000;
font-style:italic;
text-decoration:none;
}

Es gibt noch eine weitere CSS Datei, die sollte aber mit den Containern und so nichts zu tun haben.

Grüße

Gumbo · 13. September 2005

Sind die Grafik-Dateien ünerhaupt vorhanden und stimmt die Ressourcenangabe relativ vom Stylesheet gesehen?

LordSikon · 13. September 2005

Alles vorhanden, sowie datein als auch ordnerstruktur. Auch keine Rechtschreibfehler!

Maik · 13. September 2005

Welche der 4 Hintergrundgrafiken wird nicht angezeigt?
Mit welchem Browser hast du die Seite getestet?
Gibt es eine Online-Version zum Testen?
Welche Selektoren und CSS-Eigenschaften sind in der anderen CSS-Datei notiert?

LordSikon · 13. September 2005

ALso hier die global.css

Code:

body {
      margin:0px;
}

img {
border:0px;
}

.arrow1 {
background-image: url(../images/page/nav_pfeil_ganz.gif);
background-repeat:no-repeat;
background-position:center;
width:15px;
height:20px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
background-color:#828282;
}

.text1 {
width:185px;
height:20px;
font-size:10px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
padding-left:3px;
background-color:#828282;
}

.arrow01 {
background-image: url(../images/page/nav_pfeil_ganz.gif);
background-repeat:no-repeat;
background-position:center;
width:15px;
height:12px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
background-color:#A3A3A3;
}

.text01 {
width:170px;
height:12px;
font-size:10px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
padding-left:3px;
background-color:#A3A3A3;
padding-left:15px;
}

.arrow00 {
background-image: url(../images/page/nav_pfeil_halb.gif);
background-repeat:no-repeat;
background-position:center;
width:15px;
height:12px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
background-color:#D2D2D2;
}

.text00 {
width:170px;
height:12px;
font-size:10px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
padding-left:3px;
background-color:#D2D2D2;
padding-left:15px;
}

.arrow0 {
background-image: url(../images/page/nav_pfeil_halb.gif);
background-repeat:no-repeat;
background-position:center;
width:15px;
height:20px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
background-color:#BBBABA;
}

.text0 {
width:185px;
height:20px;
font-size:10px;
border:1px;
border-style:solid;
border-color:#FFFFFF;
padding-left:3px;
background-color:#BBBABA;
}

Online demo:
http://jbo-wolbrechtshausen.de/ae/main.html

Getestet mit:
- IE
- FF

An dem grau-rotem Balken hängt normalerweise noch ein Foto (headimage1.gif), das wird nich angezeigt.

Maik · 13. September 2005

In dem HTML-Source befindet sich ja auch kein DIV mit der ID #headimage01

LordSikon · 13. September 2005

Ok,
die dümmsten fehler haben die einfachsten ursachen

aber, er zeigt das bild nur an, wenn man noch auf aktualisieren klickt. muss ich evtl. mittels nem meta tag noch, sagen, dass er keinen cache verwenden soll oder was, sonst zeigt er da nur grau an und nach aktualisierung zeigt er erst das foto an, wieso das?

Maik · 13. September 2005

Bei mir zeigen die Browsers die Hintergrundgrafik direkt an.

LordSikon · 14. September 2005

naja, dann leigts wohl bei mir oder so.

Danke!

✔ Background-image geht nicht richtig

LordSikon

Mitglied

Gumbo

Erfahrenes Mitglied

LordSikon

Mitglied

Maik

LordSikon

Mitglied

Maik

LordSikon

Mitglied

Maik

LordSikon

Mitglied

Neue Beiträge