Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I made a site and just did the navbar. On Google its good only the underline is there but on Firefox the bullet points are still there how do I fix this. Also how do I get ride of the underlines?
Try this:
Let say: your nav has container: #nav, then:
#nav a {
list-style-type:none;
text-decoration:none;
}
You should use as CSS reset sheet: CSS Reset
And then for your nav bar:
list-style: none;
text-decoration: none;
You probably need something like text-decoration: none; list-style: none; inside your nav ul tag
Try doing the following:
list-style-type: none;
It would help if we had your code though.
Try the following in your navbar's css:
list-style-type:none;
text-decoration:none;
Here is a reference from MDN. It has everything about list styling.
on css:
*{
text-decoration: none;
list-style: none;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
#menu1 a {
display: block;
background-color: #0066FF;
text-decoration: none;
font-family: calibri;
font-size: 20px;
color: #FFFFFF;
padding: 5px 5px;
}
#menu1 a:hover {
background-color: #0088FF;
}
#menu1 li {
display: inline-block;
}
#menu1 ul {
list-style: none;
text-align: center;
margin: 0 auto;
padding:0px;
}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview. Does anybody know how to do this? Maybe something with positioning? My question is: How do i get the a, a:hover, li and ul properties under one #menu1?
Thanks for your help!
Update:
I've had a lot of answers that refer to LESS or SASS. I'm not familiar with those languages. Could anybody explain to me what this is and how to use this? A link to a clear tutorial is fine.
Presumably you want to do something like this:
#menu1 {
a { /* ... */ }
li { /* ... */ }
ul { /* ... */ }
}
This is not possible with CSS and there is no workaround to enable this type of structure; you have to write out each selector in full and rely on logical grouping and/or formatting in the source to provide structure.
You can, however, use a CSS preprocessor such as LESS or SASS which will allow you to write code like the above and translate it to your original "dumb" CSS version automatically.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
For some reason I can't seem to get on-hover to work:
HTML
<div id="custom_nav">
<ul>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
<li>•</li>
</ul>
</div>
CSS
ul {list-style: none;}
#custom_nav a:link {text-decoration: none; color:red;}
#custom_nav a:visited {text-decoration: none; color:red;}
#custom_nav a:hover {text-decoration: none; color:green;}
#custom_nav a:active {text-decoration: none; color:blue}
The problem is that you have other elements overlapping those bullets, so they don't receive :hover.
If you try removing .site_header and all .project_container elements, it will work.
To fix it, you can add
#custom_nav {
z-index: 1000;
}
in order to make it overlap .site_header, which has z-index:999
Note there is no point in having so large z-index (you have a z-index:2147483647!).
You should read What No One Told You About Z-Index.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have the following CSS I need to convert to SASS:
#menu li:hover > a {
color: #fafafa;
}
How would this be translated?
edit: looking at it, i will try:
menu{
li{
&:hover{
a{
color: #fafafa;
}
}
}
}
Try this:
#menu
li
&:hover
> a
color: #fafafa
Or
#menu{
li{
&:hover{
> a{
color: #fafafa;
}
}
}
}
I have only used .less but tried in http://sassmeister.com/ and SASS result is:
#menu li:hover > a
color: #fafafa
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have this problem with my drop down menu I cant seem to figure out how to move the drop down menu that shows when you hover above the "support" button, I would like to move it little bit to the left,the other half is sticking out of the screen and can't be seen.
here is the link to it.
[jsfiddle] http://jsfiddle.net/3ZzVT/1/
All replies and help will be very much appreciated!
http://jsfiddle.net/3ZzVT/3/
Adding a right: 0px to the .head_menu ul selector makes the element position itself better underneath the nav item.
Like this .head_menu ul give position:relative; and right:0;
DEMO
CSS
.head_menu ul
{
padding:0px;
margin:0;
list-style:none;
position:relative;
right:0;
}
.head_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
right: -15px; // I added this
}