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
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
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: <div id="product">
<img src.......... /> <div id="price"> </div>
</div>
But nothing changes
Sl1dr - I removed the border="0" in the markup, thank you... I changed it to <span> 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:
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?
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:
I have tested and this should work!
Hope it helps.
correct me if im wrong
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
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:
<div id="product">
<img src.......... />
<div id="price"> </div>
</div>
But nothing changes
Sl1dr -
I removed the border="0" in the markup, thank you...
I changed it to
<span>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:
how can i make the #price block to change color :hover
http://fashionaki.com/shoes/
here's a demo http://jsfiddle.net/zell25/gqMWG/
Feel free to ask me about anything that doesn't make sense to 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.