14 replies to this topic

[Malacia]

Was wondering if anyone could help me with this, I've been working on a website and I want to achive a hover effect that displays an image to the right of the text.

At the moment i've got list-style-image: url(images/hover.jpg); but this displays the image to the left, is there a way of position the image to the right using this technique or can somebody tell me how to achieve the desired effect using a different method

thanks

Here's the site (Note, it only works in firefox atm, will get round to getting it to work in IE when the layout is completed) http://aardvarked.co...oing/Index.html

Edit: Also, whenever I hover anywhere vertically the bunny image appears, how can I get it to only appear when I hover on the text?

Edited by Malacia, 02 August 2006 - 06:48 PM.

[xis]

I'm looking for almost the same answer.

I'm okay with having the image on the left side but when link is rolled over the image would change.

Lame example:

Normal State
- link 1
- link 2

Hover State
+ Link 1
+ Link 2

Thanks in advance.

Edited by xis, 02 August 2006 - 07:59 PM.

[Malacia]

li { list-style-type: disc; }
li:hover { list-style-type: circle: }

Change the disc/circle to whatever you want

[xis]

Not sure what I'm doing wrong but it's not working.

Not in IE anyway.

[Malacia]

Yeah, doesnt work in ie ;[

[seraph!m]

To work in IE, that would have to be:

li a

and

li a:hover

[xis]

seraph!m, on Aug 3 2006, 11:37 AM, said:

To work in IE, that would have to be:

li a

and

li a:hover

:bashhead: didn't work either.

[saferwaters]

ul { list-style-type: disc; }
ul:hover { list-style-type: circle: }

I copied it mostly from the one above, but thats how its set in my stylesheet, try it

EDIT: Although I haven't used ul:hover before...so im not real sure about it

Edited by darthpaim, 03 August 2006 - 10:03 PM.

[rc69]

The :hover pseudo name only works with the "a" selector in IE. As anchors have no list-style's, simply changing li:hover to li a:hover wouldn't work. To get this the image to show up on the right, you will have to use a background-image, and align it to the right (maybe with a little padding also).
To get it to work in IE, google it, it's a common problem.

Edited by rc69, 04 August 2006 - 12:05 AM.

[xis]

The most over stated term on the internet

Quote

To get it to work in IE, google it, it's a common problem.

I don't mean this to sound like a flame to you rc but it seems you have answer and don't want to share it. It's all good. Since I decided to change my format anyway It's really not important. However, when you say google it you are assuming that I haven't already (truth is I spent about an hour trying to "google" it)

The problem is that you would somewhat need to know what to google in the 1st place. For instance "The :hover pseudo" is not a term I'm used to. I'm no where near a coder/programer/webmaster/developer call it what you will. I'm simply trying to screw around with something on my free time. I know my html fairly well but recently when I put some work out there on these borads for people to look and comment on, I was told, "your code is bad" etc.. I'm simply trying to change that by putting together a cleaner code. I'm new to css and what not.

Again, this isn't meant as a flame but just consider what may seem easy and logical to you may not to others.



UPDATE FOR Malacia:

I think I've figured it out to a point here's the code.

CSS

.menu
{
	padding: 0px;
	margin: 0px;
}
.menucell
{
	width: 15%;
	vertical-align: top;
	background-color: #ffffff;
}
.menu ul
{
	list-style: none;
	padding: 0px;
	margin: 0px;
	text-align: left;
}

.menu li
{
	border-top: 1px solid #ffffff;
}

.menu a
{
	display: block;
	background-color: #ffffff;
	color: #000;
	text-decoration: none;
	width: 100%;
	border-right: 8px solid #4F633F;
	padding-right: 5px;
}

	.menu a:hover
{
	text-decoration: none;
	color: #000000;
	background-color: #ffffff;
	border-right: 8px solid #D7E9A1;
}

html part

<table cellspacing="0" cellpadding="0">
<tr>
<td class=menucell>
<div class="menu">
<ul>
<li><a href="#other">home</a></li>
<li><a href="#other">about</a></li>
<li><a href="#other">everything wedding</a></li>
<li><a href="#other">everything else</a></li>
<li><a href="#other">contact us</a></li>
	</ul>
</div>
</td>
</tr>
</table>

Found the info here

Hope that helps

Edited by xis, 04 August 2006 - 02:49 AM.

[seraph!m]

xis, on Aug 4 2006, 01:39 AM, said:

I don't mean this to sound like a flame to you rc but it seems you have answer and don't want to share it. It's all good. Since I decided to change my format anyway It's really not important. However, when you say google it you are assuming that I haven't already (truth is I spent about an hour trying to "google" it)

His post gave you the explanation of why it wouldnt work in IE, and then suggested a way to solve the problem that he knew of. The suggestion of googling was simply for you if you didn't want to follow his other suggestion.

[Sikh]

Ok lets see if this works. I took the liberty to go into your css file if you dont mind.

Ok i will use one of the menu items and its CSS properties as an example.

Example(using .home):

Here's the code.

li.home
{
background-image: url(images/icon_home.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 1px 0 1px 20px;
margin: .2em 0; }

This is what i would do to get the hover effect you want.

li.home
{
background-image: url(images/icon_home.gif)  no-repeat;
background-position: 0 50%;
float:left;
padding: 1px 0 1px 20px;
margin: .2em 0;
text-decoration:none;
text-align:left;
}

li.home a
{
background-image: url(images/icon_home.gif) no-repeat;
background-position: 0 50%;
float:left;
padding: 1px 0 1px 20px;
margin: .2em 0;
text-decoration:none;
text-align:left;
}

li.home a:hover
{
background-image: url(images/icon_home.gif)  no-repeat;
background-position: 0 50%;
float:right;
padding: 1px 0 1px 20px;
margin: .2em 0;
text-decoration:none;
text-align:left;
}

Now if im right this code should/should not work because i am a person who likes to do the test/experiment on DEMAND. Since i dont have a copy of the index and the css file no can do. So i did this code to the best of my ability.

If you dont mind i will need the whole site. The index,Css,Images. I'm not gonna rip you or anything. I want to do the test LIVE, On DEMAND. To see if im right. Now i've done a lot of css hover effects like the said one here but i've done them in vairous methods. Methods only i can understand because there unique. Your method is a typical method which will work because i've used it 1'nce or 2'twice myself. So don't lose hope just pm me a link to the Zip file containing the site and i would be more then glad to hlep you the RIGHT way.

Or get on MSN with me if you have it.
MSN: gfxsikh@hotmail.com

Please if you want this effect to work i would want you to cooperate with me but thats your choice.

Thanks for reading and i hope that this was helpful/ or will be.

[xis]

I'm not sure about Malacia but I got this to work like I wanted it to work.

Here's my result

Also on the comments by seraph!m:

I may have interpreted RC's post incorrectly, it was pretty late for me at the time of reading it, so I guess apologies are in order.

[rc69]

xis, on Aug 3 2006, 11:39 PM, said:

The most over stated term on the internet

Quote

To get it to work in IE, google it, it's a common problem.

I don't mean this to sound like a flame to you rc but it seems you have answer and don't want to share it. It's all good. Since I decided to change my format anyway It's really not important. However, when you say google it you are assuming that I haven't already (truth is I spent about an hour trying to "google" it)

The problem is that you would somewhat need to know what to google in the 1st place. For instance "The :hover pseudo" is not a term I'm used to. I'm no where near a coder/programer/webmaster/developer call it what you will. I'm simply trying to screw around with something on my free time.

Trust me, i started the same way. I do this stuff in my free time, learnt everything i know because of this site (some would say i know almost everything, even though i don't). When i started, i didn't like hearing the term "google it" at all, i half wanted to kill somebody for putting it in their sig. Now, i'd be lost without google, i can find almost anything i want to with it. Before, i would google stuff and turn up nothing, like ":hover pseudo," i didn't know where to begin searching, but now i do, and that's why i tell people to "google it."
It's not so much i have an answer and don't want to share it, it's that i know the answer is out there. If you did search for it and found nothing, ok, i understand (typically i would've provided a link, i just didn't have time). If you ever need a little help with finding something, or getting something to work, i'm more then willing to help, and i'm glad that you got this sorted out on your own.

p.s. I understand the late night thing... it's been happening to me quite a bit lately

Edited by rc69, 06 August 2006 - 01:26 AM.

[xis]

Right on brotha. I'm glad we understand eachother.