On my style.css I have this CSS
* {
padding: 0px;
margin: 0px;
outline:none;
}
ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
I use it on most of my pages, I want to cancel it on a specific page, how can I achieve this without removing the whole CSS file?
I have tried unset but it doesn't work, also tried to remove for a specific element but is still not working
ul, li:not(.editor) {
margin: 0;
padding: 0;
list-style-type: none;
}
The main reason for this is that editor(ckeditor 5) doesn't display lists, and list style, also padding and margin are affecting space between rows
not looking good
how it should look
Update:
From how I have it on style.css on my index.php I want to for the whole page or for the editor(best option) like this:
* {
}
ul, li {
}
I want that lists and style list to just behave normal, right now they are removed because of that CSS from my style.css
In the specific page give the body a special class like this
<body class="unstyle">
then on your css file reset the style
.unstyle ul, .unstyle li{
margin: 0;
padding: 0;
list-style-type: none;
}
Related
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
I have a footer, which has a horizontal menu.
CSS
footer {
height:99px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 20px;
padding-top:26px;
}
li {
float:right;
width:8%;
}
I want to make it so that when I make other menus, the css for the footer menu won't affect it. What would be an effective method for this? The html is just a basic <footer> tag.
In this case, you can use descendant relationship, where you say apply the style to ul elements which comes inside a footer element.
footer {
height:99px;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 20px;
padding-top:26px;
}
footer ul li {
float:right;
width:8%;
}
If you want to be more specific(if you might have multiple footer elements in the page) you can assign a class to the footer like myfooter then use the class selector also like
footer.myfooter {
}
footer.myfooter ul {
}
footer.myfooter ul li {
}
Have a look st the different CSS selctors
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).
I am am having trouble removing list bullets on my on line resume. I have tried the following :
.nobull {
list-style: none;
list-style-type: none;
}
And clearing my browser cache. Here in a link to the resume.
You're attempting to set the property on your p tags, you'll want to either eplicitly set the class on the ul elements, or embed your ul elements inside the p tag (which I think is invalid markup, but I could be wrong there).
ul.no-bull,
.no-bull ul
{
list-style: none;
}
Alternatively you could adopt an "opt-in" approach to bullet points, which is what most tend to do; this saves you from having to add no-bull to each ul. Something like this:
ul
{
list-style: none;
margin: 0;
}
ul.has-bullets
{
list-style: none outside disc;
margin-left: 18px;
}
ul {
list-style-type:none !important;
}
Just list-style: none; works, but I don't see where you use the class .nobull
I have a reset.css style sheet that looks like this,
HTML * {
margin: 0;
padding: 0;
padding: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
text-decoration:none;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size: 83%;
}
ul,
ol,
li {
list-style:none;
}
a,
hover,
visited {
color:#06508b;
}
a,
img,
fieldset {
border: 0;
}
Now this should make my content sit flush with the top of the browser window however it is not, can anyone see a reason for this? You can see the problem here http://www.ibdnetwork.co.uk
It looks to me that you're reset stylesheet is correctly removing the margin and padding on the body element. This leads me to think that it's something inside the body that is pushing your content out of position.
After a quick look in firebug...
It looks like your style on line 20 of default.css needs to be:
h1 {
font-size:28px;
}
Just remove the margin-bottom:25px.