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/
Related
My intention is to make a top navigation bar, in which the list item PROJECTS is supposed to be a dropdown. So far the dropdown is working, but it takes as much width as the parent element. I want to dissociate the dropdown content from the navigation item without changing formatting properties, such that it occupies just as much space needed by its items and is also positioned right below PROJECTS.
My code:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
How the result looks now:
How I want it to look(image edited)
Thank you in advance.
Just add position: fixed and background-color: #666666 for dropdown_content. Like that:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
This will not break the positioning of the dropdown menu, because the ul tag also has a fixed positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
You can try absolute positioning.
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> Home </li>
<li> About </li>
<li class="dropbtn">
Projects
<div class="dropdown_content">
HTML
CSS
JavaScript
</div>
</li>
<li> Contact </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
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>
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 have created a html page with ul and li's to show some links and set up some background color to the li's. Now I want to add vertical line on the li's.
When I try to set up a image it is coming as shown in figure 1 but I want it to be as shown in figure 2.
figure 1
figure 2
What I have tried so far:
ul#sitemap1 {
list-style: none;
}
ul#sitemap1 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
#sitemap1 li {
clear: left !important;
margin-top: 0px !important;
padding: 10px !important;
background: url('/Images/ConnectLine.JPG') no-repeat !important;
float: inherit;
}
ul#sitemap1 li a:hover {
background-color: Orange;
}
ul#sitemap2 {
list-style: none;
}
ul#sitemap2 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap2 li a:hover {
background-color: Orange;
}
ul#sitemap3 {
list-style: none;
}
ul#sitemap3 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap3 li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">
Home
<li>Services</li>
<li>Organizational Change</li>
<li>kit</li>
<li>Sheets</li>
</ul>
<ul id="sitemap2">
Engagement
<li>Ideas</li>
<li>WorkSmart</li>
</ul>
<ul id="sitemap3">
Related Links
<li>GO-TIME</li>
</ul>
I suggest remove the id's form the CSS, no need to duplicate the same CSS just refer to the ul tag.
You can use :after pseudo-element to create the line.
Use :last-child to remove the line form the last item.
ul {
list-style: none;
}
ul li {
width: 220px;
position: relative;
margin-bottom: 20px;
}
ul li:after {
content: "";
position: absolute;
top: 90%;
left: 50%;
height: 25px;
background: black;
width: 4px;
border-radius: 5px;
border: 2px solid white;
z-index: 100;
}
ul li:last-child:after {
display: none;
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">Home
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">Engagement
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">Related Links
<li>GO-TIME
</li>
</ul>
you can use a pseudo element ::after in the a child of li
Note you can only have li as direct childs of ul. otherwise it is invalid HTML
I tweaked your CSS removing duplicated properties.
ul {
list-style: none;
margin-top: 30px
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
position: relative
}
ul li a::after {
position: absolute;
top: 100%;
left: 50%;
background: black;
width: 5px;
height: 100%;
content: ""
}
ul li:last-of-type a::after {
background: transparent;
height: 0
}
ul li a:hover {
background-color: Orange;
}
<div>
<h1>Innovations</h1>
<ul id="sitemap1">
<li>Home
</li>
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">
<li>Engagement
</li>
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">
<li>Related Links
</li>
<li>GO-TIME
</li>
</ul>
Try this, same you could try for sitemap 1 and 3.
ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}