I put a link in the image which leads back to the home page; however, I have my nav menu set up so they turn red with hovering and somehow it's making a red block behind my image when I hover over it. I'm using HTML5 and CSS3
HTML5
<header class ="main-header">
<a href="index.html">
<img src="Images/image.png" alt="image logo"></a>
<nav><ul>
<li class="active">HOME</li>
<li>NEWS</li>
<li>LOCATION</li>
</ul></nav>
</header>
CSS3
/* Define Hyperlink Info */
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:active {
background-color: #C71F0E;
color: #FFFFFF;
text-decoration: none;
}
/* Defines navigation menu */
.main-header nav {
background-color: #354175;
height: 40px;
}
.main-header nav ul {
list-style: none;
margin: auto;
}
.main-header nav ul li {
display: inline;
float: left;
}
.main-header nav li a:hover, .main-header nav li.active {
background-color: #C71F0E;
color: #FFFFFF;
text-shadow: none;
}
.main-header nav ul li a {
border-radius: 15px;
color: #FFFFFF;
display: block;
height: 20px;
padding: 10px 25px;
}
If you look at the a:link, a:visited line, you'll notice that this targets ALL links, even your image link.
To do away with this, try giving your first link a class (like "logo"), and write specific styles for it after the a:link, a:visited line.
Related
I am coding a website for a class that I am taking and I am having a strange issue. I want the menu items in the top to be grayed out when they are the current page. This is working with all of them except for one. Here is the HTML and CSS for this section along with screenshots of what is happening.
HTML for the menu:
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Hobbies</li>
<li>Extra Curriculars</li>
<li>Projects</li>
<li class="selected">Self Reflections</li>
</ul>
</nav>
CSS for the menu:
nav ul {
list-style-type: none;
background-color: DarkRed;
border: 4px solid Black;
border-radius: 10px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid Black;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
color: White;
}
nav ul li a {
color: White;
}
nav ul li a {
text-decoration: none;
}
nav li.selected {
color: Gray;
}
nav li a:hover {
text-decoration: underline;
}
Screenshot of what I want:
Screenshot of what is happening on the one page:
As you can see, the Self Reflections page is the current page. The problem is that it is not turning gray. The link is not active, I just want it to be gray like the rest of the pages. I am still fairly new to HTML and CSS so any help is greatly appreciated. Thank you!
It is because of this line
nav ul li:last-child {
border-right: none;
color: White;
}
Remove color: White from here
Good day all,
I have created a nav bar with various links, I would like to use the hover effect to have it change color on hover. Problem is that the effect is only around the word not the height of the nav bar to horizontal rules. I would like the hover effect to reach to the horizontal rules.
Here is my code:
ul{
list-style-type: none;
}
li{
display:inline;
padding-right: 50px;
}
#NavBar ul li a{
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#NavBar ul li a:hover{
background-color: yellow;
}
<hr>
<nav id="NavBar">
<ul>
<li><a>Home</a></li>
<li><a>History</a></li>
<li><a>Gallery</a></li>
<li><a>Techniques</a></li>
</ul>
</nav>
<hr>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: solid silver;
border-width: 1px 0;
text-align: center;
}
nav li{
display: inline-block;
margin: 0;
padding: 0;
}
nav a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 1em;
}
nav a:hover {
background-color: yellow;
}
<nav>
<ul>
<li>
<a>Home</a>
</li><li>
<a>History</a>
</li><li>
<a>Gallery</a>
</li><li>
<a>Techniques</a>
</li>
</ul>
</nav>
The CSS selector only highlights the words because the a is targeted. If you change the a with li then It highlight the whole area of li.
Repalce:
#NavBar ul li a:hover{
background-color: yellow;
}
With:
#NavBar ul li:hover{
background-color: yellow;
}
Try this
li:hover {
background-color: yellow;
}
beginner girl here who is completely stuck at her first CSS project. Please please tell me what I am doing wrong.
So I have this horizontal menu, with three stupid tabs. I want the background color for the selected tab to be different (done!), and also the font color to be different - which is not happening, despite by best efforts for the past hour.
This is the HTML:
<nav>
<ul>
<li class="selected">Job Description Details</li>
<li>Audit Trail</li>
<li>Files</li>
</ul>
</nav>
And the CSS. Here the background property for the last rule IS APPLIED. But if I add a color one, nothing happens. Does the code have a grudge against me? :(
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
nav {
background-color: #488AC7;
margin: none;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link,
a:visited {
color: #F0FFFF;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected {
background-color: #F0FFFF;
border-bottom: none;
}
Try this
nav ul li.selected a, nav ul li.selected a:visited {color:red;}
Add
nav ul li.selected a {
color:red;
}
Color on nav ul li.selected is applied to the text that are no links. You have to specify the color for the links with nav ul li.selected a.
When I put in a logo at the top of my page, the logo became formatted like my nav bar.
I believe it has something to do with how I designed my nav bar. I tried to change the formatting on the logo by using inline css but that still didn't work.
My CSS :
ul {
list-style-type: none;
margin: 7;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
h2 {
color:#FFFFFF;
font-family:impact;
text-align:center;
text-decoration:underline;
}
a:link, a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #4D5365;
}
.divstory {
background-color:#B33951;
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
My HTML :
<body background="webbackground.png">
<img src="DTDTMLogo.png" style="width: 180px; margin-bottom: 5px;" >
<hr>
<!--Nav Bar-->
<ul>
<li>
Home
</li>
<li>
Database
</li>
<li>
Map
</li>
<li>
About Us
</li>
</ul>
<!-- Nav Bar End-->
<hr>
<img alt="When Your In The Action" src="Gamers_in_action1.jpg" style="width:1260px;height:600px;">
<hr>
<h2>Our mission</h2>
<div>
<p>
</body>
Screenshot :
You're giving all your a elements the same styling, because you used selectors like a:link, a:visited, etc.
To fix this issue, You need to make your selectors more specific.
The easiest way replace this :
a:link, a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #4D5365;
}
with this :
ul a:link, ul a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
ul a:hover, ul a:active {
background-color: #4D5365;
}
This would still impact all a elements that belong to an ul element, though.
To avoid that, consider adding a class to your menu, like this :
<ul class="main-navigation">
<li>
Home
</li>
<li>
Database
</li>
<li>
Map
</li>
<li>
About Us
</li>
</ul>
Then, adjust your selectors like this :
.main-navigation a:link, .main-navigation a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation a:active {
background-color: #4D5365;
}
This ensures that ONLY your main navigation (or other a elements that belong to an element with the class .main-navigation) will be impacted.
Right then... I created a menu which worked perfectly fine but afterwards found out I needed to add drop-down which I done but for some reason it is showing horizontally and aligning itself to the left instead of being vertical and aligning itself underneath the link you hover over. What's annoying is that I did create one that worked perfectly fine on another site, I have tried to match up to coding from the last one to this one but as they are styled differently it is not going well.
The html for the menu is:
<body>
<div id="header">
<div id="menu_container">
<nav>
<ul>
<li>Home</li>
<li>Overview</li>
<li>Strategy</li>
<li>Marketing</li>
<li>Team and Management</li>
<li>Gallery
<ul>
<li>Edgbaston</li>
<li>Hockley</li>
<li>Selly Oak</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
The CSS is:
nav ul {
list-style: none;
text-align: center;
position: relative;
display: inline-table;
}
nav ul li {
display: inline;
}
nav ul li a:link, nav ul li a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
width: 800px;
color: #FFFFFF;
line-height: 14px;
margin: 0px 10px;
padding-bottom: 8px;
border-bottom: 1px solid #FFFFFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover, nav ul li a:active {
border-color: #f9cf19;
}
nav li ul {
display: none;
z-index: 999;
}
nav li:hover ul {
display: block;
position: absolute;
}
nav li:hover li a:hover {
background: #000000;
}
Any help would be greatly appreciated. Thanks guys.
Edit: Here is a link to the site: http://vicarage-support.com/our_hostels.html
The link is only on that page, once I have it working and the page finished I will add it to the others.
And one to a fiddle: http://jsfiddle.net/e7y6U/
SeeTheC Came up with the solution to get it to vertically align but to get it align underneath the link you hover over you have to add this to the ul li:
nav ul li {
display: inline;
position: relative;
float: left;
}
on Hover
add this :
nav li:hover>ul>li {
display: block;
}
By this it will come in vertical.
You just have to align the position of it.
try to add this :
ul > li
{
position:relative
}
Just realised it doesn't work on IE