I'd like my nav links to be centered horizontally with a 1px border between, like:
WORK | BLOG | ABOUT | SERVICES | CONTACT
Currently, I'm using:
<nav>
<ul>
<li>Work</li>
<li>Blog</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
and
nav {
float: right;
margin-right: 40px;
margin-top: 40px;
}
nav ul li {
border-right: 1px solid #202020;
display: inline;
}
nav ul li a {
font-family: nevis-webfont;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
margin-right: 20px;
}
How do I center the border between the links and remove the border that inevitably shows after the final link(in this case, CONTACT)?
Try this - http://jsfiddle.net/qt4SW/
nav {
float: right;
margin-right: 40px;
margin-top: 40px;
}
nav ul li {
border-left: 1px solid #202020;
display: inline;
}
nav ul li a {
font-family: nevis-webfont;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
margin:0 10px;
}
nav ul li:first-child {
border: 0;
}
Note that the <li>-s now have a left border and it's removed from the 1st element. That's because the :first-child pseudo-selector has a better support (e.g. IE7) than the :last-child
Related
I'd like to center a hover horizontal bar/border above a menu.
(I have already tried text-align: center and align-content). how could I do this ?
this is my code :
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-right: 15px;
margin-top: 5px;
}
nav a {
font-size: 1.1em;
color: #181818;
padding-right: 20px;
padding-top: 30px;
text-decoration: none;
}
nav a:hover {
color: black;
border-top: 3px solid #3691b0;
text-align: center;
}
nav {
position: absolute;
right: 210px;
top: 20px;
}
<nav>
<ul>
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
thanks for your help
You can't center them if you added a nav a {padding-right:20px; } that creates some white space inside <a>center </a> unless you make it both sides equal padding
Try to change it to margin-right:20px;
nav ul {
list-style-type: none;
display: flex;
}
nav li {
margin-right: 15px;
margin-top: 5px;
}
nav a {
font-size: 1.1em;
color: #181818;
margin-right:20px; //padding-right:20px;
padding-top: 30px;
text-decoration: none;
}
nav a:hover {
color: black;
border-top: 3px solid #3691b0;
text-align: center;
}
nav {
position: absolute;
right: 110px;
top: 50px;
}
<nav>
<ul>
<li>Accueil</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
So I have this issue where my Navbar splits itself based on the specified padding. Easier to see what I mean below.
As you can see I have an extra blank menu item which after some time I was able to narrow down to it being caused by the padding.
Above is with 0 padding. How can I keep the Navbar height along with fixing the menu?
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
Specifically:
padding: 20px; (image1) padding: 0px; (image 2)
Snippet
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
Want was your problem? (My assumption)
First check this CODEPEN
You were assigning padding property to li a:hover, instead of li a.
As it's possible to achieve the desired result by adding padding to li a and other way is by assigning line-height to either li/#menu.
#menu {
display: flex;
margin: 0;
width: 1080px;
margin-top: 5%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
overflow: hidden;
}
li {
flex: 1;
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
<nav>
<ul id="menu">
<li class="active">HOME</li>
<li>GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
How do you centre the links themselves in the navigation bar?
The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.
My HTML:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<ul>
<li> <span class="title"><strong>HOME</strong></span> </li>
<li> <span class="title"><strong>ABOUT</strong></span></li>
<li> <span class="title"><strong>WOOD</strong></span> </li>
<li> <span class="title"><strong>CONTACT</strong></span></li>
</ul>
</div>
My CSS:
In all 3 responsive size: (mobile, tablet and desktop).
#centerment {
position:relative;
clear: both;
float: left;
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;
}
#menu4 ul {
list-style: none;
font-family: "corbert regular regular";
font-size: 10px;
letter-spacing: 2px;
line-height: 1.2em;
float: left;
clear: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#menu4 ul li{
float: left;
}
#menu4 ul li a{
display: inherit;
text-decoration: none;
color: #000000;
text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 170px
}
#menu4 ul li a span{
display:inherit;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color: #000000;
}
#menu4 ul li a span.text{
padding: 0px 5px;
font-family: "corbert regular regular";
font-size: 13px;
font-style: normal;
font-weight: 300;
letter-spacing: normal;
line-height: 1.6em;
color: #000000;
visibility: hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.gridContainer.clearfix #navigation #menu4 ul li a .title {
font-family: Corbert;
}
Many many thanks in advance!
set containing element to text-align: center; then set the li's to display: inline-block; if there are no floats on the a tags this should do it.
Get rid of borders on #menu4 ul, give it a margin of -1px auto;, add this:
#menuBox {
margin: 0 auto;
width: 53.2em;
height: 30px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
To contain the ul.
I originally posted the wrong link here is the correct one: jsFiddle
You can lose the ul and just use spans. Change your HTML to this:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<div class="outer">
<span class="inner"><span class="title"><strong>HOME</strong></span> </span>
<span class="inner"><span class="title"><strong>ABOUT</strong> </span></span>
<span class="inner"><span class="title"><strong>WOOD</strong></span> </span>
<span class="inner"><span class="title"><strong>CONTACT</strong> </span></span>
<span class="finish"></span>
</div></div></div></div>
Make sure to keep the "finish" span at the bottom of your list. That spaces all the links correctly.
Then add this to your CSS:
.outer {text-align: justify; width:70%; margin:0px auto; border-top:1px solid; border-bottom:1px solid;}
.outer span.finish {display: inline-block; width: 100%}
.outer span.inner {display: inline-block; white-space: nowrap}
Then change #menu4 ul to #menu4 .inner with this CSS:
#menu4 .inner {list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em;
}
and change the "#menu4 ul li a" to say "#menu4 a"
That should do it. You can change the width % of .outer to play with the width of the nav as a whole.
I'm working on a navigation menu, and have created a containing four anchor tags, as below:
<nav>
<ul>
<li>BLOG</li>
<li>ABOUT ME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
I've set a top border of 10px for each link, which I want to sit tight on top of the text. Despite setting padding to 0 in all the right places, I can't get rid of the padding. I've tried changing line height but this just moves the whole nav section up or down the screen, and doesn't affect the gap between the anchor text and the top border.
Here's the CSS (not including CSS resets etc, which I can post if needed, but these mostly came from HTML5BoilerPlate.
nav ul {
padding-right: 24px;
float: right;
}
nav li {
display: inline;
font-family: Oswald;
font-size: 25px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
margin-left: 16px;
}
nav li a {
border-top: 10px solid #7a7a7a;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a.highlight {
color: #29cf86;
}
Can anyone help? Thanks.
Set an anchor float which will remove the margin & padding in every web-browser.
#container li a {
float:left;
}
You could translate the anchors a few pixels up via relative positioning:
li {
display: inline;
margin-left: 16px;
border-top: 10px solid #7a7a7a;
}
a {
position: relative;
top: -6px;
}
Live demo: http://jsfiddle.net/XQK9h/
I think it helps you.
<style type="text/css">
nav ul {
padding-right: 24px;
float: right;
}
nav div {
border-top: 10px solid green;
display: block;
float: left;
font-family: Oswald;
font-size: 25px;
height: 10px;
margin: 10px;
}
nav a {
color: #7a7a7a;
text-decoration: none;
}
nav a:hover {
color: #555555
}
nav a.active {
color: #555555;
}
nav a.highlight:hover {
color: #1f9c66;
}
a {
position: relative;
top: -3px;
}
a.highlight {
color: #29cf86;
}
</style>
<nav>
<ul>
<div>BLOG</div>
<div>ABOUT ME</div>
<div>PORTFOLIO</div>
<div>CONTACT</div>
</ul>
</nav>