Forums

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

Home Forums CSS CSS Horizinal thing

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #32854
    intodesign
    Participant

    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?

    #75292

    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.

    #75286
    zell25
    Member

    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

    #75291
    intodesign
    Participant

    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:

    #75284
    intodesign
    Participant

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

    #75280
    intodesign
    Participant

    Actually it doesn’t work well:
    http://fashionaki.com/shoes/

    #75254
    zell25
    Member

    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/

    #75111
    intodesign
    Participant

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.