which would be better.

span or class=body_con?

[wa9578]

Hi all,

I've asked before about a image going into a hover box (still not got it to work) but upon trying to find a solution I've found the span function so am wondering which would be better coding wise...

would it be better to do...

<li>
<a title='Anti Virus blah blah blah' class=body_con href="#">
Anti Virus</a> 
</li>

or...

<li>
<SPAN TITLE=”Antivirus blah blah blah” href="#">Antivirus</SPAN>
</li>

actually writing this am beginning to think the first one... its meant to be part of a drop down navigation, but making it so people can see what the link is before clicking it.

My reason for thinking the first one would be to anchor it... and the "span title" would be if it was ordinary text within a paragraph? guess work but seems to make sense to me (ish).

[Fotiman]

The second example is not valid. There is no href attribute on span elements. If it's a link, then the <a> element is the appropriate element.

[wa9578]

wahoo I finally go something right lol, thans for clearing it up/confirming though foti(you da)man

I know I give ya a headache but least am learning lol

[rocknbil]

There is one more thing you should/could consider.

<li>
<a id="some-unique-id" title="Anti Virus blah blah blah" class="body_con" href="actual_link_to_real_content.html">
Anti Virus</a>
</li>

Your link operates wih Javascript, most likely. But turn it off and what do you have? A link to the page you're already on.

Never overlook the opportunity to feed search engines - which don't execute Javascript - more content, even if that content is just a small page with more links on it. The way you'd do that is by returning false on your link with the Javascript. Like

<script type="text/javascript"> 
window.onload=function() { attachBehaviors(); }; 
// 
function attacheBehaviors() { 
 if (document.getElementById('some-unique-id')) { 
 document.getElementById('some-unique-id').onclick=function() { return get_link(this.href); }; 
 } 
} 
// 
function get_link(url) { 
 alert('do something with ' + url); 
 return false; 
} 
</script> 

What does this do?

- attaches the behavior to the link externally (and now you know why I added an ID)
- The return false stops the link form navigating when clicked - if Javascript is enabled.
- If Javascript is not present or disabled, users - and SE's - can still access content via the link.
- You leverage the actual link itself in your get_link function, so you don't have to clog up your code with declared variables or inline stuff (onclick="return get_link('some-url');" )

[SuzyUK]

I've asked before about a image going into a hover box (still not got it to work)

you still struggling with this?

you probably need both for a popout image, though you can actually do it with just the image itself, most folks can visualise it better with a span though.

put a span inside the <a> and effect it when the <a> is hovered on, get a coloured span popping out first to see the theory, then you could put an image inside the span or just use an image instead of span

<img> and <span> are both inline elements so both can go inside an <a>!

<a href="#">Your Link Text<span></span></a>

a {position: relative;}
a span {display: none; position: absolute; width: 100px; height: 100px; background: #dad;}
a:hover span {display: block;}

[wa9578]

hi rocknbill... That part of the sites not actually done through javascript. Or at least if it is I've managed to create it wthout any actual knowledge of it or looking fora script on it :s. My code is pretty much what I posted, just mine has the blurb an an actual link lol.

I've got the J/S false thing on there with a gallery so luckily I understood what you meant :) (got a j/s gallery and if they do't have j/s enabled it will open acss gallery), but thank you for explaining again anyway because as suzy knows I'm hard work and often get lost with stuff.

you still struggling with this?

lol suzy you know me, I have all these ideas and have no idea (if am honest) what to do or how to acheive it but I plodder on until I've got it (and f I get stuck I give you a head ache lol).

This is a development on the nav bar we spent ages doing lol (well I spent ages trying, and you banged it out in seconds and spent ages trying to tell me why, what does what lol).

Will;

 <a href="#">Your Link Text<span></span></a>

a {position: relative;}
a span {display: none; position: absolute; width: 100px; height: 100px; background: #dad;}
a:hover span {display: block;} 

go straight into the code or do I need to create a different ID?

[SuzyUK]

it should just fit it in with structure you already have..

but you will need to do a bit of the work, like make those CSS rules more specific to match your existing selectors, or they likely won't work.. this is easy just follow the waterfall/cascade pattern of your existing code

so if this is already in your #sitenav menu, it may be that you need to look for the rules which are affecting the links.. it might look like this, can't remember your whole cascade!

#sitenav ul li a {} : and make sure

position: relative

is on it.. it might be that it's already already there, if so you don't need to add it again.. you'll know soon enough anyway as the absolute position of the span or image will take the colored box/image up to the top left of the page or container if it's not..

then follow the cascading selector pattern, take the next two rules, and prefix them with the same pattern, in the case above the specificity prefixing the <a> is #sitenav ul li.. this should keep the specificity of the rules the same - and is what is meant by the cascade!

[prefix] a span {}
[prefix] a:hover span {display: block;}

-------------------

if this does only apply to a specific part of you menu . i.e. one of the dropdowns you might want to add an ID to the overall list e.g. <ul id="thelistID">.. like we did for the "team" part.. however, from memory, I don't think this should affect anything else, even without extra ID's as you have no other spans in links doing anything.. so try it without any extra ID's first but do make sure the CSS is specific as described above

if an ID is used, the CSS would be made more specific by adding a <ul> ID into the selector.. e.g. remember the selctors are read from right to left

#sitenav #thelistID li a span {}

so descending element tree is: div, ul, li, a, span

the more parts <elements> of the descending HTML tree (DOM) you use in a CSS selector the more specific it becomes, everytime you use an ID you make it like the ultimate selector, an ID should only be used once per page, so while,

div ul li a {}

might target hundreds of <a>'s on the page, as soon as you start entering ID's you start to narrow down which <a>'s can be affected quite dramatically.. the #sitenav one limits it to just the links inside the #sitenav div, if you need to narrow it even further a <ul> ID does it! though like I said the <span> in your code might do it all on it's own if every span in the #sitenav div is to be treated the same!
---------------------------------

You will get the ahah moment eventually, as you keep trying you will see that the CSS methods are usually always the same, it's just that the elements themselves may differ depending on the tool for the job :)

[wa9578]

Suzy... thanks as always... so...

basically if I did this... it would work (obviously missing other headings in each li)

<li>downloads
<ul>
<li>
<a href="avirusurl">AntiVirus<span>anti virus blah blah blah <img src="imgurl" height="100px" width="100px" ></span></a>
</li>
</ul>
</li>
<li>Affiliates
<ul>
<li>
<a href="pdurl">pd<span>pd blah blah blah <img src="imgurl" height="100px" width="100px" ></span></a>
</li>
</ul>
</li>

Am I right with that bit? I'm not going to lie, I've not tried it as my hard drives at home and so not got it all to play with. Just trying to see if I got my head around the theory :), also apologies about all the space and bad use of space, it's just how I set it out so I can see things easier.

If doing it like that do I have to add in the css you used?

a {position: relative;}
a span {display: none; position: absolute; width: 100px; height: 100px; background: #dad;}
a:hover span {display: block;}

Or will it work fine without?

Am I right editing the image size in the <span> or is that what

a span {display: none; position: absolute; width: 100px; height: 100px; background: #dad;}

is dealing with (or is the the whole span (my guess is whole span but learning so confirming :))

[SuzyUK]

yeah that looks right :)

re the CSS you will likely need to add your

#sitenav ul li

part before those rules (using whatever the ID of the overall menu container is!), but see the bit in above post about making sure the specificity matches your already existing selectors.. basically as long as they are the same pattern and end with a, a span, a:hover it should be good to go

and lastly yes you can control the width/height of the span via the CSS (that's 100px x 100px in my example) OR via the image attributes itself.. up to you.. if the images are all the same size you might want to do it via the CSS.. and lastly I see you have some text prefixing the image so it would be an idea to make the a span img {display: block;} - prefixed by your existing pattern - this will help it appear underneath the text and stop the span ever widening if you do use the image attributes to control the dimensions

Good Job! best advice as always is to play around and see what each thing does, before adding it into your menu

Suzy
:)

[wa9578]

Cheers chicken :)

See I am learning, just a long slow process for it all to sink in lol.
I think I will do the image size through the span as the images will have to be different sizes (not all square lol).

I'll have a play around with it, tonight (sighs) or tomorrow (as in work time) and fingers crossed get it sussed.

[wa9578]

Just updating you, have got the image working in the span... and by the looks of it is all going to work fine... as it stands at the minute I've not altered the css, so the info within the span is there (with the image) next to the link.

If i remember rightly this is good and the css (if I do it right will hide it until its hovered on).

Here's to praying I do the css right lol... damned office is too noisy I need headphones and music grrrrr

[wa9578]

argh disaster strikes :s for some reason now have edited the css connecting to the files keeps timing out :s

ahhh well least am halfway there.

I struggled with the css part (as always) but I figured it would be the same thing as the #navteam

So I copied and changed the #navteam to #navdl and changed where it said img to span only thing is I can't see if it worked or not due to this issue grrrrr. I don't think its related as it keeps doing it with other files.

[wa9578]

typical after I spend ages trying to fix something I post and I manage to do it lol.

for anyone else trying this my plan didn't work... back to the drawing board

[wa9578]

ok nearly there :)

this is how it appears now...

[i116.photobucket.com...]

so we have the image in there and I can edit the text that comes up too...

I think I did it right (tried to follow your instructions Suzy but you know I get lost so probably went wrong lol)

The only thing I need to change really is, when you hover over the link, it appears slightly over it, can this be changed to be next to it? If not it's not a problem just trying to get the consistency right :)

I've tried adding padding-left however it moves the text but not the span itself. Is this because of it being a span (my other ones without images go under the thing you hover on but is as per the original code) i.e

<li>
<a title='Anti Virus blah blah blah' class=body_con href="#">
Anti Virus</a>
</li>

[wa9578]

I've noticed as well that when you hover over the download heading it moved the entire website to the left then when you move down the options, moves it to the right again.

to see what I mean [everybodyonline.bravehost.com...]

My code is currently:

#sitenav ul li {}
#sitenav a span {
visibility: hidden;
position: absolute;

} 
#sitenav a:hover span {
visibility:visible;
color:black;
width: 100px;
background:#FFF;
font-size: 10px;
padding:auto;
} 

but i have tried it with;

#sitenav ul li {}
#sitenav a span {
visibility: hidden;
position: relative;

} 
#sitenav a:hover span {
visibility:visible;
color:black;
width: 100px;
background:#FFF;
font-size: 10px;
padding:auto;
} 

but that didn't work :s

that made it so the other options under "downloads>antivirus" were all hidden and then when hovered over "anti virus" the span and the
other options appeared, all with the red back ground :s

Any ideas?

[SuzyUK]

move the properties from the hover span, onto the span rule, - except the

visibility: visible;

one, of course lol

the font-size before the link is hovered on (while the top li is still being hovered on) is still at the default size, which is bigger and makes the description box longer then the page, thus generating a scroll bar and moving the content over.. you wouldn't have noticed it if there was enough content on the page.. but to be safe and give the hover less work to do.. move the properties so that the span knows to be 10px before it's even hovered on ;)

#sitenav li a span {
visibility: hidden;
position: absolute;
left: 100%;
color:black;
width: 100px;
background:#FFF;
font-size: 10px;
} 
#sitenav li a:hover span {
visibility:visible;
}

[wa9578]

tut something as simple as that lol. Thanks hun it worked :) and as you can see from the times I've been trying all day ha ha. Least you know I've been trying though rather than just asking and expecting someone to do it.

Taking it a stage further I can see the affiliates needing to pop up to the left.

If I've understood it right (which I hope i have)

create id i.e "affiliates"

css rule should then be

#sitenav ul#affiliates {}

#affiliates li a span {
visibility: hidden;
position: absolute;
left: -200%; /to make it appear on the left/
color:black;
width: 100px;
background:#FFF;
font-size: 10px;
}
#sitenav ul li {}
#affiliates li a:hover span {
visibility:visible;
}

I think?

[SuzyUK]

yeah & no you shouldn't need to redeclare all the rules if they are the same as a normal span.. just

left: xx;

and the #affiliates is added to the ul so you don't need to redeclare the hover that makes it visible either, #affiliates is still a child of #sitenav so that rule is fine as it is, you *should* just need

#affiliates li a span {
left: -100%;
}

or to keep the same specificty going, and to remind you of the "tree"

#sitenav #affiliates li a span {
left: -100%;
}

and yes I think it will only be -100%, where it is now is +100%, 0 takes it over the top of the <a>, so I think -100% to take it left lol.. but I haven't tested that one

You're on a roll today! :)

[wa9578]

Wahooo i just tried it and I was right :) (apart from the left: -200%; as it was too far i should of had left: -100px;

I know you've helped me loads in understanding it all and helping with the code but I'm actually rather proud of myself for getting that to work lol.

Thanks again for all your help hun :) (think thats about 10 drinks I owe you now)

[SuzyUK]

You're Welcome.. and I make it at LEAST 10 ;)

[wa9578]

tut I checked again before I posted my thing and it hadn't said you posted lol.

You're on a roll today! :)

Doesn't it make a nice change? I'm normally getting all annoyed and F****d off with it lol

Mine works so I'm still going to give myself a big pat on the back and thumbs up lol.

I originally posted the thing with -200% because I mis read what was there and was meant to be px (thinking it was 100px for the drop down and 100px for the span to start) but I sorted that bit lol. and was just -100px.

I'm now going to add in your rule... and get rid of mine (i tried lol) but as you know what your doing a hell of a lot more than i do who am I to argue or go against you lol

[wa9578]

and I make it at LEAST 10 ;)

Some people would think I was trying to get you drunk lol... speaking of which its a leaving do so am off to the pub now for a couple of hours (how's that for timing lol).

thanks again hun and least you can see its starting to sink in... just with slight errors here and there... or until I start a new bit ha ha