Im working on a navigation menu on my site and I want to make it so there will be a 1px solid white border around the button of the current page, so for example if I'm on the about page, there will be a white border around the about button.
I have already made this for the hovering, now I just need someone to help me do that on the current page as I described above.
edit: I forgot to mention that the html code is taken from my master page, so I don't have this code on each one of the pages. is there a way to still do it?
this is what I did for the hover(which works just like I wanted it to work):
.main-nav li a:hover {
background-color: white;
color: #266EB8;
border: 1px solid white;
}
and this is my html:
<header>
<div class="row">
<ul class="main-nav">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>REGISTRATION</li>
<li>CONTACT US</li>
</ul>
</div>
hope that you understood me.
You simply need to move the active class down to the anchor that is the current page. i.e for About it would be:
body {
background-color: #AAA;
}
.main-nav li a:hover,
.main-nav .active a {
background: white;
color: #266eb8;
border: 1px solid white;
}
<header>
<div class="row">
<ul class="main-nav">
<li>HOME</li>
<li>GALLERY</li>
<li class="active">ABOUT</li>
<li>REGISTRATION</li>
<li>CONTACT US</li>
</ul>
</div>
</header>
Related
I'm trying to change the buttons for a website and add rollover colours onto them. I have tried so many solutions and none seem to be working. I'm very inexperienced with coding.
I have tried to use many other sources, but they all start from scratch and I don't really understand how I can implement them into my program.
This is the piece of code in my style.css file:
li{
display:inline;
font-size:30px;
padding-left:80.5px;
padding-right:80.5px;
border:inset;
background-color:White;
color:aquamarine
}
And these are the buttons on each page:
<u1>
<li>Home</li>
<li>General Information</li>
<li>Find us</li>
<li>Contact Us</li>
</u1>
I expect the colour of the buttons shown above to change colour when I hold my mouse over them.
li {
display: inline;
font-size: 30px;
border: inset;
background-color: White;
color: aquamarine
}
.list a {
padding: 0 80.5px;
}
.list a:hover {
color: springgreen;
background-color: brown;
}
<u1 class="list">
<li>Home</li>
<li><a href="General Information.html">General Information</a</li>
<li>Find us</li>
<li>Contact Us</li>
</u1>
Trying to change colors when hovering over navigation links, never had a problem before but it will not work.
I have my navigation in several div's, I tried to set my a link style to all divs, nothing changes at all. I originally made my code in a CSS class. Trying to make a responsive website at home, didn't have links in the navigation bar originally, just text.
a.navBar:link {color: white; text-decoration: none; }
a.navBar:visited {color: white; text-decoration: none; }
a.navBar:hover {color: #16262E; text-decoration: underline; }
a.navBar:active {color: white; text-decoration: underline; }
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
I just want white text as navigation links that turn #16262E when the mouse is hovering over the link. Not receiving any errors, it just doesn't change from the default blue, underlined links.
a.navBar means that you are selecting a link tag wich have class 'navBar'. This selector does not exist.
No link tag have a class navBar.
To solve this you can apply color changing when you hover the list tag.
Use this selector :
#navBar ul li:hover a {color : #000fff}
This means that when you hover li (which is located inside #navBar) change the link color
Step 1
Remove a from starting of a.navBar.
Step 2
Change .navBar to #navBar you are declaring id attribute in element <div id="navBar">.
Step 3
Add space and a between #navbar and Pseudo-elements.
Below code snippet have all above mentioned fixes. Try this I hope it'll help you out. Thanks
body {
background-color:grey;
}
#navBar a:link {color: white; text-decoration: none; }
#navBar a:visited {color: white; text-decoration: none; }
#navBar a:hover {color: #16262E; text-decoration: underline; }
#navBar a:active {color: white; text-decoration: underline; }
<div id="outerWrapper">
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<body>
<ul>
<li><a class="navBar" href="#">About</a></li>
<li><a class="navBar" href="#">Our Work</a></li>
<li><a class="navBar" href="#">Contact Us</a></li>
</ul>
</body>
I have removed other div which are not nested properly.
Now put CSS inside "style" tag.
I will suggest to change either text-color or background-color, as text isn't visible on white background.
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
First CSS isnt my strong skill. Im following this example to create my menu bar
http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_active
First I try put it on jsFiddle but doesnt look the same
I can make the green selected change when user select different button. Can change between Login and Username when user is authenticated.
In my View I change it to something like:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Login</li>
<li> Welcome Administrator Logout </li>
</ul>
But doesnt stay on same line and doesnt look to good. Any suggestion on how improve my UI? Make it stay on same line or change the approach?
Current CSS:
<style>
body {
background-color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
I'd updated your jsFiddle
You should separate the Welcome administrator message from the Logout button
I improve the style using a door image.
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li style="float:right"><a href="#about">Login
<img src="http://i66.tinypic.com/25oxgxz.jpg" border="0"></a></li>
<li style="float:right"><a href="#Logout" style="color: red">Welcome Administrator
<img src="http://i64.tinypic.com/157n953.png" border="0"></a></li>
</ul>
JSFiddle
I've recently been looking back into web design and learning new things with it. I am now using the last-of-type selector, and I'm trying to do so for a navigation bar, but it doesn't seem to work the way I want it to.
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
Now, I want to select the last of type li for this, so here is my CSS:
.main-nav ul li:last-of-type {
color: green;
}
I do have a color set for the a element for this, so I have tried adding !important, but it doesn't help at all. The only way I can get it to work is if I make it like this:
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<!--<li>Home</li>
<li>Contact</li>
<li>About Us</li>-->
<li>Home
Contact
About Us
</li>
</ul>
</div>
</nav>
CSS:
/*
.main-nav ul li:last-of-type {
color: green !important;
}
*/
.main-nav ul li a:last-of-type {
color: green;
}
Now, how could I fix this for when I have a li element for each a element, and what is causing this anyways?
Use last-of-type on the <li>, then add an a at the end:
.main-nav ul li:last-of-type a{
color: green;
}
jsFiddle example
So, if I understand your question correctly, you'd like for the last link to be green, using the last-of-type selector:
http://jsfiddle.net/YWfx2/
All you need to do is put the selector on the li and add the a tag after it!
HTML :
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
CSS :
.main-nav ul li:last-of-type a{
color: green;
}