I am currently having trouble with wrapping my head around the idea of class and id selectors. Posted below is my current markup for my navigation. What I am trying to achieve in my css stylesheet is the horizontal menu.
Why can I not target .navigation-menu to style everything within this class (.navigation-main)?
<nav class="navigation-main">
<ul class="menu">
<li class"home">Home</li>
<li class"submit">Submit a Pic</li>
<li class"advertise">Advertise</li>
<li class"contact">Contact</li>
</ul>
</nav>
CSS
.navigation {
display:inline;
}
You are not targeting the elements:
.navigation-main li{
display:inline;
}
You're looking for this:
.menu li {display:inline;}
according to the question its because you apply the css on the class navigation which is not used you need to include this class to apply the css
try
.navigation-main li {
display:inline;
}
It seems like you might be confused about how CSS selectors work. A class needs the same name as it's definition to actually match.
HTML
<div class="my-class"></div>
CSS
.my-class
{
...
}
So, to answer your question (as it is currently), why you can not target .navigation-menu to style everything within .navigation-main. It is because your CSS class .navigation does not match any classes in your current HTML
To style your NAV with class="navigation-main":
CSS
.navigation-main
{
...
}
To style only a UL with class="menu" that is inside a NAV with class="navigation-main":
CSS
.navigation-main .menu
{
...
}
To style all the elements within NAV class="navigation-main"
CSS
.navigation-main *
{
display:inline;
}
Related
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
I have a template I am modifying. It links to a stylesheet that the following code to manipulate unordered lists.
ul {
float: left;
margin: 0 40px 16px 0;
padding: 0;
list-style: none;
}
I have a separate style sheet that has the following:
.featured_list ul {float: none; list-style: circle; list-style-position: inside;}
.featured_list li {margin: 5px;}
In my HTML code I reference my class like this
<ul class="featured_list">
Can anyone please tell me why my list is still set to float left tag? Thanks for any help.
For this markup
<ul class="featured_list">
you should be selecting it as
ul.featured_list {
styles here
}
You want this:
ul.featured_list
That is a ul with the class featured_list. Your selector is for a ul contained within an element with class featured_list.
The issue is with the way you are writing your selector for unordered list as:
.featured_list ul{float:none; list-style:circle; list-style-position:inside;}
This will try to find all ul elements which are child elements of element with class featured_list. Instead of this you can directly use the class name to apply the style to the list as:
.featured_list {float:none; list-style:circle; list-style-position:inside;}
DEMO:
If you cannot change the CSS file, then you want to wrap the ul with .featured_list:
<div class="featured_list">
<ul>...</ul>
</div>
If you can change the stylesheet, then you need to change the styles to:
ul.featured_list {}
I have to apply CSS for the following list:
<div id="divul">
<ul>
<li group="opt1">Wake up</li>
<li>Go to sleep</li>
</ul>
</div>
How to get the li with from group "opt1" in CSS?
Thanks!
You can use the attr-selector
li[group=opt1] {
color: red;
}
http://jsfiddle.net/Su7nD/
Use the selector li[group="opt1"], taking advantage of the CSS attribute-equals selector.
References:
CSS attribute selectors.
Demo
CSS attribute selector li[group="opt1"]
css
#divul > ul > li[group="opt1"] {
color: Green;
}
You have to use following:
#divul ul > li[group="opt1"] {
/* style you want to apply */
}
fiddle
Take a look also here:
custom attributes selectors css
I'm kinda stuck at the moment. I'm trying to create a navigation bar for my first site.
In the body of the html i have
<div id="navbar">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Now my css is
#navbar {
margin: 0 auto;
text-align: center;
But i would also like to add
a:hover,a:active {
background-color:#7A8B8B;
Which currently is applied to any link on the page not just those in the navigation bar. How do i go about applying the hover link style just to #navbar.
Thanks!
Try...
#navbar a:hover,#navbar a:active {
background-color:#7A8B8B;
}
Which means apply these styles to the a tags contained in the element with the id of navbar
fiddle
This should do the trick
A CSS selector followed by a space and another selector means [2nd selector] IN A [1st selector]
So div a means any "a"'s within a "div"
#navbar a:hover,#navbar a:active {
background-color:#7A8B8B;
}
Try this:
#navbar a:hover,#navbar a:active {
background-color:#7A8B8B;
}
This would mean that the a that is in the navbar ID has the background color set as such
I have a navigation element in HTML, I can change it with external CSS, but I want to compare how to call it from inside the HTML,
so I got
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul>
<li>Why?</li>
<li>Synopsis</li>
<li>Stills/Photos</li>
<li>Videos/clips</li>
<li>Quotes</li>
<li>Quiz</li>
</ul>
</div>
</div>
If i put on header
<link href="css/custom.css" rel="stylesheet" type="text/css" />
I can change my list to show as navigation on CSS with
#navigation ul li {
display: inline-block;
}
but now I want to compare, and call this element from inside the HTML
I use in the head, and comment CSS
<style>
#ul.navigation{display:inline-block;}
</style>
But I dont think im referencing the element right
Also how will I call this "inline-block" property for my list inside my actual html body? [inine style]
I see the CSS working fine, but I want to compare calling with style in the head and how to call it in the body,
I have seen examples for the 3 cases,
http://www.w3schools.com/css/css_howto.asp
I see it working with paragraph, but will need more clarification to know how will work with my element?
thanks
Have you tried to put like this :
<style>
#navigation ul li {
display: inline-block;
}
</style>
With #ul.navigation{display:inline-block;} you are selecting the wrong element.
ul.navigation -> your ul element with classnavigation.
# stands for ID. So #ul.navigation isn't valid.
You probably meant div#navigation or even better div#navigation ul li to select the li elements of the ul element that is the child of a div with ID "navigation".
Like this:
<style>
div#navigation ul li {
display: inline-block;
}
</style>
JSFiddle.
You can use the css in this way..
#navigation ul li