Any one know how to do that active button with around space?
like this my sample image
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;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
You need to add some padding to your li elements, like the snippet below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Related
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: block;
position: absolute;
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul>
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
The "spotify" and "apple music" block elements display in one line next to each other as opposed to below each other.
I also use bootstrap on the page. Not sure if it's got anything to do with the issue because when I remove the script it still works the same.
Sorry if my code is hard to see through.
It's the inline-block on ul li in your CSS. inline-block won't break the line. See MDN Inline Elements.
in css I marked my edits.
was it necessary?
ul {
padding: 0;
margin: 0;
text-decoration: 0;
list-style: none;
background: #343434;
height: 20 px;
}
ul li a.home {
float: left;
color: white;
font-size: 24px;
line-height: 0px;
padding: 20px 100px;
margin: 0px 30px;
}
ul li a.home:hover {
background-color: white;
color: black;
transition: .5s;
}
ul {
list-style: none;
color: white;
}
ul li {
display: inline-block;
line-height: 80px;
}
.main ul {
display: none;
flex-direction: column; /*add this it*/
position: absolute; /*add this it*/
}
ul li a {
font-size: 18px;
color: white;
padding: 12px 100px;
border-radius: 2px;
}
a:hover {
text-decoration: none;
background: #A179C9;
color: black;
transition: .7s;
}
.main li:hover>ul {
display: flex; /*add this it*/
position: absolute; /*add this it*/
}
<ul class="main">
<li><a class="home" href="index.html">blank</a></li>
<li>listen
<ul class="sub_main">
<li><a id="spotify" href="https://open.spotify.com/">spotify</a></li>
<li><a id="apple" href="https://open.spotify.com/">apple music</a></li>
</ul>
</li>
<li>gallery</li>
<li>download</li>
<li>store</li>
</ul>
I've made a nav bar and I'd like to use the hover selector only on the pages that aren't active. So I used the selector a:not(.active):hover but it doesn't work. I'd really appreciate if someone could help me.
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li a:not(.active):hover
{
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>
Your :not pseudo-class is on your link. However, the active class is on the li.
li:not(.active) a:hover should work
JSfiddle Example: https://jsfiddle.net/ubntkk46/
The class is linked to your li element, not the hyperlink
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
position: absolute;
top: -2px;
left: 0;
right: 0;
background-color: darkred;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li:not(.active) a:hover {
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>
You could just apply the same background colour to the active a tag and the active a tags hover state, and a different background colour to the the non active a tags hover states. This would allow it to work in IE8, because :not isn't supported in older versions of IE.
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li a:hover {
background-color: #B22222;
}
li.active a, li.active a:hover {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>
This Fix It :
li:not(.active):hover a {
}
Full Code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
position:absolute;
top:-2px;
left:0;
right: 0;
background-color: darkred;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 23px;
text-decoration: none;
}
li:not(.active):hover a {
background-color: #B22222;
}
.active {
background-color: #470005;
}
<ul>
<li class="active">Home</li>
<li>About me</li>
<li>Contacts</li>
<li>Help</li>
<li>Other Works</li>
<li>News</li>
</ul>
I want my text in the middle of the navigation bar. I tried vertical-align:center or middle but that didn't work.
Here is what I have:
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;
height: 60px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Set the line-height property equal to the height of your element :
li a {
height: 60px;
line-height: 60px;
}
In order to vertically centralise the text, you need set a line-height equal to the height of the element. In this case, it's 60px:
li a {
height: 60px;
line-height: 60px;
}
Hope this helps! :)
Use Flexbox (display: flex) to center the text. It's more flexible than line-height (height can be a percentage) and has good browser support. See caniuse.com.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
height: 60px;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color: #333;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
color: white;
text-align: center;
text-decoration: none;
height: 22px;
}
li a:hover {
background-color: #111;
}
<ul class="nav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I'm trying to center the menu bar links. In the css every time I try to center it, it puts each link on a new line. So I make it float:center; and it makes each link a new line and just doesn't center it all. Any ideas?
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
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;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
use display:flex and justify-content:center in your ul (remove the float:left from li)
Float:center doesn't exist.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
justify-content:center
}
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;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
Just add text-align:center to your ul and display:inline-block; to your li like this:
ul {
text-align:center;
}
li {
display:inline-block;
}
Here's a jsFiddle with above codes: https://jsfiddle.net/AndrewL32/4jendh7j/
HTML
Home
News
Photos
Videos
Schedule
Links
<ul id="HeaderMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
<ul id="footerMenu">
<li>Home</li>
<li>News</li>
<li>Photos</li>
<li>Videos</li>
<li>Schedule</li>
<li>Links</li>
<li>Contact</li>
</ul>
And address them separately in CSS as this :
body{
background: #cccccc url("http://www.paradise.lk/images/pattern.png") no-repeat;
width: 100%;
height:auto;
}
h1 {
text-align: center;
}
p.text{
text-align: center;
}
#HeaderMenu li {
float: left;
}
#HeaderMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#HeaderMenu li a:hover:not(.active) {
background-color: red;
color:black;
}
#footerMenu li {
float: left;
}
#footerMenu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#footerMenu li a:hover:not(.active) {
background-color: #2d6a05;
color:black;
}
ul.HeaderMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
ul.footerMenu {
list-style-type: none;
margin: -1px;
overflow: hidden;
background-color: #156611;
}
#logo img {
height: 90px;
width: 212px;
}
.box {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
}
.box1 {
background-color:white;
width: 300px;
padding: 25px;
margin: 25px;
}
Now do your styles separately for header and footer menus.
body{
background: #cccccc url("http://hdnaturewall.com/wallpaper/2015/10/sky-blue-wallpaper-background-18-desktop-background.jpg") no-repeat 0px -501px;
}