15 replies [Last post]
bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Hi,

Joined today, and my first of many posts lol. I have done a search on forum but cant find what I am after.

I have created a asic xhtml site, I have created an image of how I would like the site to look.

image tag not working for me so url tag instead

Image

I have sliced up the image so that

    Bridgend Samaritans is an image navigation is several images nav_home etc
    Background into two slices.

I am having problems with the title it is in a h1 tag but will not get rid of the text when the image is displayed and the navigation anyone for some tips on how to achieve this.

WebSite

[/]

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Thank You

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Another newbie

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?

Verschwindende wrote:
  • CSS doesn't make pies

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Good point

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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;

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

desaster

It all gone wrong not sure what happened now.

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Another newbie

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

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

Confused

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

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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.

bach
Offline
Enthusiast
UK | South Wales
Last seen: 14 years 36 weeks ago
UK | South Wales
Joined: 2005-05-01
Posts: 79
Points: 0

navigation

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.

"If a man does not keep pace with his companions perhaps it is because he hears a different drummer. Let him keep step to the music he hears however measured or far away."

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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

Spectralizer
Spectralizer's picture
Offline
Enthusiast
Toronto, ON. Canada
Last seen: 17 years 8 weeks ago
Toronto, ON. Canada
Timezone: GMT-5
Joined: 2005-03-30
Posts: 53
Points: 0

Another newbie

wolfcry911 said:

Quote:
TPHs visibility: hidden will work, but text readers won't read it

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

This is my .sig... there are many like it, but this one is mine.
My .sig is my best friend... It is my life.
I must master it as I must master my life.
My .sig, without me, is useless... Without my .sig, I am useless.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Another newbie

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.