close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

achieving inline style on hover?

Thread began 3/11/2013 12:44 pm by CraigR | Last modified 3/12/2013 3:30 pm by JamieEff | 2158 views | 8 replies |

CraigRBeta Tester

achieving inline style on hover?

I realise that cssmw cannot have a different image background for each <li>element, and so I would usually apply an inline style with cssmw to achieve this
my client would like to have a menu which has an image which pops up on rollover, something like on the following site.

www.pizzaza.ca

I was hoping to start off with cssmw, but realised that it is only on the li:hover where I want the image to appear, and as a pseudoclass, I don’t think I can achieve this with an inline style.

Has anyone tackled something like this before, or have any ideas/suggestions ?

Sign in to reply to this post

Jason ByrnesWebAssist

edit the menu LI tags to give them individual ID's

then you can create unique styles for each ID:


li#idName a:hover { <styles go here> }

Sign in to reply to this post

CraigRBeta Tester

that's great, thanks Jason, I'll make a start tomorrow

Sign in to reply to this post

CraigRBeta Tester

thanks for your help Jason.

I tried creating a simple menu in css menuwriter and coding the css as you suggested, and have made progress.

The menu will look fine if I want the images to appear below the menu on rollover, but I can't get the menu to appear as i want if the images are to appear above it.

i tried assigning a negative margin to my tag, but this pushes up the whole of the li element

attached is a page with the css embedded, so hopefully you can see the issue, - the first link shows the image below the menu on hover, the next links show the image with increasing levels of negative margin.

eg

ul#cssmw1 > li#reviews1:hover > a:link {
height: 200px;
outline-style: none;
background-image: url(CSSMenuWriter/images/image.png);
border-bottom: none;
background-repeat: no-repeat;
margin-top: -200px;
}
Sign in to reply to this post

JamieEff

Hey Craig

I had a similar 'issue' a couple of weeks ago - perhaps post 2 in this thread might help?

showthread.php?t=30282

Jamie

Sign in to reply to this post

CraigRBeta Tester

Thanks Jamie.

using your css, i noticed the key thing was setting a negative margin and a corresponding positive padding to each li hover class.

eg

ul#cssmw1 > li#home1:hover {
outline-style: none;
background-image: url(CSSMenuWriter/images/image.png);
border-bottom: none;
background-repeat: no-repeat;
padding-top: 150px;
margin-top: -150px;
}



When dealing with css issues, it would be better for me if I could analyse what was happening - rather than the trial and error approach I often have to use.

Anyway, it looks pretty good now, and I'm happy with it.

icing on the cake would be if the image which appears on hover was also clickable, as it stands, the image appears 'above' the navigation, but the clickable area is 'just' the text block.

Sign in to reply to this post

JamieEff

I know what you mean.

In terms of making it clickable, you can make the whole element clickable.

It was just a question of creating the padding in the first instance. If it helps, heres the css I did for the one in the other thread which may help you to deconstruct/reconstruct:

ul#cssmw > li > a, ul#cssmw > li > a:link {  background-color: #5d5e61;  background-image: none;  border-left: 2px solid #fff;  color: #FFFFFF;  display: block;  font-family: Arial, Helvetica, sans-serif;  font-size: 14px;  font-style: normal;  font-weight: normal;  height: 25px;  padding: 120px 0px 0px 0px;  text-align: center;  text-decoration: none;  text-transform: uppercase;  width: 91px;  outline-style: none;}

<!-- HOME -->
ul#cssmw > li#home > a:active, ul#cssmw > li#home > a:focus { background-color: #bc8548; background-image: url("../images/misc/nav-arrow.png"); background-position: center 143px; background-repeat: no-repeat; color: #FFFFFF; font-weight: normal; text-decoration: none; outline-style: none;padding-bottom:20px;margin-top:-20px;overflow:hidden;}
ul#cssmw > li#home:hover > a, ul#cssmw > li#home:hover > a:link {background-color: #bc8548; background-image: url("../images/misc/nav-arrow.png"); background-position: center 143px; background-repeat: no-repeat; color: #FFFFFF; font-weight: normal; text-decoration: none; outline-style: none; padding-bottom:20px;margin-top:-20px;overflow:hidden;}
ul#cssmw > li#home.current > a.current, ul#cssmw > li#home.current > a.current:link { background-color: #bc8548; background-image: url("../images/misc/nav-arrow.png"); background-position: center 143px; background-repeat: no-repeat; color: #FFFFFF; font-weight: normal; text-decoration: none; outline-style: none;padding-bottom:20px;margin-top:-20px;overflow:hidden;}

As you can see in the first line, I created a padding of 120px which set the space which was clickable

Obviously this was just one navigation point but there were others which had different coloured hover/on states.

and for a visual ref, have attached a screenshot of the nav showing that the on effect isnt just limted to the text area ...

Sign in to reply to this post

CraigRBeta Tester

Thanks again for the tip.

I found setting the padding in the

ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {

on its own wasn't enough, it just moved the image further up the screen in my example, so i tried setting a negative margin for this too...

ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {
background-color: transparent;
background-position: 95% 50%;
background-repeat: no-repeat;
border-bottom: dotted 1px #9EA3AA;
color: #343446;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
height: 20px;
line-height: 20px;
margin: -100px 0 0 0;
padding: 100px 10px 5px 5px;
text-decoration: none;
width: 150px;
outline-style: none;
}



At the moment, I am just testing on a vanilla page layout so don't know if it will work in my design... but this gives me a larger clickable area!

Sign in to reply to this post

JamieEff

no probs Craig... glad I could at least have been some help :D

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...