I am making a mobile webapp with JQuery Mobile. Now at the bottom I have some kind of a navigation menu. Here is the HTML
<ul data-role="listview">
<li data-icon="arrow-u">Top</li>
<li>Menu</li>
<li>Contacten</li>
<li>Klanten</li>
<li>Planning</li>
</ul>
Now I want the first listItem at the right side. So I made a css class 'top'
.top{
text-align:right;
padding-right:35px;
}
But for some reason it doesn't take this CSS class. Can anybody help ?
Try such:
ul li a.top{
text-align:right;
padding-right:35px;
}
OR such:
ul li:first-of-type a{
text-align:right;
padding-right:35px;
}
You are applying the top class to the a intead of the li.
Update
As your styling gets overridden, you need to increase the CSS-specificity of your selector until it is higher than the specificity of the rule that overrides it. As I don't know much of your DOM, the best I can give you is:
ul li.top{
text-align:right;
padding-right:35px;
}
But that might not be enought. Look through the article on CSS-specificity, there is a part on how to calculate specificity.
I've discovered that in certain cases overrides are a bit tricky. You may have to do something like this. Some browsers mobile & web are not picking up the overrides as I would have expected. End result I have to use important to make sure my style gets applied. Just be careful of how use this and where.
ul li.top{
text-align:right !important;
padding-right:35px !important;
}
Related
I have removed small dots in ul > li by css style:
li{list-style:none;}
But there are some small dot in <li>tag now. How can I remove them. I have searched a lot and used li,ul{display:block; list-style:none; list-style-type:none; .....} too. But nothing worked. Inspecting elements was not helpful. Would you please help me remove these blue small dots?
You are using correct css but you have applied it on li tag, It should be on ul tag.
Use following css:
ul{list-style:none;}
You can remove bullets by setting the list-style-type to none on the CSS for the element, for example
ul
{
list-style-type: none;
}
You might also want to add padding:0; margin:0; to that, if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
Remove it by making it a link(a tag) and then disable the link if don't want it.Maybe an indirect way would help
I have a vertical menu like the one you can see HERE. The thing is - I want to have something like header. As you can seen, now my structure is this:
<div id="wrap">
<ul>
<li class="first">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
I could add another <div class="menu-header"> on top of the <ul> but I think that the it would be much easier and appropriate to just change the firs <li> item to looks like a header. However if I just add a class like I'm doing in the example the final output is the same (the styles are not overriden. I can use !important but this is kind of last resort.
Even though it's not a ton of CSS I would like to change only some things and other (like width for example) to be left as they are for all other elements. So how can I do this? Is there more CSS-like approach than just adding !important to each style I want to override?
There are two alternate ways to achieve this.
Alternate 1.
Use the first-child of the class first of the li which is a child of ul
ul li.first:first-child
For Instance,
ul li.first:first-child{
/* Your CSS Values. */
}
Alternate 2.
Use first-child of li which is nested inside its main parent #wrap (which is a unique identifier). Use this alternate only if you do not want to use the class first on li
#wrap ul li:first-child
For Instance,
#wrap ul li:first-child{
/* Your CSS Values. */
}
Hope this helps.
I'd give the CSS selector first-of-type a try.
li:first-of-type {
...
}
http://www.w3schools.com/cssref/sel_first-of-type.asp
Your problem with the example given is called specificity. Take a look here for a working example.
Without using of classes, to style the first-element of a list I suggest you to use the pseudo-class first-child.
#wrap ul li:first-child {
background: none;
color: #000;
}
I've tried to search this topic but it's kind of a hard topic to get the right keywords to find what I'm looking for.
What is the difference between #menu-nav ul {...} and ul#menu-nav {...} ?
I am currently working to make a inline-block nav menu in a Wordpress theme and here is the CSS producing the effects I want (ie removing list-style-type, creating blocks, centering them within their parent container, etc).
ul#menu-nav {
margin:0 auto;
padding:0;
}
#menu-nav li {
list-style-type:none;
display:inline-block;
width:118px;
height:56px;
color:white;
border:1px solid black;
}
If I change the ul#menu-nav {...} to #menu-nav ul the padding:0; and margin:0 auto no longer overrides the User Agent stylesheet. Frankly, this makes me assume that my CSS is hacky and I am going about this wrong.
Any suggestions or help or references would help immensely! I'd like to understand fully why they produce different results.
ul#menu-nav and #menu-nav ul mean very different things.
ul#menu-nav means "the ul tag with the id "menu-nav". (Which is kind of superfluous, since id needs to be unique anyway then it doesn't make a difference which element has it. Unless I suppose the content is dynamic enough that there's a chance that id might be applied to different kinds of elements in different circumstances, but that's probably a confusing design anyway.)
Example:
<ul id="menu-nav"> <-- This is what's being selected
<!-- any other content -->
</ul>
#menu-nav ul means "the ul tag(s) which are descendants of the element with the is "menu-nav".
Example:
<div id="menu-nav">
<ul></ul> <-- This is what's being selected
</div>
#menu-nav ul {...}
Means any ul inside a tag with id="menu-nav"
and
ul#menu-nav {...}
Means an ul with id="menu-nav"
I'm trying to get li elements in a ul to have equal width, and fit on one line, with CSS, without knowing how many lis there are when the CSSis made (i.e. dynamically generated HTML).
W3Schools has a navigation bar example, but it's fixed-width, and if you add another li rather scaling to fit, the whole layout gets thrown off.
This is their example:
CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Ideally, I would be able to add another li and the menu would still display great.
Even thought I hate this solution... if you really need it to work with just HTML/CSS and auto-update width, a table would do the trick.
Otherwise I would recommend just having some simple JS updates the widths for you. If you are adding the extra options via JS it would be easy to toss this in.
EDIT: Actually, depending on your targeted browsers. You could use the display: table stuff but it is limited to IE8+.
DEMO
You will have to do this with javascript I guess...
you could use javascript to get the window width and the number of list items. If you have these you can assign a fixed width using javascript.
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.