|
|||
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> 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 |
Sponsored Links |
|
||||
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);
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
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) |
|
|||
Michael Jendryschik hat das recht gut erklärt Technische Fundamente des World Wide Webs – Einführung in XHTML, CSS und Webdesign.
|
|
||||
Zitat:
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
||||
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 |
|
|||
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> 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) |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |