Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.10.2007, 15:28
fossy fossy ist offline
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