zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS in HTML - Hintergrundbild wird nicht angezeigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.10.2007, 15:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 22
fossy befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.10.2007, 15:45
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.10.2007, 16:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 22
fossy befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von fossy (10.10.2007 um 16:29 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.10.2007, 16:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

Michael Jendryschik hat das recht gut erklärt Technische Fundamente des World Wide Webs – Einführung in XHTML, CSS und Webdesign.
Mit Zitat antworten
  #5 (permalink)  
Alt 10.10.2007, 22:03
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von fossy Beitrag anzeigen
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.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #6 (permalink)  
Alt 10.10.2007, 22:34
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2007, 15:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 22
fossy befindet sich auf einem aufstrebenden Ast
Standard

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?

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 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


und so, wenn ich auf den link "Grundstücke" geklickt habe


schönen gruß
mathias

Geändert von fossy (11.10.2007 um 15:29 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2007, 18:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.10.2007
Beiträge: 22
fossy befindet sich auf einem aufstrebenden Ast
Standard

so, die fragen oben haben sich erledigt.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Von Excel 2003 / Word 2003 nach HTML und CSS sams2000 CSS 2 27.12.2010 14:47
CSS einbinden in HTML lionheart1968 CSS 1 10.12.2010 15:19
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
CSS & HTML Editor Linux kampfgnom Offtopic 4 15.05.2008 15:34
usemap splitten unter css UND html thadan CSS 1 06.01.2008 18:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:48 Uhr.