Hintergrundbild im "Masthead" - Error

Status
Nicht offen für weitere Antworten.
Hallo zusammen,

ich möchte in meiner Website oben links ein Hintergrundbild platzieren, dass sich über die gesamte Seite horizontal durchzieht - in diesem Fall ist das einfach eine Linie die das Logo oben links vom Content darunter trennt. im "Body" ist das auch kein Problem, im "Masthead" wird allerdigns das Bild als solches nicht angeziegt.
Ausserdem wäre wahrscheinlich sinvoll auch das Logo ( header.jpg ) in der CSS Datei als Hintergrundbild anzugeben.
Ich würde mich freuen , wenn mir jemand weiter helfen kann , das Problem zu lösen - auf diversen CSS Seiten habe ich schon nachgesehen, so speziefisch nichts gefunden.
Hier sind die Html und CSS Datei , ich hoffe ihr findet euch zurecht. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<style type="text/css">

<!--





body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;


}
.Stil2 {
color: #F59A03;
font-weight: bold;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.Stil3 {
color: #F59A03;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.Stil4 {font-family: Arial, Helvetica, sans-serif}
-->
</style></head>
<body>

<div id="masthead">

<h1 id="siteName"><img src="img/header.jpg" width="250" height="92"><br>
<img src="" width="100%" height="2"> </h1>

<div id="globalNav">
</div>
<h2 id="pageName"></h2>
<div id="breadCrumb">
<a href=""></a></div>
</div>
<div id="navBar">
<div id="search">

</div>
<div id="sectionLinks">
<ul>
<h3> <li><a href="#">Start</a><a href="#">Dia-Shows</a><a href="#">Bild-Archiv</a><a href="#">Presseportal</a><a href="#">Wir über uns</a><a href="#">Info-Service</a><a href="#">Links</a><a href="#">Kontakt</a></li>
</h3>
</ul>
</div>
<div class="relatedLinks">


</div>
<div class="relatedLinks">

</div>
</div>
<!--end navBar div -->
<div id="headlines"><br>



</p>
<p>
In Bearbeitung: </p>
<p>
Jakobsweg</p>
<p>
Cornwell<br>
<br>
<br>
New York
</p>
<div id="advert">
</div>
</div>
<!--end headlines -->
<div id="content">
<div class="feature">
<br>
<img src="img/Japan.jpg" width="250" height="181" border="0" align="middle" class="relatedLinks">
<h1><span class="Stil3"> </span></h1>
<p>

</div>
<div class="feature">
<br>
</span></p>
</div>
</div>
<!--end content -->
<div id="siteInfo">
<div align="center"><img src="img/white.jpg" width="100%" height="1"><br>
<br>
<br>
© Copyright by ... </div>
</div>
<br>
</body>
</html>


Die CSS zur Html Datei sieht so aus:

/***********************************************/


/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{

font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;



}

a{
color: #ffffff;
text-decoration: none;
}

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

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

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

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #ffffff;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #ffffff;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 106%;
color: #ffffff;
margin: 0px;
padding: 0px;
}

h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #ffffff;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
background: url(../img/bg.jpg) 0 0 repeat-x;
padding: 10px 0px 0px 0px;
border-bottom: 10px solid #000000;
width: 100%;


}

#navBar{
float: left;
width: 14%;
margin: 0px;
padding: 0px;
background-color: #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#headlines{
float:right;
width: 18%;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
padding-right: 10px;
}

#content{
float: left;
width: 62%;
}

/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 10px 10px 10px 0px;
border-bottom: 1px solid #000000;
color: #000000;
}

#globalNav img{
display: block;
}

#globalNav a {
font-size: 100%;
padding: 20 20px 0 0;
}

/*************** #pageName styles **************/

#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 106%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 0px 12px 4px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 0px solid #ffffff;
font-size: 75%;
color: #ffffff;
padding: 20px 40px 20px 10px;
}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #000000;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #000000;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #000000;
font-size: 90%;
}

#sectionLinks h3{
padding: 0px 0px 2px 10px;
}

#sectionLinks a {
display: block;
border-top: 1px solid #000000;
padding: 4px 10px 2px 40px;
}

#sectionLinks a:hover{
background-color: #000000;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}


Ich würde mich über hilfreiche Tipps zur Fehlerursache sehr freuen... :)

LG,

Timmy
 
Hi,
im "Masthead" wird allerdigns das Bild als solches nicht angeziegt.
bei mir wird ein von mir frei gewähltes Hintergrundbild im DIV #masthead erwartungsgemäß und problemlos angezeigt.

Ausserdem wäre wahrscheinlich sinvoll auch das Logo ( header.jpg ) in der CSS Datei als Hintergrundbild anzugeben.
Und wo ist das Problem?

Das Logo "header.jpg" lässt sich doch für das h1-Element mit der ID #sitename als Hintergrundbild einsetzen:

Code:
h1#sitename {
background:url(../img/header.jpg) no-repeat;
}
 
Vielen Dank,

das funktioniert.
Jetzt habe ich doch eine Sache , bei der ich nicht so einfach weiter komme.

Ich möchte ebenfalls ein Hintergrundbild im Div id = "SiteInfo" platzieren:
Meine Variante funktioniert leider nicht :

/************* #siteInfo styles ***************/

#siteInfo{

clear: both;
border: 0px solid #ffffff;
font-size: 75%;
color: #ffffff;
padding: 20px 40px 20px 10px;
}

#siteInfo img{
background: url(../img/bg.jpg) 0 0 repeat-x;
padding: 4px 4px 4px 10px;
vertical-align: middle;

Habt ihr / Du da noch Infos für mich :)

Vielen Dank,
LG,
Timmy
 
Du versuchst da einem Grafikelement img ein Hintergrundbild zuzuweisen ;)

Versuch es stattdessen mal für das DIV #siteInfo:

Code:
#siteInfo{

clear: both;
border: 0px solid #ffffff;
font-size: 75%;
color: #ffffff;
padding: 20px 40px 20px 10px;
background: url(../img/bg.jpg) 0 0 repeat-x; 
}
 
Stimmt :)
da haste recht !

jetzt hab ich noch das Probelm, dass das Bild - in meinem Fall die durchgezogene Linie - unterschiedlich hoch dargestellt wird. Im Firefox ist alles paletti, der IE vergrößert das Bild in die Höhe , wie kann ich das denn verhindern

Ich hoffe ich stelle nicht zu viele Fragen - das soll schliesslich kein Verhör werden :)

LG,
Timmy
 
monkeybusiness | PN hat gesagt.:
Falls du von dem "gelben Balken" sprichst, so würde ich mal behaupten, dass der IE die Grafik in ihrer Höhe korrekt darstellt, und Firefox den unteren schwarzen Rahmen zu weit oben ansetzt, weshalb der Balken schmäler erscheint.

Code:
img { display:block; }
erzielt bei mir in beiden Browsern eine einheitliche Darstellung.
 
Status
Nicht offen für weitere Antworten.
Zurück