Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.
Related
I'm making a typora theme and styling it with CSS. I don't really have much access to the HTML generated since it's generated by the program, but it does provide a lot of flexibility.
I'm trying to just move UL ::markers a couple pixels to the right.
Anyone know a solution?
Thanks much.
As #enhzflep suggested in a comment, you could increase the space before the bullet by applying padding on the ul in CSS. Here's how it's done (I have made two lists—ordered and unordered):
ul {
padding-inline-start: 39px
}
<ol>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>
<hr>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
https://i.stack.imgur.com/scn6l.png
I need to create a list with katakana, so I created a class .lisDestaq with list-style-type:katakana, but when I load the class in div it doesn't work.
.lisDestaq{
color:#2255AA;
list-style-type:katakana;
}
then on html
<div class="lisDestaq">
<ul>
<li> Death Note </li>
</ul>
but the katakana doesn't show up
I can just put in css ul{list-style-type:katakana;} and it works, but I want to set it into the class, can somebody help me? why isn't working?
https://i.stack.imgur.com/hLs7S.png
use this in your css .lisDestaq ul instead of .lisDestaq you need to set on child class also and you are just set to div class
CSS
.lisDestaq ul{
color: #2255AA;
list-style-type: katakana;
}
HTML
<div class="lisDestaq">
<ul>
<li> Death Note </li>
</ul>
</div>
You can edit or preview Here
I am trying to debug my footer but I keep getting bugs like
(Element h4 not allowed as child of element ul in this context)
Can anyone explain.
I cant place the HTML because for some reason it does not work.
Probably because there are some mistakes in the code.
Link to my website is
http://www.timberlife.nl
And then inspect element at the footer of the page.
<ul>
<h4 class="footerr">SUPPORT</h4>
<br>
CONTACT
<br>
FAQ
<br>
DISCLAIMER
<br>
</ul>
It starts with this.
<h6 class="text-white copy-text">
Many thanks!
Daan
According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.
Reference: w3.org ul element
The error is thrown because your list structure is invalid. All content must be wrapped in li tags.
<ul>
<li><h4 class="footerr">SUPPORT</h4></li>
<li>CONTACT</li>
<li>FAQ</li>
<li>DISCLAIMER</li>
</ul>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Also, you should use a CSS file (or at least an embedded style tag) rather than inline styles:
<style>
ul li a {color: white;}
</style>
If you want to use any heading tag within ul then you should place it within li tag because any list inside ul or ol tags can be made only by li tag.
so please try this
<li><h4 class="footerr">SUPPORT</h4> </li>
This Should work
Sometimes working with wordpress can be a pain. Im trying to style a menu that is generated by wordpress.
here is the basic html
<div class="footer">
<!--Generated By Wordpress-->
<ul class="menu">
<li class="menu-item">
<a></a>
<ul class="sub-menu">
<li class="menu-item">
<a></a>
</li>
</ul>
</li>
</ul>
<!--End Generated-->
</div>
I want to create some CSS to target specifically the <a> within the sub menu, without messing with the <a> in the main menu. Also I cant mess with any other menus I have set up on the site, so this also must be specific to the footer menu.
Would this be the proper method?
.footer .sub-menu a { }
What would be the proper method for this?
Actually you are right the following ways are appropriate:
1
.footer .sub-menu a{}
2
.footer ul.sub-menu a{}
3
ul.sub-menu a{}
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.