new to css: what's the best way to insert image using the external style sheet?

mad samuel · #1 (**permalink**) Aug 9th, 2007, 21:00

I tried searching, but got too many vague threads.

I just want to put a logo in the contentheader, that way i can have the logo exactly the same on every html page that i link the css to. what's the best way to do this?

sorry for the noobness, im just a little frustrated.

Lchad · #2 (**permalink**) Aug 9th, 2007, 21:05

Don't be sorry.
Insert your image into the html.
That's where you stuff goes. Css is just to make it pretty and do what you want.

So an example would be.

Code: Select all

<div id="header"><img src="mypic.jpg" width="700" height="100" /></div>

pa007 · #3 (**permalink**) Aug 9th, 2007, 21:10

If its a logo then its presentational not content so should go in the css.

I'd use css image replacement for this:

Code: Select all

<div id="header">
<p>
<a href="/">My company name</a>
</p>
</div>

And:

Code: Select all

div#header p a {
text-indent: -9999px;
text-decoration: none;
display: block;
width: 500px;
height: 100px;
background: url('some_image.gif') 0 0 no-repeat;
}

Something like that.

You could, of course, use includes to insert common elements to multiple pages.

Pete.

Lchad · #4 (**permalink**) Aug 9th, 2007, 22:21

I certainly could be wrong about this but when I put my site in the critique forum I was told to place my header/logo in the html so it could be clicked on as it's expected to be a link back to the homepage.

????????????

Yes ??? NO???

pa007 · #5 (**permalink**) Aug 9th, 2007, 22:28

This is a link. I'm just removing the link text, setting it to display block (so the whole thing is clickable) along with some dimensions, and popping in a bg image. Its how I do all of my headers. This way you've got the company/site text as real text (and a link).

I'll post up an example in a sec.

Pete.

pa007 · #6 (**permalink**) Aug 9th, 2007, 22:38

Look here. Nice image but lovely clean text. You could use headers or whatever you want.

Pete.

Lchad · #7 (**permalink**) Aug 10th, 2007, 00:50

Very nice... I must be having a brain cramp. Thanks for uncramping it!

sannbe · #8 (**permalink**) Aug 10th, 2007, 04:03

Thanks for the question and answer. I have been doing it that hard way....see what happens when you try to convert a tables site.....

ScottR · #9 (**permalink**) Aug 10th, 2007, 04:29

Although, when you make your header or logo a background image you can kiss the alt tag good buy. I prefer to keep that descriptive tag letting a possible screen reader know where they are and what the site is about.

pa007 · #10 (**permalink**) Aug 10th, 2007, 10:08

You have real text, you don't need an alt tag. It's all there in the markup, all you are doing is embellishing the site name with an image. Separation remember.

Pete.

ScottR · #11 (**permalink**) Aug 10th, 2007, 14:34

I disagree. Your text is contained in the logo, therefore not readable by screen readers. CSS is for presentaion such as colors, display styles, size, etc. CSS should be used to "style" your content. Ofcourse a person could use their images as background images I would just not suggest it for logo's/header's. Here the source code for the example you had, I see no text besides the link.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
  <link rel="stylesheet" type="text/css" href="style.css" />

  <title>Linky link link</title>

  </head>
  
  <p><a href="#">A link to a site</a></p>

  <body>

  </body>
</html>

mad samuel · #12 (**permalink**) Aug 10th, 2007, 16:27

okay, well for a noob like me, you suggest i just stick with the html for logos?

Lchad · #13 (**permalink**) Aug 10th, 2007, 17:08

ScottR here is the text in red

Code: Select all

<p><a href="#">A link to a site</a></p>

Mad Samuel, do you plan to have a navigation in the header div?
Not directly over the wording, but at the bottom or top margin?
If so, you'd want your logo or header to be the background image. So in that instance you'll want it in the css (the way Pete suggested). If you do not plan to have anything else over the top or in the same div as the header, than personally I don't think it makes a big difference which way you do it.

Try both and see which one you like. Both are pretty easy... so take your choice.

mad samuel · #14 (**permalink**) Aug 10th, 2007, 17:35

Quote:

Originally Posted by Lchad

ScottR here is the text in red

Code: Select all

<p><a href="#">A link to a site</a></p>

Mad Samuel, do you plan to have a navigation in the header div?
Not directly over the wording, but at the bottom or top margin?
If so, you'd want your logo or header to be the background image. So in that instance you'll want it in the css (the way Pete suggested). If you do not plan to have anything else over the top or in the same div as the header, than personally I don't think it makes a big difference which way you do it.

Try both and see which one you like. Both are pretty easy... so take your choice.

well, my navigation is going to be vertical in the left content, which will be below the header. however, i am going to have a small text links on the right side for contact and home. however, i made a right content div for that and it seems to work fine.

i did the html version and it all looks fine in my browser. i just was thinking it would be easy to add the external css with a logo already in it, but i will just do it html for now.

pa007 · #15 (**permalink**) Aug 10th, 2007, 17:52

I'd suggest putting the logo/header image in the css. Am image that exists to improve the way something looks is presentational and does not belong in the HTML. It is bad practice to put it there. Real paragraph is always preferable to alt descriptions from an accessibility standpoint. The image is not necessary for someone to understand what your site is about therefore the graphic is merely a presentational embellishment.

An image in an image gallery or an image that relates to the article or story is content (and is part of the reason that page exists at all) so should be in the HTML.

Text is more accessible than anything in almost all cases.

Pete.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding a style sheet to an RSS feed problem	Andrew1986	Other Programming Languages	5	Feb 19th, 2008 10:31
Why Style sheet isnt working	kaz	Web Page Design	19	Dec 21st, 2007 01:10
CSS Print Style Sheet Problem	bennyboy7	Web Page Design	1	Aug 14th, 2007 08:58
How to tell IE7 to use a pariticular style in a single style sheet	figo2476	Web Page Design	5	May 25th, 2007 14:23
Linking to an external style sheet	ahm531	Web Page Design	6	Aug 31st, 2006 13:23

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
new to css: what's the best way to insert image using the external style sheet?