I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.
Related
When using Draft.js, I'm able to use blockStyleFn to modify the styling of list items by using contentBlock.getType() === 'unordered-list-item' which only targets the li. I'm not able to target the surrounding ul or ol though.
When using textAlignment="center", it's causing some strange styling. I'd like to override this behavior by adding styles to the ul and ol tags as well as the li, but I'm not able to target the surrounding ul or ol using blockStyleFn.
Another issue is Draft.js adding HTML such as div and span tags in the li. Because of this, it's even harder to achieve my goal.
How would i go about using textAlignment="center" but modify it just for lists?
Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.
jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.
The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }
I have 2 css and both of them have specifications for nav
What would be the best way to use both of them?
The issue here is the second definition of nav has also a li definition that involves an id like
<li id="all">All</li>
This id I am using on a js.
I have this fiddle
Just use the :not operator in CSS and exclude the first nav from second nav css definition.
Add a class to firstNav, and then inside the css use :not like so
nav ul:not(.first)
Edit
Check the fiddle again. Seems like there is another trick to do this, something called a substring matching . Note that the order of the css in the fiddle is important. if you flip the definitions of the navs, the css will not work. I haven't tested this in IE 8, but based on what I read, it should work in IE8 as well.
Fiddle
How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx
To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.
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: