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
Related
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
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>
...
Okay so here is the link to the page I'm working on:
http://students.thenet.ca/jlandon/
As you can see, the list is still displaying vertically instead of horizontally.
CSS:
li { display:inline;
list-style-type:none;
}
#nav { background-color:#c6c7c3;
height:50px;
margin-top:120px;
z-index:2;
}
HTML
<div id="nav">
<ul>
<li><h2>Home</h2></li> <li><h2>About</h2></li> <li><h2>School</h2></li> <li><h2>Workshop</h2></li> <li><h2>Contact</h2></li>
</ul>
</div>
Okay now I see why that wasn't working (H1-6 are blocks) so here is the specifics of what I want the navigation to look like (please help me):
site design http://students.thenet.ca/jlandon/images/sitedesign.png
Why are you using H2 for the navigation elements?
Change them to also display inline, or use an inline element.
h2 is a block element by default, which is what's breaking your lines.
You can fix it by either setting display: inline on the h2s (probably not a great idea) or by replacing the h2s with something else (like just styling the a tag to be the size and font etc you want).
I think a float: left would fix this:
li
{
display:inline;
float: left;
list-style-type:none;
}
You should consider using semantic classes instead of using block elements like h2 in your navigation. If by using the h2 element, you want a bold font with a certain size then you should consider this:
.nav-text, #nav li a {
font-size: 1.25em;
font-weight: bold; }
#nav {
background-color: #c6c7c3;
height: 50px;
margin-top: 120px;
z-index: 2; }
Also notice that I use em instead of pixels. This will help in responsive design if you decide in the future to extend the page to mobile sites.
Your html will something like this:
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>School</li>
<li>Workshop</li>
<li>Contact</li>
</ul>
</div>
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;
}
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit