what is the difference between that .navbar and .navbar a
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I can't get to find what the difference is between those. Please don't get irritated I am a noob at web technologies
If you have the below HTML
<div class="navbar">
<p>Hello World>
Hello World
</div>
.navbar will get applied to your div and then subsequently to everything that is within it
.navbar a will only get applied to the <a> tag inside the div with class=navbar
To explain it consider the following html code:
<div class = "navbar">
<a></a>
</div>
The first div will apply the following style:
overflow: hidden;
background-color: #333;
font-family: Arial;
However <a></a> will apply the following style:
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
For <a> tag you need not to add any class attribute. It will automatically apply the style as you defined the style .navbar a
In this case .navbar is a css class that refers mostly to a parent element inside which your hyperlink is located (that is the <a> in your HTML file). It can be a div or some container element, that depends on your HTML.
While .navbar a refers to any <a> that is a child element inside a container element. Hyperlinks that are not children of .navbar elements will not be affected. For example, let's look at this html chunk:
<div class="navbar">
Click here!
</div>
Let's say the above is part of your index.html file or so. In your css file:
.navbar {
/*all css style here will affect your div class="navbar"*/
}
.navbar a {
/*put something here to style all hyperlinks that are child to .navbar elements*/
}
Please let us know. You can check sites like this and read and read a lot, your skills will be largely improved with practice and reading.
Related
I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS. However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists! How do I get round this? I've tried ID tags but I don't know if they overrule applying a certain style to all lists? This is my CSS code:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All lists on the page are 'standard' lists, i.e. they are all bog standard <ul> or <ol> with no id tags - apart from the navigation bar list, which I have called 'menubar'.
For the menubar styles you need to apply the id like #menubar also for its child elements if you only want them to apply inside the menubar
see example:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li {
float: left;
}
#menubar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul id="menubar">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
<ul>
<li><a>normal one</a></li>
<li><a>normal two</a></li>
<li><a>normal three</a></li>
</ul>
the problem with your CSS is that you apply styles to all 'li' and 'li a' elements. The best way to get this to work is to be a bit more specific to where you want to apply the CSS.
Try the following (using your code above).
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li{
float: left;
}
#menubar li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
If you don't specify an ID or a class the style will affect every matching element.
In your example, you style elements with the id "menubar", and then you style ALL "li" elements and lastly all "li" and "a" elements.
If you wish to apply your style only to items in your navigation menu, you could give them a class like "nav_menu", and write the style like this:
.nav_menu {
float: left;
}
.li_and_a {
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
so your list items with the float now need the class "nav_menu" and the list items and the a items need the "li_and_a" class.
Doing this will not impact any other "li" or "a" elements on your page unless they have that specific class.
There are several ways to resolve this, but I think that at this point, the most practical way would be to use the :not() selector with your lists and exclude the #menubar.
For example, if your #menubar is a id for a li, you could add it like this:
li:not(#menubar) {
/* your css */
}
li:not(#menubar) a {
/* your css */
}
EDIT 28/02
My understanding is that you have your horizontal bar with the #navmenu and the rest of your CSS you do not want to take effect in it.
If that is what you want, this solution does work. As it was tested on jsfiddle.
https://jsfiddle.net/a2kj8vds/
I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
I'm trying to give a table a title but it doesn't include it in the table/the title doesn't have a color around itself. I know that the mistake is this line <li><a>Left</a></li> but I don't know how to include it.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<ul>
<li><a>Left</a></li>
<li>Info</li>
<li>Contact</li>
</ul>
</body>
</html>
I think this is what you're looking for:
<li>Left</li>
First of all, what you have created is not a table but an unordered list.
That being said, the reason your <a> tag is not being styled is the lack of a href="#" attribute.
And with that said, you should not be using a <li><a>text</a></li> structure for showing the title of what looks like a navigation bar. Especially when the only reason to use an anchor tag is because of your existing CSS.
Instead, take the <li>Left</li> line, put it before the <ul> tag and just turn it into a div.
Then use some additional CSS to target and style that <div class="title">.
I have a large textual menu where each link is stacked vertically. The problem is the active link space is overlapping onto the other menu items, thus making it difficult to accurately click a link.
Example: http://jsfiddle.net/dhyz48j3/1/
Here's the source code:
<div id="menu">
<span>
Still Life<span class="divider">/</span><br/>
Interiors<span class="divider">/</span><br/>
Books<span class="divider">/</span><br/>
Personal
</span>
</div>
CSS:
#menu span, #menu span a {
font-family: sans-serif;
font-size: 6.1vw;
line-height: 4.7vw;
letter-spacing: -0.0425em;
text-decoration: none;
color: #ccc;
display: inline-block;
}
#menu span a:hover {
color: #aaa;
}
You can see on the fiddle that the links do not work accurately because they are larger than they should be. How do I fix the?
What atmd has suggested are great tips for your code, but won't fix your problem:
font-size: 6.1vw;
line-height: 4.7vw;
Are your perpetrators here. I can see you've done this to butt the lines up to each other and reduce the line space. The problem you have is that the font used has extra space above and below the letters, so the whole element is still taking up 6.1vw, even thought the next element is only 4.7vw below it, so the anchor elements are overlapping.
Your way of fixing this is to mitigate the extra padding for the text element using a height and overflow:hidden, both on a parent element, and then positioning the anchor text to the be in the centre of the parent element. A working example: http://jsfiddle.net/dhyz48j3/3/
for a list like this you'd be better of using the ul tag
These stack vertically by default
<ul>
<li>Still Life</li>
<li>Interiors</li>
<li>Books</li>
<li>Personal</li>
</ul>
This way you remove the extra mark up and you can create the dividers with css too
#menu span, #menu span a {
font-family: sans-serif;
font-size: 6.1vw;
line-height: 4.7vw;
letter-spacing: -0.0425em;
text-decoration: none;
color: #ccc;
}
#menu span a:hover {
color: #aaa;
}
#menu span a:after {
content: "/";
}
#menu span a:last-child:after {
content: "";
}
when using this code:
<div class="menu">
<ul id="mainnav">
<li><h2><a href="dir1/" >AAAAA</a></h2>
<ul>
<li><h3>xxx</h3></li>
<li><h3>xxx2</h3></li>
<li><h3>hxxx3</h3></li>
</ul>
</li>
I get an error while validating saying that I should put <h2> outside of <a>.
document type does not allow element <h2>
When I do this validation passes without any problems but my styling breaks.
Is there a way to keep both validation and styling?
This is styling for menu and <h2>
.menu li a{
font: 100% Helvetica, Arial, sans-serif;
display:inline-block;
color: #fff;
}
.menu li a:hover{
color: #014661;
background: url('../images/menu1.png') center left no-repeat;
}
.menu li a h2{
font-size: 92%;
padding: 8px 18px;
font-weight: bold;
text-transform: uppercase;
}
.menu h3{
font-size: 87%;
font-weight: bold;
text-transform: uppercase;
}
.menu li a h2:hover{
background: url('../images/menu2.png') center right no-repeat;
}
While the approved answer might work, it is bad practice. The validation error is proof of the issue.
<a> is an inline element <h2> is a block element
Inline elements cannot be placed directly inside the body element; they must be wholly nested within block-level elements.
Inline elements should never contain contain block-level elements.
With h2 outside a you need to change all occurrences in the stylesheet of a h2 to h2 a, so the order in the style sheet matches the order in the HTML, and styling will be applied.