I recently made a vertical navigation bar and was wondering how I could make it horizontal and make it display in the same sized boxes equally spaced apart
I have tried to float text to the left but that doesn't work as well as followed W3 School tutorial on creating a horizontal navigation bar. W3 School isn't useful. I am a HTML and CSS newbie.
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
width: 100px;
border: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color:red;
color:white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
I expect a horizontal navigation bar that is centred and equally spaced apart in the same sized boxes that appear.
Start changing display property and add it to li element like the following snippet. You must play with the values and the properties to achieve what you need.
ul {
font-size: 0;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
border: 1px solid;
}
ul li {
display: inline-block;
list-style-type: none;
width: 20%;
font-size: 1rem;
}
li a {
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color:red;
color:white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
Use flex. You can read more about it here.
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0px;
padding: 0px;
width: 400px;
border: 1px solid;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
text-align: center;
border: 1px;
border-bottom: 1px solid;
}
li:last-child a {
border-bottom: none;
}
li a:hover {
background-color: red;
color: white;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>LinkedIn</li>
</ul>
Related
I've been trying to get a dropdownbar in my navigation which displays the elements vertically. The dropdownbar is already here and works fine but I'm having some trouble getting it to display vertically. Thanks in advance for taking a look, sorry if it's a rookie mistake!
I've already tried using floats, vertical-align, content-align.
.nav {
border-color: lightgray;
background: transparent;
padding: 0;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background: transparent;
display: inline-block;
}
li {
float: left;
}
li a {
display: block;
padding: 16px 54px;
margin-right: 30px;
text-align: center;
text-decoration: none;
color: dimgray;
/* border-right: 1px solid dimgray; */
/* border-bottom: 1px solid dimgray; */
}
li:last-child {
border-right: none;
}
li a:hover {
background-color: dimgray;
color: white;
}
.active {
background-color: #696969;
color: #ffffff;
pointer-events: none;
}
ul ul {
display: none;
}
ul li:hover>ul {
display: flex;
float: top;
vertical-align: top;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
<nav id="navigatie" class="nav">
<h1 class="outlineNaam">navigatie</h1>
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li class="subnav"><a>Over ons</a>
<ul class="subnav">
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
U should use flex-direction: column:
ul li:hover > ul {
display: flex;
flex-direction: column;
/* float: top; */
vertical-align: top;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
Also float property has no value "top":
see on mdn
and the float property and vertical-align is ignored in a flex container.
From the flexbox specification:
3. Flex Containers: the flex and inline-flex display values
A flex container establishes a new flex formatting context for its
contents. This is the same as establishing a block formatting context,
except that flex layout is used instead of block layout.
For example, floats do not intrude into the flex container, and the
flex container’s margins do not collapse with the margins of its
contents.
float and clear do not create floating or clearance of flex item, and
do not take it out-of-flow.
You'll simply need to apply flex-direction: column to the .subnav (you did select it using ul li:hover > ul) which will make the .subnav elements align vertically as columns.
Also, there is not value of top for the float rule and the vertical-align doesn't affect flex elements.
So, here's a working demo :
.nav {
border-color: lightgray;
background: transparent;
padding: 0;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background: transparent;
display: inline-block;
}
li {
float: left;
}
li a {
display: block;
padding: 16px 54px;
margin-right: 30px;
text-align: center;
text-decoration: none;
color: dimgray;
/* border-right: 1px solid dimgray; */
/* border-bottom: 1px solid dimgray; */
}
li:last-child {
border-right: none;
}
li a:hover {
background-color: dimgray;
color: white;
}
.active {
background-color: #696969;
color: #ffffff;
pointer-events: none;
}
ul ul {
display: none;
}
ul li:hover>ul {
display: flex;
flex-direction: column;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
<nav id="navigatie" class="nav">
<h1 class="outlineNaam">navigatie</h1>
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li class="subnav"><a>Over ons</a>
<ul class="subnav">
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
I'm attempting to create a navigation menu that shows a border when an item is hovered over. While it currently looks fine, the other menu items are pushed out of the way when one item is hovered over. How would I go about making them stay put?
I've tried a few methods that were answered here but none of them have worked.
I've included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style:none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
</nav>
View on JSFiddle
Because you are adding padding on hover. Move the padding from hover to anchor.
li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
Here is the fiddle.
Move the padding property from 'li a: hover' to 'a'.
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
padding: 5px 10px;
}
I'm trying build a news website but im having a problem with centering the tabs at the top of th page. Can anyone give me some tips on how to fix this and also explain(I'm new to web development).
Thanks in advance.
ul{list-style-type: none;
text-align: center;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333333;}
li{float: right;
margin: 0 auto;
border-right: 1px solid black;
border-bottom: 1px solid black}
li a{display: inline-block;
background-color: #333333;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;}
li a:hover {background-color: black;}
<ul role="menubar">
<li></li>
<li>News</li>
<li>Sports</li>
<li>Business</li>
<li>TV</li>
<li>Automobiles</li>
<li>Culture</li>
<li>Fashion</li>
<li>Food</li>
<li>Healthcare</li>
<li>Tourism</li>
<li>TECH</li>
</ul>
change your li's to display: inline-block and remove float: right. That will allow text-align: center on the parent ul to center to work.
ul{
list-style-type: none;
text-align: center;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li{
display: inline-block;
margin: 0 auto;
border-right: 1px solid black;
border-bottom: 1px solid black
}
li a{
display: inline-block;
background-color: #333333;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
}
li a:hover{background-color: black;}
<ul role="menubar">
<li></li><li>News</li><li>Sports</li><li>Business</li><li>TV</li><li>Automobiles</li><li>Culture</li><li>Fashion</li><li>Food</li><li>Healthcare</li><li>Tourism</li><li>TECH</li>
</ul>
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have a fairly simple navigation bar with a bottom border but I would like to box it off on either side - but not the top. So I get a |______________| surrounding all of my links but I am just starting out and whatever I try seems to border every single link which I don't want.
<nav>
<div align="center">
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><!--navigation-->
</nav>
and css
nav {
width: 100%;
margin:0 auto;
}
nav ul li {
width: 16.6%;
float: left;
border-bottom: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: #202020;
font-family: "Myriad Pro Light";
text-transform: uppercase;
text-decoration: none;
font-size: 12pt;
}
nav ul li a:hover {
color: #89ccca
}
nav ul{
width: 80%;
list-style: none;
margin: 0;
padding: 0;
}
Use first-child and last-child properties and apply it like below.
CSS
nav ul li:first-child
{
border-left: 1px solid #A2A2A2;
}
nav ul li:last-child
{
border-right: 1px solid #A2A2A2;
}
FIDDLE DEMO
maybe i can help you
try this
nav ul li {
width: 16.0%;
float: left;
border-bottom: 1px solid #A2A2A2;
border-right: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li:first-child{border-left: 1px solid #A2A2A2;}
fiddle here
http://jsfiddle.net/zfdxko8h/
try including this one..
#navigation ul li:first-child {
border-left: 1px solid #A2A2A2;
}
#navigation ul li:last-child {
border-right: 1px solid #A2A2A2;
}
Here is The Fiddle