Results 1 to 10 of 10

Thread: DIV over image: how to achieve this effect?

  1. #1
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DIV over image: how to achieve this effect?

    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:

    Code:
    #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; }

  2. #2
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    up

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

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

    Try changing
    Quote Originally Posted by you
    #copertine a:hover { background: url(images/freccia.gif) no-repeat; text-decoration: none; }
    to

    Code:
    #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.

  4. #4
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    I am assuming you are testing on IE ?
    It works fine on Firefox 1.5

    Try changing


    to

    Code:
    #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.
    Last edited by Mad_Griffith; 11-01-2007 at 05:33 PM.

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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

    Code:
    <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
    Quote Originally Posted by you
    .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

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

    Quote Originally Posted by me
    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.

    Quote Originally Posted by me
    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.

    Quote Originally Posted by me
    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.



    Quote Originally Posted by you
    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?
    Last edited by boogyman; 11-01-2007 at 06:29 PM. Reason: added reasonings for css style changes

  6. #6
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    Last edited by Mad_Griffith; 11-01-2007 at 06:33 PM.

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Mad_Griffith View Post
    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
    Code:
    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
    Code:
    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.

  8. #8
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by boogyman View Post
    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
    Code:
    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...

    Quote Originally Posted by boogyman View Post
    now as for the hover image. try
    Code:
    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?
    Last edited by Mad_Griffith; 11-01-2007 at 11:47 PM.

  9. #9
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    help, please...

  10. #10
    Join Date
    Nov 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •