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>
Related
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>
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;
}
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 am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
Below is my html
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Franchises
<ul>
<li>elroyz Xpress</li>
<li>skye stickbeetles</li>
<li>Juddamania</li>
</ul>
</li>
<li>Fixtures
<ul>
<li>Round 1</li>
<li>Round 2</li>
<li>Round 3</li>
<li>Round 4</li>
<li>Round 5</li>
</ul>
</li>
<li>Free Agents
<ul>
<li>Adelaide</li>
<li>Brisbane</li>
<li>Carlton</li>
</ul>
</li>
</ul>
</div>
below is my CSS
#wrap {
width:100%;
height: 37px;
margin: 0;
z-index:99;
position:relative;
background-color:#F00;}
.navbar {
height: 35px;
padding:0;
margin: 0;
position:absolute;
border-right: 1px solid #1c1c1c;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 14px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #F00
}
.navbar a {
padding: 10px 0;
border-left: 1px solid #1c1c1c;
border-right: 1px solid #1c1c1c;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {background-color: #a4a4a4;}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {background-color: #a4a4a4;}
.navbar li ul li a {
border-left: 1px solid #1c1c1c;
border-right: 1px solid #1c1c1c;
border-top: 1px solid #1c1c1c;
border-bottom: 1px solid #1c1c1c;
}
.navbar li ul li a:hover {background-color: #1c1c1c;}
im only new to html and css so im having abit of trouble getting the nav bar to center in the page. by center i mean the actual list items to center in the page not on the left hand side like it is now. any help is greatly appreciated thanks!
You need to add width and margin auto to your navbar I made a little jsFiddle
.navbar {
height: 35px;
width:610px;
margin:0 auto;
}
jsFiddle
You have to set the width of wrap to something in pixels like this
#wrap {
width:750px; // Set it according to your need
margin: 0px auto; // i also changed this
height: 37px;
z-index:99;
position:relative;
background-color:#F00;}
and also the margin to 0px auto
Here is the JSfiddle
.navbar {
height: 35px;
padding:0;
position:relative;
margin-left:auto;
margin-right:auto;
width: 100px;// change this to desired width
border-right: 1px solid #1c1c1c;
}