I searched and found no solution to spacing out a series of lis for a list style menu. I realized CSS alone can't do it so I added some javascript (jQuery). I didn't want the same widths for each LI, I wanted even padding with no leftover space. If anyone can take this concept and simplify my awful javascript or offer alternatives please do so. See example here: http://www.valweb.com/menuTest/
As CSS alone can do so but old IEs can't, why not use display: table; (and table-cell) as a default (your 2nd example is just great) and use display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx; for IE<8 with the help of conditional comments?
And maybe JS/jQuery if you really must care about IE6/7 users, only served to them.
PS: you should add a rule for :focus
.mainMenu li a:hover,
.mainMenu li a:focus {
/* ... */
}
as E. Meyer states in the comments of its reset.css stylesheet: ;-)
/* remember to define focus styles! */
:focus {
outline: 0;
}
Related
I am facing a issue with styling of Ul in IE, but seems to work in chrome browser perfectly.
Even after applying this style
ul {
list-style: none !important;
}
it does not work in IE and I get a weird look for list element. My observation is this style of bootstrapper.css adds some style
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
After toggling on this style in IE browser it removes the liststyle applied.
I also tried to add below css for elements but still issue is not solved
box-sizing:border-box
Please let me know if someone faced similar issue
Add css list style property to li and try.
ul li{
list-style: none;
}
http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...
I am new to css and jquery and have a problem with a menu item. I have a Jquery Mega Menu and I want to have the Attorney Profile menu item be 1 single row instead of the two it is now. Normally I would post code but there just is to much. So I am going to post a link to the actual working site.
I tried adding fullwidth but no success.
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '1',
speed: 'fast'
fullWidth: true
});
});
I also tried to modify the css here:
.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
width: 130px;
height: 165px;
margin: 0 2px 7px 2px;
border: 3px solid #ccc;
}
But that just modifies that actual inside menu.
Here is the active site: http://gdisinc.com/barker/default.php
Notice if you roll your mouse over Attorney Profiles it will show two rows. How can I make that one row that matches the width of the site which is 960px. Thank you!
PS: I used this menu system: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
You can change the padding on this style
.dcjq-mega-menu ul.menu li a
to
padding:12px 20px;
The elements in the have a width based on their content, so reducing font-size for navigation items would work as well. Fixes for such problems are easily found using Chrome's Web Inspector / Firefox's Firebug etc.
Would be probably good to not have the small divider after contact us tab as well. You could achieve this by adding a :last-child class like this:
.dcjq-mega-menu ul.menu li:last-child a { background:none; }
The problem is that the CSS selector here is not very readable and can lead to very annoying problems later on. If you can, always change such long declarations to a single class:
.last-menu-item { background:none; }
As well, keep in mind that :last-child is not supported on Internet Explorer < 9.
http://caniuse.com/#search=last-child
Welcome to the world of CSS ... :)
It looks like you'll need to change the "rowitems" option here:
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '3',
speed: 'fast'
});
});
If you change it to '5' it should display all of the items on the same row. Take a look at the examples:
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
It doesn't look like there is a way to configure this effect per menu item unless you split the menu up into separate instances of the MegaMenu.
I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes
Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}
I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.
Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
Is there anyway possible to auto fit the width of an <li> tag to the width of the text it contains using CSS?
I'm designing a website that uses a custom CMS (and I don't have access to the code), so I'm limited in options as far as design goes.
Javascript solutions that would work on an <li> tag without having to edit any of the list properties directly would work as well.
The <li> is a block-level element, so defaults to be as wide as it can be.
To get it to "shrinkwrap" to the size of the contents, try floating it:
li {
float:left;
clear:left;
}
That may do what you are looking for.
If you want the <li>s to sit alongside each other you can try:
ul {
clear: left; /* I like to put the clear on the <ul> */
}
li {
float: left;
}
OR
li {
display: inline
}
Making it inline takes away its block-level status, so it acts like a <span> or any other inline element.
As #willoller already said, the li element is a block level element, but apart from floating it, you can also use:
li {
display: inline;
}
EDIT: Unfortunatly the following solution is displayed differently in different browsers.
In order to not let any other element float aside the list I used this:
ul {
white-space: pre-line;
margin: -25px 0 0; /* to compensate the pre-line down-shift */
}
ul li {
display: inline-block;
}
The only CSS solution that worked well for me.
ul { display: inline }
will solve all of your problems at once.
On standard compliant browsers, use min-width instead of width. On IE 6, width does what you describe.
None of the previous answers work correctly for me, so I used the following approach:
Add the style "float: left" to my <ul>
Surround the <ul> in another <div>
Adding display: inline; CSS to the <ul> block has worked great for me, with no undesired effects.
If have the id of the <li> tag you could use JavaScript to get how many characters there were and then multiply that by the font size, then set the li width to that number.
You can use em's rather than pixels to specify the width of your element. An em is roughly equivalent to the width of the letter "m" in the default font. Play with multiples of the number of characters in your li until you have an em width that is visualy appealing.
In my case it was float:right that fixed it for me: