Headline with 'Go To Top' button

[bassa]

Heya!

I've played around with giving my sub-headlines a graphical background as well as a small button in the right-most side of the DIV container.

Here's the code for the sub-headline:


<p><div id="h2">Blanco vaske<a href="#headline" class="top" title="Gå til toppen"></a></div></p>

And here's the CSS code for the Div Classes/ID's:


#h2 {
font-family: Georgia;
font-size: 1.9em;
width: 708px;
background: url(../images/bg_h1.gif) no-repeat;
height: 35px;
line-height: 35px;
text-indent: 5px;
}

.h2 {
font-family: Georgia;
font-size: 1.9em;
width: 708px;
background: url(../images/bg_h1.gif) no-repeat;
height: 35px;
line-height: 35px;
text-indent: 5px;
}
.top {
background: url(../images/close.gif) no-repeat;
margin: 0px;
padding: 0px;
float: right;
height: 30px;
width: 30px;
display: block;
}

And here's how it looks on the website:

http://www.froso.dk/test/produkter/vaske.html

Now, it works pretty ok... but I just can't place the damn X-icon on top of the grey background fader above in the sub-headline.

Any help? lol


Cheers,
Bassa

[Snookerman]

Try this:

#h2 {
font-family: Georgia;
font-size: 1.9em;
width: 708px;
background: url(../images/bg_h1.gif) no-repeat;
height: 35px;
line-height: 35px;
text-indent: 5px;
position: relative;
}
.top {
background: url(../images/close.gif) no-repeat;
margin: 0px;
padding: 0px;
height: 30px;
width: 30px;
display: block;
position: absolute;
top: 6px;
right: 8px;
}

Good luck!

[bassa]

YES, BABY! :D

Thanks! ;)

[Snookerman]

:D You're welcome, glad to help!
You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!