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 7 years ago.
Improve this question
So I'm having a problem with my css nav styling. The code works on every other page, just not my first page in my drop down. When I open the page, the nav bar changes to a deep purple instead of my chosen color #E7DDDC.
Link to the page that isn't working
Ps. Sorry I'm new at coding and on here as well. Can't seem to find out how to post the code in my question.
This is because the default visited link colour has not been specified in your projects_style.css file. To add it you must use,
a:visited {
color: #E7DDDC;
}
To disable it, you need to replace,
a:link {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
with the one below,
a {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
To specify different colours for different link states, you need to use
a:link
a:visited
a:hover
a:active
You can change in your css,
Add the following styles,
#nav ul li a {
color: #E7DDDC;
}
It might solve your issue.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm quite new to html/css/js so apologise in advance if this is a newbie question.
Every time I see a navigation bar people tend to use ul/li. However I think you can achieve the exact same result just by using and formatting the 'a' tags thus reducing the html code, like the example below:
html:
<body>
<header>
<nav class="top-nav">
About me
Education
Work
Interests & Hobbies
Contact
</nav>
</header>
</body>
css:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Header section.*/
header {
text-align: center;
color: white;
}
/* Navigation */
.top-nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
padding: 20px 0;
width: 100%;
}
.top-nav a {
text-decoration: underline;
color: white;
}
.top-nav a:hover {
font-style: italic;
}
Is there anything wrong with doing this in terms of semantics, etc? If so, why and what are the advantages of using the ul/li tags?
Here's the fiddle for this.
Thank you!
I understand that your question is about semantics.
There is no explicit precision about the form of the content of the navigation element <nav> (whether it use <li> <ol> or just <a>).
If you have a peek at the nav element you can see how it relates to the accessibility navigation role.
Likewise, you can look at the ul element and how it related to the accessibility list role.
So the semantic difference would be that a series of <a> is more related to plain text entries that link somewhere. When encapsulated in a <ul> it takes the meaning of a list of links. The latter is probably more explicit to define the concept of a navigation menu.
If you want to add a dropdown below every item the you will need to have ul tags to achieve that result. You just cannot simply add a dropdown menu by using anchor a tags thats why you will see most of the people using ul tags followed by li tags inside to make the dropdown menu. If you just want to show the items on your navbar and dont want to have a dropdown then this approach may be okay..:)
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 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
Is it possible to have and h2 tag with an h1 class?
<h2 class="h1">Test</h2>
i need h2 tag for SEO-related thing but I need the style of h1.
I already tried doing this, but no luck
h2.h1 {
font-size: 18px !important;
font-weight: bold !important;
padding-top: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
Style the h2 tag the same way h1 is styled. Inspect the h1 tag and copy its style. Don't try and incorporate h1 as a class for h2, it's a lot easier to just restyle your tag.
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.
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
My site is at kenastonchiropractic.com
In Chrome, the "Home" link stays the color of the other links and they all turn white upon hover. In Firefox, however, the "Home" link is blue and stays blue even after it is clicked on (but it does turn white on hover). IE appears to behave rightly, as in Chrome.
I have tried many things and had no results. Maybe somebody can see my error.
Thank you!
To avoid such problems, you're always better off setting colors directly on links similar to this:
a{
display:block;
text-decoration:none;
color: #ffffff;
}
And, you should also keep your browser versions updated in case you haven't.
Add this:
#nav ul li:hover a {
color: rgb(255, 255, 255);
}
The default browser pre-set overrided your CSS rule because it is more specific.
The other links aren't affected because you wrapped them with <span style="color:#fff">, which overrides their default colors.
PS: On Chrome it shows a blue color just like all other browsers.
Your "Home" link is the only one that's not wrapped by <span style="color:#fff">.
You need to add the padding to the a tags not the li.
Here is a fiddle.
<ul>
<li>Home</li>
<li>New Patient Process</li>
<li>Health Products</li>
<li>About Us</li>
</ul>
ul li a {
text-decoration:none;
display:block;
padding: 16px 20px;
color:#583709;
transition:.5s all;
}
ul li a:hover {
color:#fff;
background:#000;
}