Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Gallery Issues

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #33885
    mwdewitt
    Member

    Hey, everyone. I need some help again. Okay, so, I am creating a gallery for my personal website and I am having some issues.

    Here is my website: http://www.mwdewitt.com/gallery/

    Right now, I have each image in the gallery wrapped in a div. I would like for the border on each image to be black and then turn hot pink on rollover. As you can see, I am not getting that effect. Instead it adds a second border within the first. Help!

    Also, I have all my images wrapped within another div. For some reason, if I try to add padding, it only adds it to the top, left, and right, but not the bottom. Help!

    Here is the CSS code from the Stylesheet for the gallery:

    /*
    Gallery
    */

    div.gal {
    background: #EBEBEB;
    float: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    div.img {
    margin-right: 4px;
    margin-bottom: 4px;
    border: 10px solid #000000;
    float: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    div.img a:hover {
    border: 10px solid #FF0082;
    }

    div.gal .inside {
    padding: 14px;
    }

    I know I am doing something wrong. I just do not know what. Thank you in advance for any help that you can give!

    #84918
    mwdewitt
    Member

    Thank you for your help, but the amount of HTML code is 5,745 characters too long for me to put it into a message on CSS-Tricks. Sorry. And I tried putting 14 pixels on all sides and it still does not do the bottom correctly. And try the link again!

    #85362

    What @stevencrader said. Change

    .img a:hover {
    border: 10px solid #FF0082;
    }

    to

    .img:hover {
    border: 10px solid #FF0082;
    }
    #85406
    TheDoc
    Moderator

    @cnwtx – why should he take that out? It’s a standard reset. Some people don’t use it, but there is no reason to take it out. Others, like myself, start every project like that.

    #85416
    mwdewitt
    Member

    Thank you for your help, guys, but it is still acting wonky. Check the link again and you will see what it is doing now. It is still placing the neon pink border within the black one, but to a greater extent now. Sigh.

    #85418
    TheDoc
    Moderator

    If you do what @joshuanhibbert said it should work perfectly.

    Change this:

    .img: hover {
    border: 10px solid #FF0082;
    }

    To this:

    .img:hover {
    border: 10px solid #FF0082;
    }
    #85426
    mwdewitt
    Member

    Oh, I didn’t see that little “space” there. Good eyes! It’s fixed. Thank you everyone for dealing with my stupidity. This is why I should not be a programmer.

    #85427
    TheDoc
    Moderator

    No worries! It’s the small things that are the easiest to overlook.

    #85428
    mwdewitt
    Member

    Tell me about it. I crashed my website a few days ago and it was all because I forgot to close a “div.”

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.