Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO
Related
I'm creating a website as i'm trying to learn HTML.
I have created a few very basic websites, so I am no master.
My horizontal(top) navigation bar is underneath my header, however I cant center the tabs for some reason.
How do I get the tabs text to be centered with the nav bar?
<!--Header-->
<header>
<img id="pumpkin" src="pumpkin.gif" alt="Pumpkin">
<h2 id="halloween">The Halloween Store</h2>
<h3 id="goblin">For the little Goblin in all of us!</h3>
</header>
<!--Main Body With Drop Down Navigation-->
<body>
<nav class="topNav">
<ul id="topNav">
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</nav>
</body>
CSS
#topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
#topNav li {
display: inline-block;}
#topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
#topNav a:hover {
background-color: lightgray}
#body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;}
In your CSS file you should do like that:
.topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
.topNav li {
display: inline-block;}
.topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
.topNav a:hover {
background-color: lightgray}
body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;
}
also <header> should go inside <body> tag.
If you are trying to center the tabs(li) aligned inside the Nav(ul), Add the FLOAT: LEFT; CSS to "#topNav a" element in your CSS file.
#topNav a{float:left;padding: 9px 30px 9px 30px !important;}
Refer to the below URL.
https://jsfiddle.net/rajeevRF/m1bu4fnr/1/
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I'm just learning CSS and HTML and decided to have a go at making a mock up website. I'm having trouble with the border not meeting the end of the top bar. Other times I've had it go over.
https://jsfiddle.net/9gonuvu7/
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
You can see this in the above link. If you could explain to me why this is happening and how I can avoid it in future I would be very grateful.
Remove the padding from the parent.
That's preventing it from reaching top.
#topbar {
background-color: #2A4F6E;
width: 100%;
height: 50px;
padding: 0px 0 0px 0;
margin: 0;
}
Okay, because you said you just started with HTML and CSS I changed a bit more in your code.
At the moment your fixedwith div has no impact on the code (maybe you use it in your full website).
You applied the background on the whole topbar, that HTML-wise also contains your menu points, assuming you only want your headline to have that blue background I swapped that property to the h1-tag.
With this change the borderlines are overlapped b the headline, which should do the job.
new JSFiddle
* {
margin:0;
padding:0;
}
body {
margin: 0;
font-family: arial, helvetica, sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
#topbar {
float:left;
width:100%;
height:100%;
overflow:hidden;
}
#topbar h1 {
display: block;
width:100%;
height:100%;
background-color: #2A4F6E;
padding: 7px 50px 7px 40px;
margin: 0;
color: white;
float: left;
border-right: solid #3E6F87 1px;
}
#topnav {
float:left;
width:100%;
height:50px;
background:#ccc;
}
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
}
#topnav ul {
margin: 0;
padding: 0;
}
#topnav a:hover{
color: #A97437;
}
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<h1>Neil's Tech Reviews</h1>
<div id="topnav">
<ul>
<li> Home</li>
<li> Reviews</li>
<li> Forum</li>
<li> Partners</li>
<li> About</li>
</ul>
</div>
</div>
</div>
</div>
</body>
I'm creating header of one aplication nad I found strange problem, which never happentd to me before. The problem is, that i have two list inside header, one floated to left, one to right and between all li elements there are two types of border. That's ok, but there's creating space between them out of nowhere? Or at least, I can't find what is creating the space
Can someone tell me where's space created?
Here is jsFiddle: jsFiddle link
Or direct-input:
HTML:
<header id="header">
<ul class="left">
<li class="title">jedna</li>
<li class="new-task">dva</li>
<li class="new-comment">NC</li>
</ul>
<ul class="right">
<li class="logged">jedna </li>
<li class="logout">dva</li>
</ul>
CSS:
header
{
position: relative;
top: 0px;
min-height: 35px;
padding: 0px;
margin: 0px;
background-color: #efefef;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
background: -moz-linear-gradient(top, #efefef, #bbbbbb);
background: -ms-linear-gradient(top, #efefef, #bbbbbb);
background: -o-linear-gradient(top, #efefef, #bbbbbb);
}
header ul
{
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
}
header ul li
{
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
header ul li:first-of-type
{
border-left: none;
padding-left: 20px;
}
header ul li:last-of-type
{
border-right: none;
padding-right: 20px;
}
header ul.left
{
float: left;
}
header ul.right
{
float:right;
}
EDIT:
This space:
Your li's are set to display: inline, so your browser is putting a space between each li just like it would between words. You can counter this default behavior in a few ways. You can float instead of using display: inline, you can put all your li's on one line without spaces, or you can add a negative margin to pull the li's together. This article explains your options better than I could:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Set ul li to float:left; and set the line-height to 25 instead of 35 in header ul
Adding the following CSS code fixed it for me:
header ul.left li {
display:block;
margin: 0;
float: left;
line-height: 25px;
}
This is being caused by the display: inline;.
What is happening is the white space between the lis is being considered as a character.
To prevent this add font-size: 0; to the parent ul and then add the font-size: 16px; to the lis.
header ul {
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
font-size: 0;
}
header ul li {
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
font-size: 16px;
}
JSFIDDLE
Here is a good article on what options you can use.
Just add float: left; and reduce padding, here's a FIDDLE
header ul li {
display: inline;
float: left;
padding: 0 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
*Note: Horizontal space with width of about 4px is always added on inline & inline-block elements and to fix that you must float them or write HTML code in line for that elements.
I have made a navigation bar using <ul> and <li>
I would like to customize each tab with border, gradient etc.
Where should it be applied?
My CSS styling tend to affect only the letters, not anything else.
CSS
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: solid black 1px;
border-bottom: solid black 1px;
}
#nav ul li {
display: inline;
margin-left: 50px;
font-weight: bold;
background-color: grey;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Files</li>
<li>Info</li>
<li>About</li>
</ul>
</div>
'a' tags inside of a styled tag (such as an 'li' tag) will not pick up any of the styles you set. They want their own styles. You will need to move all the 'li' styles to the 'a' tag and then put a display:block; on the 'a' tag.
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav ul li {
display: inline;
margin-left: 10px;
width:50px;
height:20px;
line-height:20px;
font-weight: bold;
background-color: grey;
}
a {
display: block;
// then whatever other rules you want to apply: width, height, border, pink flowers, etc
}