I have a problem and I do not know how to solve it, I am really a beginner. I am trying to make a navigation bar and reduce a spacing between navigation points but i am so unsuccesful.
here is what I have:my menu
and I would like to reduce the spice between it and have something like this:
enter image description here
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>
https://jsfiddle.net/nmttg009/
Related
This is A navigation bar with links that I made. I want that the black background will not move when hovering...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {font-size: large;}
<body>
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
</body>
You can use transform:scale(X), it won't disturb the flow
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 40%;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {transform:scale(1.15);}
<body>
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
</body>
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
I suppose you wanted to do something like this. Though I would suggest as #g-cyrelius mentioned, in other answer -- You should make use of transform: scale(2) or something, to avoid break of flow, in your code.
I tried to use your code font-size: large, but this is not the better option.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
width: 80%;
}
li {display: inline-block;text-align:center;position:relative;height: 50px;width: 30%;box-sizing: border-box;}
li a {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
position:absolute;
top: 0;
left: 30%;
}
li a:hover {
font-size: large;
}
<nav>
<ul>
<li> Home </li>
<li> Articles </li>
<li> About us </li>
</ul>
</nav>
When I hover over the text of navigation bar, the space above text highlights instead of the text itself. my CSS code is as below:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
My html code is as below:
<ul>
<li> Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
First look at your anchor links, you made a mistake in them, place a link text between . Second apply hover rule over li instead of li a:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li:hover {
background-color: #555;
color: white;
}
<ul>
<li>
Home</li>
<li>
Contact</li>
<li>
Gallery</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home </li>
<li>Contact</li>
<li> Gallery</li>
</ul>
add text with in a tag, to make the link clickable - and to get your desired result also
I have checked your code and find that the problem is in your html code. try this one.
<ul>
<li>Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
the text should be inside <a> tag as you are hovering the <a> element.
Just change li a:hover to li:hover
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: silver;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li:hover {
background-color: #555;
color: white;
}
<ul>
<li> Home</li>
<li>Contact</li>
<li> Gallery</li>
</ul>
I've been trying to center the items within the navigation but no such luck. Every single solution turns my navigation bar from this: horizontal navigation bar to this: vertical navigation bar.
Any help would be greatly appreciated!
HTML with CSS code:
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<html>
<head>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Just remove the float from the li and make the inline-block
li {
/* float: left; */
display:inline-block;
}
The first rule of centering is..."Don't use floats"
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
}
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>
I removed your css on li tag with float and changed it to display and width:
li {
display: -webkit-inline-box;
width: 60px;
}
https://i.stack.imgur.com/LbYd4.png`
I hope this helped you #C. Lagos
I need to center these links while leaving Santos Fire Department where it is
BTW the only reason that Santos Fire Department has two different tags is to avoid the hover animation.
ul.nav{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 3.3em;
}
ul.nav li {
float:left;
}
ul.nav li a{
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul.nav li .navlogo{
overflow: hidden;
background-color: #333;
height: 3.3em;
}
ul.nav li a.navlogo{
display: inline-block;
padding-top: 10px;
margin-left: 10px;
font-size: 150%;
z-index: -1;
}
<nav class="navbar">
<ul class="nav">
<li id="logo"><a class="navlogo">Santos Fire Department</a></li>
<li id="nav">TeamSpeak (Temp Server)</li>
<li id="nav">US Server</li>
<li id="nav">EU Server</li>
<li id="nav">SantosRP</li>
</ul>
</nav>
Santos Fire Department in original position, navbar centered :)
.navbar {
background-color: #333;
}
.nav {
display: table;
margin: 0 auto;
}
ul.nav li {
display: inline-block;
}
ul.nav li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
.navlogo a {
color: white;
font-size: 150%;
margin: 8px;
position:absolute;
}
<nav class="navbar">
<span class="navlogo"><a>Santos Fire Department</a></span>
<ul class="nav">
<li id="nav1">TeamSpeak (Temp Server)
</li>
<li id="nav2">US Server
</li>
<li id="nav3">EU Server
</li>
<li id="nav4">SantosRP
</li>
</ul>
</nav>
Update
position:absolute; on .navlogo a class, might not be the best way but gives you the results desired.
First of all you should eliminate multiple ids like id="nav" this is important for styling.
Now the parent needs to be text-align: center; and for your #logo you can float: left; like now. Otherwise, never avoid flexbox, but remember the browser support http://pleeease.io/play/
I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.
Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.
http://codepen.io/briligg/pen/emwXaw?editors=110
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
}
nav button {
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
height: 32px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 7;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
margin-top: 9px;
padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
padding: 8px 2px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #52cbff;
}
Then in the html, the ul's are nested in the buttons, with links, like this:
<button tabindex="4">Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.
IE has button {overflow:hidden;} style by default, You can rest that as follows.
nav button {
overflow: visible;
}
Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.
nav {
position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
white-space: nowrap;
}
nav > ul > li {
display: inline-block;
position: relative;
font-size: 16px;
height: 32px;
line-height: 32px;
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
}
nav > ul > li > ul {
display: none;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
padding: 6px;
position: absolute;
z-index: 7;
top: 32px;
left: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #52cbff;
}
<nav>
<ul>
<li tabindex="1">Purpose</li>
<li tabindex="2">
Moon vs Mars
<ul tabindex="3">
<li>Ambiance</li>
<li>Communication</li>
<li>There and Back</li>
</ul>
</li>
<li tabindex="4">
Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</li>
</ul>
</nav>
The problem must be caused by this Link inside a button not working in Firefox (and IE).
Full Demo: http://codepen.io/anon/pen/KwOqKv
Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <li>.
<ul class='primary-links'>
<li class='primary'><a href='#'>Primary link</a></li>
<li class='primary'>
<a href='#'>Another primary link</a>
<ul class='secondary-links'>
<li class='secondary'><a href='#'>Secondary Link</a></li>
<li class='secondary'><a href='#'>Another secondary link</a></li>
</ul>
</li>
</ul>
The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.
.primary {
display: inline-block;
}
.secondary-links {
display: none;
position: absolute;
}
.primary:hover > .secondary-links {
display: block;
}
body {
font: 1em/1.5 sans-serif;
}
a:link,
a:visited {
color: #08f;
text-decoration: none;
}
a:hover,
a:active,
a:focus{
color: #f80;
}
ul {
list-style: none;
margin: 0;
padding: .25em;
border-radius: .25em;
background: #fff;
border: thin solid #ccc;
box-shadow: 0 0 .25em #ccc;
}
li {
margin: .5em;
}
nav > ul > li {
display: inline-block;
}
li > ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li><a href='#'>One</a></li>
<li>
<a href='#'>Two</a>
<ul>
<li><a href='#'>Two One</a></li>
<li><a href='#'>Two Two</a></li>
<li><a href='#'>Two Three</a></li>
</ul>
</li>
<li>
<a href='#'>Three</a>
<ul>
<li><a href='#'>Three One</a></li>
<li><a href='#'>Three Two</a></li>
<li><a href='#'>Three Three</a></li>
<li><a href='#'>Three Four</a></li>
</ul>
</li>
</ul>
</nav>