I have this problem with CSS round corners. The link to example is here: http://www.xplus.dnawrot.nazwa.pl/
As you can see at the top on the dark blue background is a dropdown menu. The problem concern hover state on the first ul li list(items: oferta, klienci, akademia) wchih has children. As you will notice if you make mouse focus on the oferta item it display round corners properly, but if you go down to second ul li list (drop down - "rozwiazania branzowe", "produkty", etc) right side of round corner disapperas. And it's logical becouse there is CSS style for li element and a element, and if the mouse leaves an a element the hover is removed. Does anyone has a solution for this problem?
If the description is not clear let me know and I'll try to explain more detailed.
Regards,
Dave
Maybe you could try to wrap "a" and "ul" in a "span" tag and then use css to control span:hover instead of a:hover.
<li class="">
<span>
<a class="sf-with-ul" title="Klienci" href="http://www.xplus.dnawrot.nazwa.pl/pl/klienci">
<ul style="display: none; visibility: hidden;">
</span>
</li>
I haven't tested it but you could give it a try.
Related
enter image description here
Hello im very new to this. I have created a webpage with links running horizontally across the page. When i hover over each title it has a background colour. However the hover size is a fixed size. I want to know how i can get the hover to automatically adjust depending on link length.
/* change the link color to #272727 on hover */
li a:hover
{
background-color:#272727;
max-width:200px;
}
thanks for any help
It looks to me that the "max-width: 200px;" CSS property isn't required. So try:
li a:hover
{
background-color:#272727;
}
Without specifying an explicit max width, your link elements will size to the width of their parent li. So when you set the background colour on hover, the entire word will be highlighted, without any overflow.
But if you could provide a fiddle to confirm, that'd be really helpful!
If m not wrong then i think i got your solution. You are asking that how can you give background color on hover without changing the size or might be you are facing issue with size of li while hovering so please see this fiddle
I have used padding for normal a tag and remove fix width from hover. So now m just changing the background color and it will applied automatically on text/link. Please let me know if you are facing any issue. Thank you
HTML
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>RESCUES</li>
<li>Help</li>
<li>VEHICLES</li>
<li>VOLUNTEERS</li>
<div style="clear:both;"></div>
</ul>
</div>
CSS
div{background-color:teal;width:100%;}
li a:hover{background-color:#272727; color:#fff;}
li a{ padding:6px;}
ul li{list-style-type:none;float:left;padding:6px;}
li a {text-decoration:none;}
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.
I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover
I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!
Could you help me fix the menu on this this page? The menu list items don't have a width defined, so they display at 100% width in IE7. If I make the span.right have a float: left, it fixes the problem, but then the rounded corners don't work. A possible solution might be to get rid of the right span and set a padding and background image to the anchor, but that will: a) prevent me from being able use to a background image on the anchor (for this instance, I suppose a solid color will do) and b) require that I break menu.png into separate image files.
If you guys have any good suggestions, let me know. Thanks!
If you move the actual text to the middle, between <span class="left"></span> and <span class="right"></span>, and encompass it in <span> tags:
<li><a href="#">
<span class="left"></span>
<span>Home</span>
<span class="right"></span>
</a></li>
You can then add the CSS rule:
#menu ul li a span
{
float: left;
}
Then remove float: left; from span.left and span.right. This should work fine on both Firefox and IE 7, and I'm assuming most other browsers too. Of course, this will only work if you're OK with restructuring the HTML a little.