a {
color: #000;
}
a:hover {
text-decoration: none;
color: #fff;
}
That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:
#menu li, a {
text-align: center;
display: block;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
color: #575757;
text-decoration: none;
list-style: none;
}
Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.
<div id="footer">
<p><center>Copyright 2008 - G.S.B.V. Pugilice</center></p>
</div>
That bit of code gives me two lines instead of one, the link floats left on the second line.
I think you may be mis-understanding how selectors work.
#menu li, a { ... }
Means apply styles to any li descendant of a element with the id #menu and to any a found any where.
Did you actually intend:-
#menu li, #menu a {...}
?
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 have some silly CSS problem. Cant get my navi bar working the way I would want it.
Problem is, that it keeps the arrows under anchor text somehow.
This is example of html:
<ul id="navi">
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and stylesheet:
#navi {
list-style: none;
padding: 0.5em;
}
#navi li {
float: left;
display: inline;
list-style-type: none;
}
#navi li a {
display: block;
font-weight: normal;
font-size: 13px;
color: #222;
padding: 0.2em 1em;
text-decoration: none;
}
#navi li a:hover, #navi li a:active {
background: #5ea0ff;
color: white;
text-decoration: none;
}
#navi li a.selected {
background: #444;
color: white;
text-decoration: none;
}
#navi li:after {
content: "\25B6";
}
#navi li:last-of-type:after {
content: "";
}
This is how it looks like: http://jsfiddle.net/M2AHY/1/
I want the arrows right after anchors, but I can't use a:after (which works good, but hovers with anchor text)
Thanks
This is due to the fact that the element the arrow is appearing after, the anchor tag, is styled with display:block - a property which by itself, will push subsequent content to a new line. If altering this slightly won't be a problem, you could replace the style with:
#navi li a {
display: inline-block;
}
Which allows the arrow to appear on the same line. Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
EDIT: Alternatively, you may apply a float to the anchor tag. For example:
#navi li a {
float:left;
}
This lets you retain the block display, but also allows the arrow to appear on the same line.
A simple approach to resolving this would be:
#navi li a:after {
content: " \25B6";
}
Note that I've added the content after the and put a space in the content. Hope that helps!
I'm working on front-end of an intranet website.
The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.
On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.
Here is the CSS for the list and arrow:
.jt-menu .item-280 li li {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 1px 0 0 1px;
text-align: left;
width: 172px;
list-style: disc inside url("../../../../images/barrow.png");
}
Add this to your CSS:
.jt-menu > li > ul ul li {
width: 240px !important;
}
.jt-menu > li > ul ul a {
display: inline-block;
}
Try adding more left-margin and setting line-height as tall as your image.
I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.
There are two errors in the HTML you would like your help:
The source should not decrease when ally is in bold.
In the event a:hover can not change the size of the tag li.
The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?
I don't know if I understood your question correctly, but can't you put
ul#menu li
{
width:200px; //change this amount...
}
You can prevent the boxes from jumping by
floating the lis
adding a width to the lis
adding left and right padding to the lis
taking the hover off the a and adding it to the lis
--
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
Important:
the bolder text still jumps, but the boxes do not
you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.
I took the liberty to touch your css code to achieve the desired result. It would be:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
What I did was:
Remove padding from li and a elements (it should be 0)
Set the a element to display:block with fixed width and height
Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
Keep the text in the center with line-height and text-align:center
The problem was that padding was pushing the box borders when the element changed its size.
I thought I has this nth-child or nth-of-type stuff down, but somehow it does not seem to work on my site. I have http://www.dateworld.co.za/ and need the 3rd tab to be a red background, but somehow this code does not seem to work...
Can anybody help me?
div#headernav ul li a {
padding: 0px 16px;
height: 30px;
display: block;
float: left;
font: bold 12px/30px arial, verdana, sans-serif;
color: #ffffff;
text-transform:uppercase;
text-decoration: none;
margin-right:6px;
background-color:#2274D9;
}
div#headernav ul li a:nth-of-type(3){
height: 30px;
display: block;
background-color:#ff0000;
}
Thanks and regards
Anton
You need to use this selector instead:
div#headernav ul li:nth-of-type(3) a
See: http://jsfiddle.net/thirtydot/TJ6Lc/
Also, you don't need nth-of-type, you can just use nth-child:
div#headernav ul li:nth-child(3) a
http://jsfiddle.net/thirtydot/TJ6Lc/1/
The selector you were using:
div#headernav ul li a:nth-of-type(3)
was looking for the third a element inside an li element, which does not correspond with what you're actually trying to find.
I don't know your html structure, but does your css need to be something like this?
div#headernav ul li:nth-of-type(3) a{
height: 30px;
display: block;
background-color:#ff0000;
}
Try applying your styles to the li, not the a, as the li elements contain only one a, but the ul contains many lis:
div#headernav ul li:nth-child(3){
height: 30px;
display: block;
background-color:#ff0000;
}