Hintergrundbild im "Masthead" - Error @ tutorials.de: Tutorials, Forum & Hilfe

monkeybusiness · 08.10.07 12:32

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>

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


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

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

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

<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

Maik · 08.10.07 12:45

Hi,

Zitat von monkeybusiness

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.

Zitat von monkeybusiness

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 :

1
2
3

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

monkeybusiness · 08.10.07 13:39

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

Maik · 08.10.07 13:42

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;
[b]background: url(../img/bg.jpg) 0 0 repeat-x; [/b]
}

monkeybusiness · 08.10.07 13:58

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

Maik · 08.10.07 16:09

Hast du mal einen Link zur Seite, damit man sich das direkt anschauen kann?

Maik · 08.10.07 17:00

Zitat von monkeybusiness | PN

hi,

hier ist die domain:

http://***.***.de/index.html

LG,
Timmy

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 :

1	img { display:block; }

erzielt bei mir in beiden Browsern eine einheitliche Darstellung.

Maik · 08.10.07 18:03

Zitat von monkeybusiness | PN

danke

Sollte dir mein Vorschlag geholfen haben, dann antworte doch bitte hier im Thema und markiere es als erledigt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Richtige Syntax bei Operatorüberladung, wann sind "friend", "const", "&" nötig?

Fehlermeldung - "Parse error: syntax error, unexpected $end"

Hintergrundbild soll immer "festgehalten" werden

eh.h(32): fatal error C1189: #error : "eh.h is only for C++!"

Finder methods + JBoss + Was expecting one of: "CONCAT" "SUBSTRING" ... "(" ... <STRI

E-Mail:

Abonnieren Abbestellen