Why H1 tag not recognized in logo image?

[nic2009]

I have following code:

<?php if ($this->params->get('logoType')=='image'): ?>
<div id="logo">
<h1><a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="index.php">
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="<?php echo $LiveSiteUrl ?>templates/<?php echo $this->template?>/images/logo.png" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz"/>
</a></h1>
</div>
<?php else:
$logoText = (trim($this->params->get('logoType-text-logoText'))=='') ? $config->sitename : $this->params->get('logoType-text-logoText');
$sloganText = (trim($this->params->get('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->params->get('logoType-text-sloganText');?>
<div id="logo-text">
<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>

and when checking the alt tags it recognizes an alt tag, but just '...' instead of 'Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz'. What is wrong with my code?

Thanks for your help.

[tamnl]

Why do you use some SEO tools to add the H1 tag for logo image? It's better and you don't need to worry about the code. I'm not good at coding but the first paragraph of your code:
<div id="logo">
You should change to :
<h1 class="logo">

I found another topic related to your question. You can see the code in http://forum.joomla.org/viewtopic.php?p=2631901

[nic2009]

Thanks a lot, will take a look at it.

What SEO tools do you suggest?

[nic2009]

Ok, again...

Here the code:

<?php if ($this->params->get('logoType')=='image'): ?>
<div id="logo">
<a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="index.php">
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="<?php echo $LiveSiteUrl ?>templates/<?php echo $this->template?>/images/logo.png" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz"/></a>
</div>
<?php else:
$logoText = (trim($this->params->get('logoType-text-logoText'))=='') ? $config->sitename : $this->params->get('logoType-text-logoText');
$sloganText = (trim($this->params->get('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->params->get('logoType-text-sloganText');?>
<div id="logo-text">
<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>

Where to place my h1 tag in this code, so that my logo titel is h1.

Thanks for your help.

[nic2009]

Still waiting for a reply...

Thanks.

[tamnl]

Sorry Nic, did you read the topic that I searched for you. You can use JFactory and copy the code as in topic http://forum.joomla.org/viewtopic.php?p=2631901?. Maybe it works. I used JSN templates so it automatically add my slogan as H1 tag. I see the code in that topic and the code in yours, I think you can put like this.

<?php if ($this->params->get('logoType')=='image'): ?>
<h1 class="logo">
<a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="index.php">
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="<?php echo $LiveSiteUrl ?>templates/<?php echo $this->template?>/images/logo.png" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz"/></a>
</h1>
<?php else:
$logoText = (trim($this->params->get('logoType-text-logoText'))=='') ? $config->sitename : $this->params->get('logoType-text-logoText');
$sloganText = (trim($this->params->get('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->params->get('logoType-text-sloganText');?>
<div class="logo-text">
<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>

[nic2009]

I tried your suggestion already... and it shows that there is a h1 tag, but it doesn't display the text of the tag and shows following error message when checking:

There's something wrong with this H1 tag, is it an image?

And yes, it is an image. So what can I do? or is there any other method to place a h1 tag on the top of my page without being visible?

Thanks for your help.

[nic2009]

I mean, even it is an image, it should be possible to give the title of the image a h1 tag, or...

[Harvey51]

From your original post,

You don't need to set an alt tag on a background image, it's a CSS item and not a html item.

The original code looks correct, but everything is within < > tags, there's no text for a h1.

Add h1 anchor text and then add this CSS to your CSS file:

#logo h1 a {
display: block;
text-indent: -5000px;
text-decoration: none;
}

This will give the logo a h1 but it wont display.

[nic2009]

Ok, we are coming closer... ;-)
I placed the CSS code in my CSS file and also placed a h1 tag in the index.html (see below) and it shows that there is a h1 tag in the 'h tag checker':

<!-- ///////////////////////////////////////////////////////// START LOGO /////////////////////////////// -->
<?php if ($this->params->get('logoType')=='image'): ?>
<div id="logo">
<a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="index.php"><h1>Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz></h1>
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="<?php echo $LiveSiteUrl ?>templates/<?php echo $this->template?>/images/logo.png" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz"/></a>
</div>
<?php else:
$logoText = (trim($this->params->get('logoType-text-logoText'))=='') ? $config->sitename : $this->params->get('logoType-text-logoText');
$sloganText = (trim($this->params->get('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->params->get('logoType-text-sloganText');?>
<div id="logo-text">
<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>
<p class="site-slogan"><?php echo $sloganText;?></p>
</div>
<?php endif; ?>
<!-- ///////////////////////////////////////////////////////// END LOGO /////////////////////////////// -->

However, now my logo on the site has moved down and is covering part of my site menu. Is there a chance that you can tell me how exactly to modify my logo html and where to place the h1 tags. Just copy the logo html and place the h1 tags on the right place in the original html code (see first post), so I can just copy and paste it. That would be a great help.
Thanks a lot for your support and sorry for my bad knowledge about coding.

[nic2009]

I just saw, that it shows the h1 tag text over the logo, that is why it moved down. Please advice how to hide it, so the logo is placed right again. Thanks.

[Harvey51]

nic2009,

Can you supply a URL for the site.

If it's the bike and sleep site I'm not seeing the problem.

[nic2009]

No, its http://www.saunaclub.info

Thanks for having a look. I have now the standard code where no h1 tag is included.

[Harvey51]

We can easily fix this for you, on Monday morning can you put back the code and CSS supplied.

It will not do you any harm to not have it in place for now.

A logo with a h1 text indented is simple, but as I said background images do not have alt text, so it has to be a html element. we will fix this quickly when you can enable the code and I can see what's going on.

[nic2009]

Hi Harvey51, thousand thanks for your support. The code placed at the moment is the original code from the template. Please let me know how I can be of assistance. Or try to contact me via Skype when you have time to take a closer look. SkypeID: designic.biz

Thanks a lot again & hear you Monday (I am at Bangkok time, so about 6 hours before you)

[Harvey51]

Hi Nic,

Can you get the site back to this point

Ok, we are coming closer... ;-)
I placed the CSS code in my CSS file and also placed a h1 tag in the index.html (see below) and it shows that there is a h1 tag in the 'h tag checker':

Then we'll sort through the display.

[nic2009]

Ok, done. The h1 tag is recognized... but my logo is displayed not exactly on the right position. Waiting for your reply. Thanks a lot.

[nic2009]

Sorry, but had to change the code back to the original as it was not possible to access the menu anymore... and I need it to work on the site.
Could you not just send me the modified code incl. h1 tag, so I just have to place it and everything is fine?

Or is there a time where you in front of the computer, so that I change it for this moment?

Please let me know & thanks a lot.

[Harvey51]

There are probably some other CSS rules in place that effect your logo and menu. I would need to see the effect and cause.

My office hours are 10:00 - 16:00 GMT. I check the Joomla forums regularly.

[john_rambo]

thanks for these cods i will use them i hope it will work,, fo me That's a very impressive article, thanks for sharing with us, and hope to read more from you. We've read it many times.

[nic2009]

Hi Harvey51, I would be online now for the next 2-3 hours. Please let me know when you have time. Thanks & bye...

[Harvey51]

Hi Nic,

Hope your still there?

[nic2009]

Yes, do you have Skype? Would be easier, I send you a PM with my Skype ID.
If not, we go on like this... ;-)

[Harvey51]

I'm in an office with colleges and clients, and not on my usual machine so this will be easier, just apply the change as previous to the point where your display, menu break and we'll sort it quickly.

[nic2009]

Ok, done...

[nic2009]

But the h1 tag text is visible (barely visible red font in the Social Bookmarks) and that's why the logo moves downwards.

[Harvey51]

The h1 needs to go outside of the anchor, also I cannot see the snippet of CSS previously supplied.

[nic2009]

Outside the anchor...? Sorry, but my HTML is more trial and error...

That's what I meant, that it might be easier that you copy the code, change it and place it again in the post, so that I can just replace it in y index file.

I really don't know where to place the CSS code... in which CSS file exactly??

Thanks a lot

[Harvey51]

Here's what you have:

<div id="logo">
<a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="/index.php"><h1>Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz></h1>
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="http://www.saunaclub.info/templates/ict ... s/logo.png" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz"/></a>
</div>

Try this instead:

<div id="logo"><h1>Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz
<a title="Fkk und Saunaclubs in Deutschland, Österreich und der Schweiz" href="/index.php">
<img title="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" alt="FKK und Saunaclubs in Deutschland, Österreich und der Schweiz" src="http://www.saunaclub.info/templates/ict ... s/logo.png" /></a></h1>
</div>

The reason I say try is because you've a lot of text in the h1, a text indent only works for the first line, therefore you might need to reduce the size of the h1.

Also because the image is not a background image, browsers might treat it as text.

[Harvey51]

Put the CSS at the bottom of template_css.css