i have a ul style menu looking like this:
<ul>
<li>
<span>Hem</span>
</li>
etc.. etc..
</ul>
the li element has an image as background that changes on hover. i do not want to display the text inside the container and therefore it has visibility: hidden.
Fun thing now; you are still able to click the link in IE and FF but in safari only the mouseover works, but you can't click the link. Changing the visibility of the span container does make it possible to click the link.
Question now is how to change the css code so that it behaves like IE and FF?
I don't want to show the text, but i do want to be able to click the menu - duh!
Rather than setting the visibility of the anchor to hidden consider the following:
ul li a
{
display:block;
width:100%;
height:100%;
text-indent: -9999px; // Hide the text
}
Working Example
Related
I have a div that is hidden until the user clicks on a link. Using the a:active + div selector the div is shown. I then have div:active, div:focus to keep the div visible.
Whilst making the div appear was simple enough, keeping it visible is the problem I have. If I click on the div (taking the active off the link and placing focus / active on the div) then the div disappears again.
I have tried using div:hover and while that shows the div (even after I click on it) when I hover off the div still disappears. Why are :active and :focus not being applied to my div?
Example: http://jsfiddle.net/pJWPE/
You could take a different approach, using the :target pseudoclass instead. The best way to illustrate this is with an example:
#box {
display: none;
}
#box:target {
display: block;
}
Open Close
<div id="box">content</div>
Warning, I'm not sure what browser support is like for this example. It works in my version of Chrome.
Why are :active and :focus not being applied to my div?
Because :active and :focus have some restrictions:
6.6.1.2. The user action pseudo-classes :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. Selectors provides three pseudo-classes for the selection of an element the user is acting on.
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos
A <div> isn't any form of input (<textare>, <input>, ...) or otherwise interactive element (like <a>, <audio>, <video>). It's just a container. Neither :focus nor :active are going to be applied.
Use :target instead as suggested by Casey.
Context is a menu containing submenus, which I want to be shown on clicking the related menu, and keep it showed while clicking a link. (quite similar to you).
HTML Markup :
<nav>
<ul>
<li>
<a href="#" >
</a>
<div>
<ul>
<li>
submenu link1</li>
<li>
submenu link2</li>
<li>
submenu link3</li>
</ul>
</div>
</li>
</ul>
</nav>
For Firefox & Chrome web browser, I personnally use :
nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
display : block;
}
The first selector references to my link anchor, in order to get which submenu show when it is clicked/tab selected. The second one, is to keep the submenu div opened as you click on a link (it keep showing the active div).
This works great for me but not for IE unfortunatly.
Sorry if this is a really stupid question, but I'm a developer and my design skills are minimal at the minute, I'm working on a personal site and I'm stuck with a minor issue.
I have a top nav with a ul and li items. These items contain link <a href... and within these tags I have a <span>.
The span only displays when the link is hover over.
CSS
div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}
The problem is, the span has quite a bit of text in, and when it displays it makes the link width large, thus pushing the rest of the top nav to the right.
Is there something I can do to tell the a tag to ignore the spans width and not change when the span is displayed but not affect the width being automatically set by the links text (non span)?
HTML
<div id="topnav">
<ul>
<li>Example<span>this is a link to google</span></li>
<li>Another EG<span>this is another link that goes to bbc!</span></li>
</ul>
</div>
It's worth noting, this text in the span appears below the nav, so I need it all to be displayed.
well, if you want you can simply remove the span out of the flow and they will stop affecting the links in any way by just giving an absolute position to the span and a relative position to the a. You also don't need the :visited I think, since I'm guessing that it will prevent the link from showing up if already visited. Like this:
div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}
You can change the bottom value to fit your needs, or add left/right properties to position them further. You may consider adding a width to the span as well. position:relative on the a is required so that the span will know from where to go 50 px downwards.
Edit: added the visited class, since it may help the ux to a degree by just changing the text color.
Simply set a width on the span/link so that it won't automatically determine it by the length of the content.
div#topnav a span { width: 50px; }
Note: 50px is an example, you can set it to whatever you want.
Try using div tag outside "a" tag which has fixed width so that your content doesnt go across the specified width.
I'm not sure if I'm using the correct terminology to describe what I'm looking for but it's the best I could come up with.
Essentially I have a list of items that I'm currently displaying in DIVs. I'm using the jQuery UI plug-ins and hooking up styles to toggle when the user hovers over each item. Now I'd like to have a small toolbar-like set of buttons appear in the upper-right corner of each item when the mouse hovers over that item. When the mouse moves up or down to the next item, the toolbar "moves" to that item. Of course, it doesn't really move - I'm assuming that I'm toggling the visibility of a toolbar associated with each item.
The latter point is due to a couple of factors including that the buttons are encoded with the id value for each list item so the command knows which item to work against.
What I need to know is how to create the HTML and CSS so that I can have a DIV with contents that are unaffected by the display of the toolbar. And the markup and style settings to get the toolbar to appear in the upper-right corner of each item, above the existing content.
UPDATE
I basically have a <DIV> wrapper that contains another <DIV> with text and another <DIV> that contains a set of image buttons (images wrapped in anchors). What I need is the HTML and CSS so that the <DIV> (or whatever other element is required to make it work) containing the buttons appears to float in the top-right corner of the parent <DIV> as shown in the picture below:
I can then use jQuery to show and hide the buttons when the item is hovered.
If you ONLY need the HTML/CSS you could do something like this:
CSS
/* this contain both your injected JS and your current content */
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;}
.highlight * {margin:0; padding:0;}
/* you will place your action buttons here, they seem to be: delete, promote, demote */
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; }
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;}
/* add the styles per each button, they will all look the same for now */
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;}
HTML
<div class="highlight">
<ul class="nav">
<li><a>DELETE</a></li>
<li><a>PROMOTE</a></li>
<li><a>DEMOTE</a></li>
</ul>
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p>
</div>
EDIT: Updated with the code I posted at http://jsfiddle.net/edCD3/
Good luck,
Leo
I have to create an html page for use on a CD. The navigation is an HTML map with co-ordinates set. When the user rolls over a co-ordinate, I want an image popup to appear beside it. There's 8 map links, and 8 corresponding image popups.
I could do this easily through jQuery, but the CD will be used on IE mainly. IE doesn't allow javascript to be run locally (without user interaction, which isn't acceptable).
Through jQuery I absolutely positioned the rollover images, but I can't set them visible through CSS with a hover. What's the best method to approach this?
You could always try some serious styling effects based on the Pseudo-class of :hover.
Without knowing your markup I would tackle along these lines...
HTML Markup
<div id="mapWrapper">
<ul id="map">
<li id="location-01"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-02"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
<li id="location-03"><span>Map Text</span> <div class="item">Additional Pop Up Text</div></li>
....
</ul>
</div>
CSS Code
#mapWrapper {position:relative;} /* include width, height and any bg imagery */
ul#map, #map li {margin:0;padding:0;list-style-type:none} /* just to reset the list to be standard in different browsers */
#location-01 {position:absolute;} /* include with, height and position top-left items as required */
#location-02 {position:absolute;} /* include with, height and position top-left items as required */
etc...
#map li .item {display:none; } /* hide the pop up text, include defaults for position based on the location of the li */
#map li:hover .item {display:block;} /* show the pop up text on hover of the LI*/
/* Note: If you need to position each pop item uniquely you could use something like... If you do, remember to move the :hover effect to be the last item in your style sheet */
#map li#location-01 .item {display:none; }
Hope that helps you out, I have had to a similar map online (not with a CD) but wanted to do it without JS and that was the easiest way to do so.
Note: If you need to offer IE6 support, you would probably be best changing the hover to be based on an ahref instead.
eg: Map Text Additional Pop Up Text
Is there a way to keep dropdown's stay on to test css styling in firefox?
for example : suppose if on this page http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html i want to keep dropdown on just to edit and styles in firebug.
Edit: the given link is just an example
Alter the CSS styles so it displays the secondary ul without needing a :hover. Alternatively toggle classnames through JS console to do the same thing.
remove the css:
#nav li ul {
left:-999em;
}
On firebug, select the link above the <ul>. You'll see the <ul> even though it's hidden. Select it, and disable the left:-999em; rule:
alt text http://img401.imageshack.us/img401/7822/firebugdetails.png
Search for left: -999em; and change it to left: auto;.
PS: Ln 35