Joomla Header Image Hyperlink

HTML & CSS
1

Hello there,

I am at my wits end trying to set a hyperlink to a background image in a Joomla header. The header now has two image…a logo on the left (no hyperlink) and a registration button on the right which I am trying to link to the registration page. I have a feeling it’s a problem with my div tags or absolute positioning but I am stumped!?!:goof:

Here is the css:

div#logo {
position: absolute;
width: 298px;
height: 75px;
top: 25px;
left: 35px;
background-image: url(‘…/images/joomla_logo.png’);
background-repeat: no-repeat;
}
#registration {
position: absolute;
width: 100px;
height: 50px;
top: 25px;
left: 750px;
display: block;
text-indent: -9999px;
background-image: url(‘…/images/registration_button.png’);
background-repeat: no-repeat;

}
#registration a {
position: absolute;
width: 100px;
height: 50px;
top: 25px;
left: 750px;
display: block;
}

Here is the html:

<body>

<a name=“up” id=“up”></a>

<jdoc:include type=“message” />

<div id=“center”>

&lt;div id="wrapperholder"&gt;

	&lt;div id="wraptop"&gt;&lt;/div&gt;

	&lt;div id="wrap"&gt;

		&lt;div id="header"&gt;

			&lt;div id="headerlinks"&gt;

				&lt;div id="headerrechts"&gt;

					[B]&lt;div id="logo"&gt;
					
					    &lt;div id="registration"&gt;
						
						  &lt;a id="registration" href="http://ipm-essen.com/index.php/component/user/register" title="registration button" a id="registration"&gt;&lt;/a&gt;[/B]

					
					&lt;/div&gt;

<jdoc:include type=“modules” name=“top”/>

Any pointers would make my day! :slight_smile:

Here is the site: http://ipm-essen.com

Thank you,

Johnny

2

Just so this same mistake isn’t made in the future, you can’t absolute postiion something and then float it, the float will be overridden by the AP and thus you could essentially remove that rule from the stylesheet with no adverse side effects :slight_smile:

3

Great! Sometimes it’s hard to give an exact solution without downloading the site and testing locally. Glad you were able to sort it.

4

Thanks Ralph,

Worked a treat but got “2” buttons until I removed the div “registration”.

<div id=“logo”>

/<div id"registration">/ 

						  &lt;a id="registration" href="http://ipm-essen.com/index.php/component/user/register" title="registration button" a id="registration"&gt;&lt;/a&gt;

					
					&lt;/div&gt;

Thank you very much for your help!!! :slight_smile:

5

Try removing some of the styles on the link:

#registration a {
	width: 100px;
	height: 50px;
        display: block;
     [COLOR="Red"]/*   top: 25px;
	left: 750px;
        position: absolute;
        float: right; */  [/COLOR]      
}