Grow your CSS skills. Land your dream job.

CSS Horizinal thing

  • # May 25, 2011 at 11:49 am

    Hey,
    take a look of my little site:
    http://fashionaki.com/shoes/

    I would like to create a simple hover effect like i did, but i want that the price frame
    will be dynamic so i created a class like that:

    #price {
    width:250px;
    height:30px;
    background-color:#373737;
    color:#fff;
    text-align:center;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    }

    that works good, but as you can see in my website the images not keeping it horizinal,
    What should i do?

    # May 26, 2011 at 1:07 am

    I’m not sure about the whole div and image inside the anchor but what you need to do is float the a tag so they are side by side.





    If that is the html code then you need to have a div with a class of clear at the bottom and the css should look like this:


    .clear {
    clear:both;
    }

    /* put a left float on the a tag */

    a {
    color:#e90053;
    text-decoration:none;
    float: left;
    }

    /* include this if you dont want the image to jump when the color border gets added */

    a img {
    border: 7px solid transparent;
    }

    a:hover img {
    border: 7px solid #e80052;

    }

    I have tested and this should work!

    Hope it helps.

    # May 26, 2011 at 1:38 am

    also you should wrap both the image and the link each one in a single div, that way it would be more “semantic” and you will have more control on them, maybe with a class of “product” for eah one so all you have to do is


    #product{
    float:left;
    position: relative;
    }

    correct me if im wrong

    # May 26, 2011 at 3:08 am

    I would recommend replacing <div id=”price”> with <span id=”price”> and then setting display:block; in your css file. It’s not very semantic to have a block level element, <div>, inside an inline element, <a>. I don’t think it would validate either.
    Also, you don’t need to define the border style in the html, ie. <img border=”0″>. Once again, use css.
    Using the clearfix method to clear your floats would also eliminate the need for the extra div in your markup: <div class=”clear”></div>. Try this: clearfix code snippet

    # May 26, 2011 at 3:54 am

    First, thank you all for the comments!

    matthewfowles -
    Actually, that was very helpful because right now i can get them horizontal.
    I didn’t understand exactly how the clear:both works, or if it’s the best way to make it…
    thank you for the – border: 7px solid transparent;

    zell25 -
    i tried your code:
    #product{
    float:left;
    position: relative;
    }

    and then i put in the markup like this:

    But nothing changes

    Sl1dr -
    I removed the border=”0″ in the markup, thank you…
    I changed it to like you said, but i didn’t understand why is it better?
    and also couldn’t make the important thing, to eliminate the extra div of the clear:

    # May 26, 2011 at 4:03 am

    and also..
    how can i make the #price block to change color :hover

    # May 26, 2011 at 4:57 am

    Actually it doesn’t work well:

    http://fashionaki.com/shoes/

    # May 26, 2011 at 11:21 am

    sorry, this one is correct the hashtag (#) its for id’s =P


    .product{
    float:left;
    position: relative;
    }

    here’s a demo http://jsfiddle.net/zell25/gqMWG/

    # May 27, 2011 at 9:13 am

    Ok so I have done up a quick fiddle: link.
    Feel free to ask me about anything that doesn’t make sense to you.

    # May 29, 2011 at 9:13 am

    OMG! this is sick! you are good, thank you.
    I’ll try your code now… since I’ve already upload my version you can see here:
    http://letshoe.com

    but my version not passing the html validation so i will need to try yours.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".