- This topic is empty.
-
AuthorPosts
-
May 25, 2011 at 11:49 am #32854intodesignParticipant
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 #75292matthewfowlesMemberI’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 #75286zell25Memberalso 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:54 am #75291intodesignParticipantFirst, 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
and also couldn’t make the important thing, to eliminate the extra div of the clear:May 26, 2011 at 4:03 am #75284intodesignParticipantand also..
how can i make the #price block to change color :hoverMay 26, 2011 at 4:57 am #75280intodesignParticipantActually it doesn’t work well:
http://fashionaki.com/shoes/May 26, 2011 at 11:21 am #75254zell25Membersorry, 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 29, 2011 at 9:13 am #75111intodesignParticipantOMG! 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.combut my version not passing the html validation so i will need to try yours.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.