DIV over image: how to achieve this effect?

[Mad_Griffith]

Hello, right HERE you can see some CD covers, and when you mouseover one of them, you see a small arrow on it. I would like to make so that the arrow actually stands out and is centered: as of now the arrow is covered by the CD cover. Can you help me please?

This is the CSS code I'm using for the current "hover" effect for the covers:

#copertine { list-style-type: none; margin: 0; padding: 0; width: 100px; }
#copertine li { float: left; width: 100px; height: 100%; list-style-type: none; margin: 0; padding: 0; }
#copertine a { display: block; width: 100px; height: 100%; background: transparent; text-decoration: none; }
#copertine a:hover { background: url(images/freccia.gif) no-repeat; text-decoration: none; }
#copertine img { width: 60px; height: 60px; }
.copertine_titolo { font-family: Arial, Tahoma; color:#66737F; font-weight: bold; font-size:10px; }

[Mad_Griffith]

up

[boogyman]

I am assuming you are testing on IE ?
It works fine on Firefox 1.5

Try changing

#copertine a:hover { background: url(images/freccia.gif) no-repeat; text-decoration: none; }

to

#copertine li a:hover { 
     background: url(images/freccia.gif) no-repeat top left; 
     text-decoration: none;
}

also there is no use in using a list if everything is separated by the use of table layout.

[Mad_Griffith]

I am assuming you are testing on IE ?
It works fine on Firefox 1.5

Try changing


to

#copertine li a:hover { 
     background: url(images/freccia.gif) no-repeat top left; 
     text-decoration: none;
}

I use both IE7 and FF2. What do you mean with 'seeing it correctly'?

If you see something like this, then it is not correct. I would like to set the arrow centered and forward in respect to the disc cover.

I've also done the edit you suggested, but nothing really changes...

also there is no use in using a list if everything is separated by the use of table layout.

I'm sticking with CSS unless I'm fully taught about how to achieve the effect with tables.

[boogyman]

what I was talking about in regards to the table layout is

<td class="alt1" valign="top">
<center>
<ul id="copertine"> <li>

<a href="http://www.unprogged.com/showthread.php?t=2528" title="ANATROFOBIA - Brevi Momenti Di Presenza">
<img src="http://www.unprogged.com/geek/gars/images/2/anatrofobia_brevimomentidipresenza.jpg" alt="ANATROFOBIA - Brevi Momenti Di Presenza" class="whiteborder" border="0" />
<br />
<span class="copertine_titolo">ANATROFOBIA - Brevi Momenti Di Presenza</span>
</a>
</li>
</ul>
</center>
</td>

you have alot of extra code in there. its great that you are using css, and really you shouldn't be using tables at all... however by using the tables, you do not need to use the unordered list... what you have right there can very easily be wrote as

<td class="coppertine">
     <a href="http://www.unprogged.com/showthread.php?t=2528" title="ANATROFOBIA - Brevi Momenti Di Presenza">
          <img src="http://www.unprogged.com/geek/gars/images/2/anatrofobia_brevimomentidipresenza.jpg" alt="ANATROFOBIA - Brevi Momenti Di Presenza">
          ANATROFOBIA - Brevi Momenti Di Presenza
     </a>
</td>

and in your css file you can make these changes.

replace

.alt1, .alt1Active
{
background: #E2E9F4;
color: #272727;
}
.alt1 a:link, .alt1_alink, .alt1Active a:link, .alt1Active_alink
{
color: #516575;
text-decoration: none;
}
.alt1 a:visited, .alt1_avisited, .alt1Active a:visited, .alt1Active_avisited
{
color: #516575;
text-decoration: none;
}
.alt1 a:hover, .alt1 a:active, .alt1_ahover, .alt1Active a:hover, .alt1Active a:active, .alt1Active_ahover
{
background: #BAD3E8;
color: #516575;
text-decoration: none;
}
.alt2, .alt2Active
{
background: #E3EAF5;
color: #272727;
}
.alt2 a:link, .alt2_alink, .alt2Active a:link, .alt2Active_alink
{
color: #516575;
text-decoration: none;
}
.alt2 a:visited, .alt2_avisited, .alt2Active a:visited, .alt2Active_avisited
{
color: #516575;
text-decoration: none;
}
.alt2 a:hover, .alt2 a:active, .alt2_ahover, .alt2Active a:hover, .alt2Active a:active, .alt2Active_ahover
{
background: #BAD3E8;
color: #516575;
text-decoration: none;
}
#copertine { list-style-type: none; margin: 0; padding: 0; width: 100px; }
#copertine li { float: left; width: 100px; height: 100%; list-style-type: none; margin: 0; padding: 0; }
#copertine a { display: block; width: 100px; height: 100%; background: transparent; text-decoration: none; }
#copertine li a:hover {
background: url(images/freccia.gif) no-repeat top left;
text-decoration: none;
}
#copertine img { width: 60px; height: 60px; }
.copertine_titolo { font-family: Arial, Tahoma; color:#66737F; font-weight: bold; font-size:10px; }

with

td.copertine {
     background: #E2E9F4;
     color: #272727;
     font-family: Arial, Tahoma; 
     font-weight: bold; 
     font-size: 10px;
}
td.copertine a:link, td.copertine a:visited, td.copertine a:hover, td.copertine a:active {
     color: inherit;
     text-decoration: none;
}
td.copertine a:hover {
     background: #BAD3E8 url('images/freccia.gif') no-repeat top left; 
}
td.copertine img {
     display: block;
     border: 0;
     width: 60px;
     height: 60px;
}

td.copertine {
background: #E2E9F4;
color: #272727;
font-family: Arial, Tahoma;
font-weight: bold;
font-size: 10px;
}

creates a default styling for each of table data cells, however I would actually recommend one step further and putting the font-family and font-size declarations in the body{} style. the font-weight style is probably appropriate to keep here as it is specific to this element. While this isnt wrong to keep it here, I am just trying to help you clean up your code as much as possible to help the page render more quickly.
This also gets rid of your improper use of the <element id="something">. ID's are meant to be used when an element appears once and ONLY once on a page, however for every label you have, you have put the td cell as an id.

td.copertine a:link, td.copertine a:visited, td.copertine a:hover, td.copertine a:active {
color: inherit;
text-decoration: none;
}
td.copertine a:hover {
background: #BAD3E8 url('/images/freccia.gif') no-repeat top left;
}

creates the default styling's for the hyperlinks of each label. Rather than declaring the text-decoration: and color: for each anchor psuedo selector separately, I combined them all and set the color to inherit to use the color of the td.copertine that we created in the last style.
if you you notice that td.copertine a:hover selector only has the 1 property, that is because it will default the rest to the style above. the only difference between the two is that we want that arrow image to show up when the label is hovered over.

td.copertine a img {
display: block;
border: 0;
width: 60px;
height: 60px;
}

this style is one that I combined from many others that you had previously. I set the cd label image to display on its own line, thus negating the need for the span tag, also deleted the border around the image, and set the width / height properties.


I hope you understood what I just did, the css only needs to be applied once in your stylesheet, however you can replace all of your table data cells with with the html that I provided, just changing the link / image / text as needed. This will greatly cut down on your storage / bandwidth / and render (display) time for your page. If you have any questions please feel free to ask.

If you see something like this, then it is not correct. I would like to set the arrow centered and forward in respect to the disc cover.

what do you mean centered and forward? are you talking about appearing "over" the label? like directly above?

[Mad_Griffith]

Ok, I've inserted (with some small and unimportant edits) the HTML and CSS code you've just posted. Thanks for that.

Now let's come to the screenshots.

This is what I see now in IE7 (with your latest HTML/CSS suggests). There is no sign of the arrow anywhere:



This is what I see now in FF2.0 (with your latest HTML/CSS suggests too), instead. Notice the wrong text color (though the property is specified in the CSS class) and that the arrow's shown as a background of the text:



And, finally, this is how I'd like the whole thing to look like:

[boogyman]

Ok, I've inserted (with some small and unimportant edits) the HTML and CSS code you've just posted. Thanks for that.

Now let's come to the screenshots.

This is what I see now in IE7 (with your latest HTML/CODE suggests). There is no sign of the arrow anywhere:



This is what I see now in FF2.0 (with your latest HTML/CODE suggests too), instead. Notice the wrong text color (though the property is specified in the CSS class) and that the arrow's shown as a background of the text:



And, finally, this is how I'd like the whole thing to be:

okay well that is something we can work with

the text assignments are something I have faith you can work on yourself, just change the

td.copertine {
     ...
     color: #value;
}

you had multiple colors for that so I just picked one and it turned out wrong, sorry but easy fix

now as for the hover image. try

td.copertine a:hover {
     background: url('/images/freccia.gif') no-repeat center;
     z-index: 10;
}

that should put your arrow in the center of the element but above the cd label.

[Mad_Griffith]

okay well that is something we can work with

the text assignments are something I have faith you can work on yourself, just change the

td.copertine {
     ...
     color: #value;
}

you had multiple colors for that so I just picked one and it turned out wrong, sorry but easy fix

Uhm, I changed colour but it displays correctly just in Firefox: in IE the class "ALT1" prevails... it looks like it inherits the colour, somehow...

now as for the hover image. try

td.copertine a:hover {
     background: url('/images/freccia.gif') no-repeat center;
     z-index: 10;
}

that should put your arrow in the center of the element but above the cd label.

Done that, thanks, but doesn't work... any ideas?

[Mad_Griffith]

help, please...

[Mad_Griffith]

a friend of mine manage to help. thanks a lot for you effort boogieman!