Adding an Image to a Header - Post ID...

User 562592 Photo


Registered User
2,038 posts

correction:

"guests"
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 563328 Photo


Registered User
85 posts

Thanks to all who helped. I was able to get it work, just had to put it under the correct element and not have those pesky typing errors. But I now have some follow-on questions.

Part One

I am currently testing my page(s) in the different browsers and when I added Safari I accidentally added it twice under the alternate browsers.

1. How can I remove the second one?

2. When I select either of the Safari (v. 5.0) I get the following error message from Coffee Cup:

Unable to execute file: The operating system denied access to the specified file.

How can I view my page in Safari?


Part Two

I initially had my pages set up as a 3 column liquid layout but after viewing and sizing the browsers there is just too much white space between the content so I switched to a fixed layout which works much better. This next question is a little convoluted so please bear (bare?) with me:

While perusing a previous post - "Background?" posted by G'Kar, there was a suggestion to style the html tag directly in addition to the body tag.

Because I have a fixed layout with the content centered on the window and set at 950px wide, when viewed on a widescreen there is white space on either side. When I try to set the html tag nothing happens. Here is my coding:

Main Styles 3

html {
margin: 0;
padding: 0;
background-color: #004000;
}

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 18px;
color:#004b6f;
}

blockquote { font-size: 10px; }
h2 { color: #004b6f; }
a { color: #800080; }
p { margin: 0 0 18px; }
#container { width: 950px; margin: 0 auto; margin-top: 25px; }
#wrapper { float: left; width: 100%; background-image: url('../images/leaves.jpg'); }

#header {
background: #C9C9C9 url('../images/my_ahsgr_logo_provencher.gif') right top no-repeat;
border-bottom: 2px solid #ddd;
}


Here are two different examples of what I am trying to accomplish:

http://www.worldspice.com
http://www.volgagermans.net/norka/

For the worldspice I couldn't find anything in the source code - there is alot of javascript.

For the volgagermans it looks as though they created container within a container?

Any suggestions are much appreciated and thanks for all of your patience.

P.S. Eric, is that Spiderman doing the Evolution of Dance? It cracks me up!

Kelly






User 117361 Photo


Ambassador
6,076 posts

Well for the browser I think you can just go into tools > preferences > browser testing and remove one of them.

For Safari I usually open up my page in one of the other browsers - collect the url address (even the local one) and then open Safari and add the address. I often have problems opening Safari directly from inside the program.

The html page just "is" and all the rest gets up set up inside it. Can you point us to the post you mention that discussed this point?

Certainly having containers, within containers is one way of have a control over your page content.
You say that you would like to accomplish something like those sites - but what is it in the sites that you would like to have?
User 563328 Photo


Registered User
85 posts

Janys,

The post I was referring to is 19 posts after this one. It was posted by G'Kar with the subject of Background?

As for the two other sites I want some sort of background (color) on either side of my content like the other sites have. It's just more asthetically pleasing than having nothing but white showing on either side.

Kelly
User 133269 Photo


Registered User
2,900 posts

try moving the background-color: from the html to the body tag style....
Have fun
~ Fe Pixie ~
User 117361 Photo


Ambassador
6,076 posts

Fe got here first. So yes, just take the background-color into the body tag, but remember always that color is the US dictionary spelling and it won't work if you write "colour"
User 563328 Photo


Registered User
85 posts

That did the trick - I had to move the background-image from the Body to the Wrapper and then add the background-color to the Body. It seems to work in IE6, and the most current versions of Fire Fox, Google Chrome, Opera, and Safari (I had to open Safari first then paste the path as suggested before it could be viewed).

Now it's time to get off the computer and get back to watching the World Cup.....

Thanks so much.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.