Having trouble with header image

Get Started
1

i know that this is posted in the wrong place. that is my first problem. my second problem is on page 221 of build your own web site the right way. i cannot get the header-bg.jpg to apear in the h1 area. the result i get is a large white border on top and bottom of h1 and some lowering of the h1. here is the css i have. im sure i have screwed it up by now. also i tried to just copy the correct code from the archive but i get a wrapped around continuous code and not sure how to plug it into a new css file. im stuck. thanks to whoever will look at this for me.

/*CSS for bubble under site*/
body {
font-family: Verdana, Helvetica, Aerial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 0;
margin: 0;
}
 h1 {
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
 font-size: x-large;
 background-color: navy;
 color: white;
 padding-top: 2em;
 padding-bottom: .2em;
 padding-left: .4em;
 margin: 0
 background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
 li {
 font-size: small;
 list-style-type: none;
 }
 h2 {
 color: blue;
 font-size: 130%;
 font-weight: normal;
 padding-top: 15px;
 }
 
P { font-size: small;
color: navy;
}
#tagline p {
font-style: italic;
font-family: Georgia. Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y
right;

}
em{
text-transform: uppercase;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans serif;

}
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color:navy;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
#navigation {
width: 180px;
background-color: #7da5d8;
}
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 6.7em;
}
#bodycontent {
left: 200px;
}
#header, #tagline {
width: 100%;
}
#header, #tagline {
border-top: 3px solid  #7da5d8;
}
.feature {
float: right;
margin: 10px;
}
.galleryphoto img {
border: 15px solid white;
}
.galleryphoto p {
font-size: 65%;
font-weight; bold:
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
.photocredit {
font-weight: normal;
color: gray;
}
.galleryphoto {
padding-bottom: 20px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
2

Do you have an example of your XHTML code you can post here?

As the part that references the image URL is nearly correct. Although there are other errors within the CSS. The following is what is printed [221]:

h1 {  
 font-size: x-large;
 color: white;  
 padding-top: 2em;  
 padding-bottom: .2em;  
 padding-left: .4em;  
 margin: 0;  
 background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}

I assume you also have the image ‘header-bg.jpg’ in the folder backgrounds?

3

i have that part of the file correct and i have typed it and erased it atleast ten times. the file is in the backgrounds folder. it must be something else. the book says make sure that the code appears below the grouped h1, h2, h3 rule: i have moved the grouped h1,h2,h3 above the h1, and i have removed it also but i just get more problems. luckily i saved a copy of the file.
is there a way to just plug in the correct code file from the archive? what i got from the archive was a wrap around type of code. maybe that plugs in somehow i will keep trying.

4

All the code will be plaintext so can be easily copied and pasted but your CSS is wrong and seems to be missing a few parts.

Though if you really want to kick yourself do what I told you (post #2) and change that: margin: 0 to margin 0; Then the browser will show your image. :wink:

Regarding your other question you could have copied the whole style1.css from something like: /chapter5/web_site_files/final_version_for_chapter/

Like I said, you have other CSS errors. But that single missing semi colon ; after the zero is your culprit for no h1 image appearing.

5

i just got back from vacation. thanks for your help. while i was gone i was able to advance to the part where i opened a freedpoint account and recieved their markup. I have placed their opening form tag and placed it in the contact form tag. but after that i am not sure what to do. it is a little confusing and looking at the examples in the book , well they dont seem to make sense to me yet.

6

I assume you are now around page 300, if you get stuck then we might be able to help but we’d have to see an example.