Another newbie

Welcome to the site, you've avoided most of the noobie pitfalls.

You need to wrap the h1 text in a span, then set it to display:none, like so:

<h1 id="myheader"><span>text</span></h1>

then the CSS

h1#myheader span {display: none;}

And your syntax for the UL is wrong, it should be this:

<ul id="navlist">
	<li id="home"><a href="index.html">Home</a></li>
  	<li id="vol"><a href="volunteer.html">Volunteer</a></li>
	<li id="his"><a href="history.html">History</a></li>
  	<li id="events">Events
	<ul>
        	<li> <a href="longserv.html">Long Service Recognition</a></li>
        	<li> <a href="samweek.html">Samaritan Week</a></li>
    </ul>
    </li>
	<li id="rep"><a href="reports.html">Reports</a></li>
	<li id="links"><a href="links.html">Links</a></li>
  	<li id="contact"><a href="contact.html">Contact Us</a></li>
</ul>

Also, you can condense your css:

	background: url(images/brid_logo.jpg) no-repeat;

This is the preferred way, as your way had a few errors.

Thanks for the reply,

I have done what you suggested, but have a question I have done some reading and told to cut essesive use of tags is this the only way to achieve this. ??

it cant be done to the exsisting styles set up??

P.s nothing gets displayed the image is gone as well

Hmmm, can you show me the code you've tried? Wrapping the text in a span should cause it to disappear, but not the background image.

Also, on your point ox extraneous code:

overflow: hidden;
background-image: url("images/brid_logo.jpg");
background-repeat: no-repeat;
margin-left: 55px;
margin-top:-370px;
height:40px;
width: 307px;

Is the first part really necessary?

Good point on the css style.

I was refering to the span tag in the actual document.

Code is as follows:

<h1 id="myheader"><span>Bridgend Samaritans</span></h1>

h1#myheader {
	background-image: url("images/brid_logo.jpg") no-repeat; 
	margin-left: 55px;
	margin-top:-370px;
    height:40px; 
	width: 307px;
}                                                      
h1#myheader span {
	display: none;
} 

with display:none; the element is taken completely out of the flow and no space is reserved for it, and hence no background. You could either change it to visibility: hidden; or text-indent: -9999px; (which would display it far off the left side of page).

I'd change a few other things as well. I would incorporate the #myheader h1 in the #header div. You could drop the #myheader id and address it through #header. You then wouldn't need the convoluted margins to position in the header div. Source:

<div id="header">
<h1>Bridgend Samaritans</h1>
</div>

Then change the CSS for the h1 to:

#header h1 {
    background: url("images/brid_logo.jpg") no-repat; 
    margin: 30px 0 0 55px;
    height:40px; 
    width: 307px;
    text-indent: -9999px;
    }

And your menu list needs some work. How do you want the submen displayed? You may want to set the li to float: left; instead of display: inline;

It all gone wrong not sure what happened now.

I have uploaded the pages so just click on the link and see the site.

Argh!

You have set the h1 tag this code:

text-indent: -9999px;

which is going to throw it off the page.

Like I said before, wrap the text in the h1 in a <span>, then give the span the attribute of visibilty:hidden (sorry, I had the wrong one before).

TPH, setting the text-indent is fine. It moves the text, not the box.

bach, you have a typo (no-repat) on #header h1. Also, the margin you gave it is throwing it off entirely. I did forget however that margins between the h1 and header will cause problems (moving the header down). You could position the h1 absolutely inside the header div

add:
#header {
position: relative;
}
#header h1 {
position: abosulte;
top: 30px;
left; 55px;
}

OR, if you don't want to absolutely position, just set the h1 margin to zero and move with padding in the header

#header {
padding: 30px 0 0 55px;
}
#header h1 {
margin: 0;
}

OR, to prevent the margin collapse of the header div, add a 1px padding and position the h1 with its margins (minus the 1px for the padding) like this:

#header {
padding: 1px;
}
#header {
margin: 29px 0 0 54px;
}

this is what I got tried the span like 'thepineapplehead' said but doesn't work the text is still visible

body {
	padding-right: 0px;
	padding-left: 0px;
	background-color:transparent;
	background: url(images/bgnd_bot.jpg) no-repeat right bottom;
	padding-bottom: 0px;
	margin: 0px; 
	font: 12px georgia;
	padding-top: 0px;
	z-index: 1
}
#header {
	background: url(images/bgnd_top.jpg) no-repeat left top;
	margin: 0px;
	width: 800px;
	height: 400px;
	position: relative;
}

h1 #header span {
   visibilty: hidden;
} 

#header h1 {
    background: url("images/brid_logo.jpg") no-repeat;
    margin: 30px 0 0 55px;
    height:40px;
    width: 307px;
    }                                           

So i might have to use the text-indent.

Next problem is to get the navigation working

bach, I gave you three options - all of which work, but if you want to use the span, address it this way:

#header h1 span { }

TPHs visibility: hidden will work, but text readers won't read it - that's why I prefer hiding it with text-indent (and it doesn't require the span tags). You can use either method. Neither method will work if the visitor has images turned off, however. There are a handful of other ways to do this image replacement... it's up to the author to decide which way he prefers - do a google search for other methods.

Now, regarding the menu, how do you want it to look? Your example image does not show the submenu.

Thanks for the reply, speak browser is a aim of the site, so I will use the text indent method then thank for the info on that.

The navigation bar, has been sliced up into smaller images home, events history etc. so I would like them to line up horizontal one after each other not in the manner they are in now.

the drop down effect I am thinking of is a green borer to match the site and white background like for samaritans.org.uk. if possible.

You may want to check out the suckerfish dropdown menu article here:
http://www.alistapart.com/articles/dropdowns/

wolfcry911 said:

You don't say? I'm left wondering why a text-reader would bother with CSS information? I've been using "display: none" to hide information when there is a graphic that does the job so that if images/styles are off the information is still there -- I assumed that the speaking browsers would read it!

I like that negative text-indent trick though, very inventive. I suppose maybe I should be proofing my sites with a screen-reader, but it doesn't seem like there are any that are public domain?!? (Wait, I just found JAWS http://www.atkratter.com/speech/jaws/Zjaws5.htm so I'll try that out!)

With styles off, the information will display anyway - whether negative text-indent or visibility:hidden or display:none is used. All these styles are useless with styling off. However with styling on and images off, none of these methods are seen on screen. A negative text-indent would still be read by a screen reader, however. There are more image replacement methods, but they all have pros and cons. BTW, you're display:none method will NOT work if images are off, the information is NOT there. It's taken completely out of the flow.