XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS in HTML - Hintergrundbild wird nicht angezeigt (http://xhtmlforum.de/showthread.php?t=48305)

fossy 10.10.2007 15:28

CSS in HTML - Hintergrundbild wird nicht angezeigt
 
hi leute,

ich bin neu hier und auch die materie rund um html und css sind mir nicht wirklich vertraut. also vielleicht schon mal vorab sorry für vielleicht "blöde" fragen.

ich habe ein problem mit einer homepage vorlage die ich gerade bearbeite.
hier der quellcode der seite:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head><title>Old
english blog- title</title>

<meta http-equiv="Content-language" content="css"> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta
name="description" content=" "> <meta
name="keywords" content=" ">

<style type="text/css">

html{
padding:0;
margin:0;
}
body
{
background: url("img/main_pattern.gif") top left repeat;
background-color: black;
font-family: arial;
font-size: 12px;
color: #272525;
}
#Container
{
width: 826px;
margin: 0px auto;
}
#TopPart
{
width: 826px;
height: 296px;
float: left;
background-color: white;
}
#Header
{
width: 826px;
height: 246px;
float: left;
background: url("img/header2.jpg") top left no-repeat;
color: white;
font-family: Candara;
font-size: 33px;
text-align: center;
padding-top: 20px;
}
#Top_left
{
width: 312px;
height: 50px;
float: left;
}
#Top_right
{
width: 514px;
height: 50px;
float: right;
}
input
{
float: left;
height: 15px;
width: 180px;
}
.button
{
float: right;
width: 77px;
height: 20px;
background: none;
border: none;
color: #f6b9ba;
font-size: 12px;
}
.button:hover
{
text-decoration: underline;
}
p
{
text-align: justify;
}
#Menu
{
width: 514px;
height: 29px;
float: right;
}
#Menu_bottom
{
height: 21px;
float: right;
width: 264px;
background: url("img/button_shadow.gif") top left no-repeat;
}
#Menu a
{
width: 88px;
line-height: 29px;
vertical-align: middle;
float: right;
background: url("img/button.gif") top left no-repeat;
text-align: center;
color: #f6b9ba;
text-decoration: none;
}
#Menu a:hover, #Menu a.active
{
text-decoration: underline;
}
#CentralPart
{
width: 826px;
clear: both;
background-color: white;
}
#LeftPart
{
width: 564px;
float: left;
color: #272525;
}
#RightPart
{
float: right;
width: 262px;
background: url("img/pattern1.gif") top left repeat;
padding-bottom: 10px;
}
.cleaner
{
clear: both;
}
#Page
{
width: 564px;
padding-top: 15px;
}
h2
{
font-size: 15px;
line-height: 28px;
font-weight: bold;
}
h4
{
font-size: 13px;
}
h3
{
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
h5
{
font-size: 12px;
line-height: 20px;
}
.article_head
{
background: url("img/gradient.gif") top left repeat-y;
padding-top: 3px;
height: 70px;
}
.arrow
{
background: url("img/arrow2.gif") top left no-repeat;
width: 39px;
height: 60px;
float: left;
margin-top: 5px;
padding-right: 10px;
}
.article_body p
{
padding: 15px;
}
.article_comments a
{
color: black;
}
.article_comments
{
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
}
.photo
{
padding-top: 8px;
padding-bottom: 5px;
float: left;
padding-right: 8px;
}
.rightpart_header
{
color: #272525;
font-size: 15px;
font-weight: bold;
background: url("img/arrow.gif") top left no-repeat;
background-position: 0px 10px;
line-height: 20px;
text-indent: 23px;
padding-top: 10px;
}
#RightPart a
{
font-size: 13px;
display: block;
padding-left: 23px;
line-height: 25px;
color: #272525;
}
.main
{
text-indent: 23px;
}
.child
{
text-indent: 36px;
}
#Bottom
{
width: 826px;
background: url("img/bottom.gif") top left repeat-x;
height: 21px;
float: left;
}
.down_left
{
font-size: 11px;
text-align: left;
padding-top: 4px;
padding-left: 15px;
float: left;
color: white;
}
.down_right
{
font-size: 11px;
text-align: right;
padding-top: 4px;
float: right;
padding-right: 8px;
}
.down_right a, .down_left a
{
text-decoration: none;
color: white;
}
.down2
{
padding-top: 10px;
float: right;
}
.down2 img
{
border: 0px;
}
</style></head>
<body><div id="WholePage">
<div id="Inner"><div id="Container"> <div id="TopPart"> <div id="Header"><br></div>
<div id="Top_left">
</div> <div id="Top_right"> <div id="Menu"><a class="homepage active" href="?page=homepage"><span>Impressum</span></a>
<a class="about-us" href="?page=homepage"><span>Kontakt</span></a>
<a class="products" href="?page=homepage"><span>Home</span></a>
</div> <div id="Menu_bottom"></div> </div></div><div id="CentralPart"> <div id="LeftPart"><div id="Page"> <div id="article1"> <div class="article_head"> <div class="arrow"></div><h5>18.7.2007</h5>
<h2>LOREM IPSUM DOLOR SIT AMET,
CONSECTETUEROREM</h2> <h4>autor: lorem ipsum</h4> </div>
<div class="article_body"> <p>Lorem </p>
</div> <p class="article_comments"> <a class="comments" href="?page=homepage"><span>Comments
(10)</span></a> </p> </div> <div id="article2"> <div class="article_head"> <div class="arrow"></div> <h5>3.7.2007</h5> <h2>MAECENAS
SUSCIPIT PURUS A PEDE. NULLA CONSECTETUR</h2> <h4>autor:
lorem ipsum</h4> </div> <div class="article_body">
<p>Lorem </p> </div>
<p class="article_comments"> <a class="comments" href="?page=homepage"><span>Comments (10)</span></a>
</p> </div> </div> </div> <div id="RightPart"> <div id="Pages"> <div class="rightpart_header">Menü</div> <font face="Arial" size="2"><#CUSTOM
Feld=Liste_Kaufobjekte></font>
<p><font face="Arial" size="2"><#CUSTOM
Feld=Liste_Mietobjekte></font>
<a class="main" href="?page=homepage"><span>Page
1</span></a>
<a class="child" href="?page=homepage"><span>-
Page 1</span></a> <a class="main" href="?page=homepage"><span>Page 2</span></a>
<a class="main" href="?page=homepage"><span>Page
3</span></a> </p></div> <div id="Archives">
<div class="rightpart_header">Archives</div> <a href="?page=homepage"><span>October 2006</span></a>
<a href="?page=homepage"><span>November 2006</span></a>
<a href="?page=homepage"><span>December 2006</span></a>
<a href="?page=homepage"><span>January 2007</span></a>
</div> <div id="Categories"> <div class="rightpart_header">Categories</div> <a class="main" href="?page=homepage"><span>Categorie
1</span></a> <a class="child" href="?page=homepage"><span>- Categorie 1 child 1</span></a>
<a class="child" href="?page=homepage"><span>-
Categorie 1 child 2</span></a> <a class="child" href="?page=homepage"><span>- Categorie 1 child 3</span></a>
<a class="main" href="?page=homepage"><span>Categorie
2</span></a> <a class="child" href="?page=homepage"><span>- Categorie 2 child 1</span></a>
<a class="child" href="?page=homepage"><span>-
Categorie 2 child 2</span></a> </div> <div id="Friends"> <div class="rightpart_header">Friends</div>
<a href="?page=homepage"><span>Peter</span></a>
<a href="?page=homepage"><span>Susan</span></a>
<a href="?page=homepage"><span>Jane</span></a>
<a href="?page=homepage"><span>Michal</span></a>
<a href="?page=homepage"><span>Richard</span></a>
<a href="?page=homepage"><span>Ola</span></a>
</div> </div> <div class="cleaner"></div></div><div id="Bottom"> <p class="down_left">Copyright
© 2007 MHV Immobilien GbR </p> </div> </div> </div>
</div></body></html>

und zwar bearbeite ich die seite mit NVU bzw. kompozer. dort wird mir die seite korrekt angezeigt inkl. aller bilder, banner und logos.

anschließend schaue ich mir die seite im IE7 an und der banner oben fehlen (header2.jpg) sowie die hintergrundgrafiken für das menü und den footer bereich.

es sei vielleicht noch gesagt das ich ein immobilienprogramm benutze, welches auch homepages erzeugt. die mitgelieferten layouts soll man anpassen können mit etwas geschickt. dabei bin ich gerade.

nur wie gesagt im html editor wird alles korrekt angezeigt. lade ich die datei dann in den vorlage ordner des programms und lasse daraus die internetseite erstellen, kommt zwar die komplette schrift und der schwarze hintergrund, aber sämtliche bilder fehlen. auch hab ich schon rum gegoogelt und am css teil einiges rum probiert, damit mir das bild header2.jpg und alle anderen angezeigt werden. nur hat irgendwie nichts geklappt. ich könnte mir vorstellen das hier irgendwo der fehler liegt, aber ich weiß nicht wo. vielleicht habt ihr noch nen rat.

#Header
{
width: 826px;
height: 246px;
float: left;
background: url("img/header2.jpg") top left no-repeat;
color: white;
font-family: Candara;
font-size: 33px;
text-align: center;
padding-top: 20px;
}


noch was. das css hab ich in die html mit eingebunden, weil das programm wohl nicht mit der separaten css datei klar kommt.

ich hoffe ihr habt einen tip.
vielen dank.

schönen gruß
mathias

Crizzo 10.10.2007 15:45

Die per CSS eingebundenen Grafiken müssen relativ zur CSS korrekt verlinkt werden.
Folglich muss eine Grafik sich vom Hauptverzeichnis aus in "bilder/grafiken/" befindet von einer CSS Datei, die sich in "css/" befindet so angesprochen werden:

Code:

background: url(../bilder/grafiken/header.jpg);
"../" geht eine Ebene zurück und von da dann in "bilder" nach "grafiken" --> zum "header.jpg". ;)

fossy 10.10.2007 16:27

danke für deine schnelle antwort.

also meine datei header2.jpg liegt im verzeichnis c:\IMOS60\Internet\Vorlagen\Stil1\img\header2.jpg

muß ich dann das komplette verzeichnis im css teil mit angeben? weil wenn ich jetzt nur "background: url(../img/header2.jpg);" eingebe - ist das bild auf einmal komplett verschwunden und der hintergrund ist weiß.

gruß
mathias

hubert17 10.10.2007 16:34

Michael Jendryschik hat das recht gut erklärt Technische Fundamente des World Wide Webs – Einführung in XHTML, CSS und Webdesign.

Crizzo 10.10.2007 22:03

Zitat:

Zitat von fossy (Beitrag 352412)
danke für deine schnelle antwort.

also meine datei header2.jpg liegt im verzeichnis c:\IMOS60\Internet\Vorlagen\Stil1\img\header2.jpg

muß ich dann das komplette verzeichnis im css teil mit angeben? weil wenn ich jetzt nur "background: url(../img/header2.jpg);" eingebe - ist das bild auf einmal komplett verschwunden und der hintergrund ist weiß.

gruß
mathias

Das kommt ganz drauf an, wo deine CSS-Datei liegt. Relativ zu dieser musst du den Pfad angeben. ;)

ArcVieh 10.10.2007 22:34

Der Pfad von Bildern kann relativ zur CSS Datei, bzw. HTML Datei sein. Allerdings muss dieser Pfad auch vom Browser "erreichbar" sein.

Ich denke deine index.html Datei liegt im Ordner Stil1? Dann ist ../img falsch, da .. für "Gehe ein Verzeichnis zurück" steht.

fossy 11.10.2007 15:09

danke für eure hilfe. also ich hab es hinbekommen das mir die bilder jetzt erstmal angezeigt werden (ohne das ich bis jetzt irgendetwas auf meine seite hochgeladen habe).

aber jetzt hab ich ein anderes problem.
ich habe jetzt rechts die navigation. mhhhh - diese würde ich nun aber gern links haben - nur wie geht das? :shock::idea::?:

außerdem möchte ich, dass wenn ich in der navigation auf einen link klicke z.B. mietobjekte bzw. Wohnungen, dass dann der inhalt dieser seite in einer art frame in diesen weißen kasten dargestellt wird. wie bei immobilienscout24 z. bsp. -geht das?

was ich bis jetzt gebastelt habe funktioniert irgendwie nicht. der haut mir da die ganze seite durcheinander. auch werden diese "trefferseiten oder angebotsseiten" von meinem programm hier durch drei :shock: einzelne seiten erstellt und zwar die liste_kopf.htm, liste.htm und liste_fuss.htm. diese drei seiten wiederum ergeben dann die eine trefferseite. ähm - versteht ihr was ich meine????

außerdem werden umlaute wie Ä,Ö,Ü nicht korrekt dargestellt. fragen über fragen. ich weiß. :?

so sieht mein quellcode momentan aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head><title>Old english blog- title</title>

<meta http-equiv="Content-language" content="css">
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-15=">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<style type="text/css">
*{
padding:0;
margin:0;
}
body
{
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/main_pattern.gif") top left repeat;
background-color: black;
font-family: arial;
font-size: 12px;
color: #272525;
}
#Container
{
width: 826px;
margin: 0px auto;
}
#TopPart
{
width: 826px;
height: 250px;
float: left;
background-color: white;
}
#Header
{
width: 826px;
height: 180px;
float: left;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/header4.jpg") top left no-repeat;
color: white;
font-family: Candara;
font-size: 33px;
text-align: center;
padding-top: 20px;
}
#Top_left
{
width: 312px;
height: 50px;
float: left;
}
#Top_right
{
width: 514px;
height: 50px;
float: right;
}
input
{
float: left;
height: 15px;
width: 180px;
}
.button
{
float: right;
width: 77px;
height: 20px;
background: none;
border: none;
color: #f6b9ba;
font-size: 12px;
}
.button:hover
{
text-decoration: underline;
}
p
{
text-align: justify;
}
#Menu
{
width: 514px;
height: 29px;
float: right;
}
#Menu_bottom
{
height: 21px;
float: right;
width: 264px;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/button_shadow.gif") top left no-repeat;
}
#Menu a
{
width: 88px;
line-height: 29px;
vertical-align: middle;
float: right;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/button.gif") top left no-repeat;
text-align: center;
color: #f6b9ba;
text-decoration: none;
}
#Menu a:hover, #Menu a.active
{
text-decoration: underline;
}
#CentralPart
{
width: 826px;
clear: both;
background-color: white;
}
#LeftPart
{
width: 564px;
float: left;
color: #272525;
}
#RightPart
{
float: right;
width: 262px;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/pattern1.gif") top left repeat;
padding-bottom: 10px;
}
.cleaner
{
clear: both;
}
#Page
{
width: 564px;
padding-top: 15px;
}
h2
{
font-size: 15px;
line-height: 28px;
font-weight: bold;
}
h4
{
font-size: 13px;
}
h3
{
font-size: 12px;
line-height: 20px;
font-weight: bold;
}
h5
{
font-size: 12px;
line-height: 20px;
}
.article_head
{
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/gradient.gif") top left repeat-y;
padding-top: 3px;
height: 70px;
}
.arrow
{
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/arrow2.gif") top left no-repeat;
width: 39px;
height: 60px;
float: left;
margin-top: 5px;
padding-right: 10px;
}
.article_body p
{
padding: 15px;
}
.article_comments a
{
color: black;
}
.article_comments
{
padding-top: 5px;
padding-bottom: 15px;
padding-left: 15px;
}
.photo
{
padding-top: 8px;
padding-bottom: 5px;
float: left;
padding-right: 8px;
}
.rightpart_header
{
color: #272525;
font-size: 15px;
font-weight: bold;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/arrow.gif") top left no-repeat;
background-position: 0px 10px;
line-height: 20px;
text-indent: 23px;
padding-top: 10px;
}
#RightPart a
{
font-size: 13px;
display: block;
padding-left: 23px;
line-height: 25px;
color: #272525;
}
.main
{
text-indent: 23px;
}
.child
{
text-indent: 36px;
}
#Bottom
{
width: 826px;
background: url("C:/Programme/IMOS60/Internet/Vorlagen/Stil1/img/bottom.gif") top left repeat-x;
height: 21px;
float: left;
}
.down_left
{
font-size: 11px;
text-align: left;
padding-top: 4px;
padding-left: 15px;
float: left;
color: white;
}
.down_right
{
font-size: 11px;
text-align: right;
padding-top: 4px;
float: right;
padding-right: 8px;
}
.down_right a, .down_left a
{
text-decoration: none;
color: white;
}
.down2
{
padding-top: 10px;
float: right;
}
.down2 img
{
border: 0px;
}
</style>
</head><body>
<div id="WholePage">
<div id="Inner">
<div id="Container">
<div id="TopPart">
<div id="Header"></div>
<div id="Top_right">
<div id="Menu"><a class="homepage active" href="?page=homepage"><span>Impressum</span></a>
<a class="about-us" href="?page=homepage"><span>Kontakt</span></a>
<a class="products" href="index.htm"><span>Home</span></a>
</div>
<div id="Menu_bottom"></div>
</div>
</div>
<div id="CentralPart">
<div id="LeftPart"></div>
<div id="RightPart">
<div id="Pages">
<div class="rightpart_header">Menü</div>
<br>
<font face="Arial" size="2"><b><font face="Arial, Helvetica, sans-serif"><#CUSTOM
Feld=O_Kaufobjekte></font></b></font>
<font face="Arial" size="2"><#CUSTOM
Feld=Liste_Kaufobjekte></font><br>
<font face="Arial" size="2"><b><font face="Arial, Helvetica, sans-serif"><#CUSTOM
Feld=O_Mietobjekte></font></b></font>
<p><font face="Arial" size="2"><#CUSTOM
Feld=Liste_Mietobjekte></font>
</p></div>
<div id="Archives">
<div class="rightpart_header"></div>
<a href="?page=homepage"><span></span></a><a href="?page=homepage"><span></span></a>
<a href="?page=homepage"><span></span></a><a href="?page=homepage"><span></span></a>
<a href="?page=homepage"><span></span></a><a href="?page=homepage"><span></span></a>
<a href="?page=homepage"><span></span></a><a href="?page=homepage"><span></span></a>
<a href="?page=homepage"><span></span></a><a href="?page=homepage"><span></span></a>
</div>
</div>
<div class="cleaner"></div>
</div>
<div id="Bottom">
<p class="down_left">Copyright© 2007 MHV Immobilien GbR </p>
</div>
</div>
</div>
</div>
</body></html>

vielleicht hat ja einer nen heißen tip.
danke.

so sieht meine seite gerade aus - startseite
http://www.algarve-yachtpoint.com/MHV/start.jpg

und so, wenn ich auf den link "Grundstücke" geklickt habe
http://www.algarve-yachtpoint.com/MHV/link.jpg

schönen gruß
mathias

fossy 11.10.2007 18:17

so, die fragen oben haben sich erledigt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023