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;
}
Related
I copied this code as an example of a nested ul and li inside a nav, but my vs code is showing me there is an error, can anyone point it out to me?
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
It is not valid CSS syntax, since CSS does not support nesting blocks like that. Your code is written in a CSS preprocessor syntax like SASS or LESS.
It is equivalent to this vanilla CSS code:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Your editor is probably complaining because you included this inside a file with the .css extension. It needs to be saved as .scss or .less depending on flavor and then you need a compiler to turn it into vanilla CSS.
I'm currently learning SASS, so if this seems obvious, don't laugh!
I have a unordered list, which on li > a hover the ul background changes.
Changing the a link background is simple enough, but how do I target the ul element? I've tried using &, ~ and < which has been advised on several online tutorials, but I've had no luck. Any and all help would be appreciated, Thank you.
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
a {
margin: 0;
padding: 0;
display: block;
font-size: 60px;
font-size: 3.75rem;
color: rgb(255,255,255);
font-family: 'Cera PRO Medium';
text-decoration: none;
&:hover & li & ul {
background-color: red;
}
}
}
}
If I understand your question, just add hover property to ul element:
ul {
margin: 0;
padding: 0;
&:hover {
background-color: red;
}
...
https://fiddle.jshell.net/fo214wkd/
This can't be achieved with normal CSS, even with SASS. You'll need to use a jQuery or other JavaScript alternative to achieve this.
In the CSS Level 4 draft there is a :has pseudo selector which could achieve this, however that's only a dream at the moment.
I know this isn't a jQuery question, however a very basic jQuery example would be:
$j("a").on("mouseover", function() {
$j(this).parent("ul").addClass("hovering");
}), (function() {
$j(this).parent("ul").removeClass("hovering");
});
This question already has answers here:
Nested CSS styles?
(4 answers)
Closed 8 years ago.
So I was on Sass webpage learning a bit of its Syntax and saw a strange CSS Syntax that I don't know if it's posible.
Before asking I've already searched on W3School and other sites if that's posible.
Here is the code I found strange:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
My question is if this Syntax is posible, I tried it and it doesn't work.
I also thought it can be a different language and searched but found nothing.
The normal Syntax I would do to make the code above work would be like this:
nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
SASS is a CSS preprocessor.
What is a preprocessor?
A preprocessor is a program that takes one type of data and converts it to another type of data.
It means that the code you've seen in SASS webpage isn't CSS syntax, it's SASS syntax, that is transformed in the latter after its preprocessor translates it.
The code you provided above would be transformed in something like this:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
TL;DR
Before that style is added to a webpage, it's transformed into CSS. There's no stylesheet.sass references in an HTML page.
I am going nuts, what am I missing, something obvious I am sure, to make my nav buttons stack next to each other inline and not on top of each other. When I tried using display: inline they all got real tiny like slivers!
http://awesomenesslabs.com/staging/brenna-resp/
Just change your UL and LI CSS to this:
ul {
list-style: none outside none;
display: block;
}
li {
line-height: 18px;
margin-bottom: 12px;
display: inline-block;
}
#navbar > ul > li {
display: inline-block;
}
You should add a class like this.
#navbar ul li {
display: inline-block;
}
and your work tab hover position should be
.nav-work-button:hover {
background-position: 0 -47px;
}
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).