I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}
Related
I am trying to change from anchor tag to ul li but it doesn't seem to work.
Can you find out where I need to change CSS of my code?
Original link:https://codepen.io/arkev/pen/DzCKF
My code: https://codepen.io/SankS/pen/YRNzGK
<ul>
<li>Browse</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
Minor changes in css and change 'active' class to li element
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
a{text-decoration:none;}
body {
text-align: center;
padding-top: 100px;
background: #689976;
background: linear-gradient(#689976, #ACDACC);
font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}
.breadcrumb li {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px;
/*to match with the parent's radius*/
}
.breadcrumb li:first-child:before {
left: 14px;
}
.breadcrumb li:last-child {
border-radius: 0 5px 5px 0;
/*this was to prevent glitches on hover*/
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb li.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb li.active:after,
.breadcrumb li:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb li:before {
content: counter(flag);
counter-increment: flag;
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat li,
.flat li:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat li a {color:black;}
.flat li a:hover{background:none;}
.flat li:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat li:hover,
.flat li.active,
.flat li:hover:after,
.flat li.active:after {
background: #9EEB62;
}
<!-- a simple div with some links -->
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat">
<ul>
<li class="active">
Browse
</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
</div>
<!-- Prefixfree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
Try left floating the li tags to get the horizontal look:
.breadcrumb li {
float: left;
}
Try this, I think this will help you
.flat ul li{
float:left;
}
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
I know this is a pretty stupid question, but I'm struggling to get this working and no success so far. I made a CSS menu using one online website that generate it for free. So the first challenge was to put some icons before each option, this one I got success. But now, I want to put some buttons on the right side. Let-me show you the css code for the menu:
#charset 'UTF-8';
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li #cssmenu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-family: Helvetica;
line-height: 1;
}
#cssmenu {
width: auto;
}
#cssmenu ul {
zoom: 1;
background: #547a65 url(/img/pattern.png) top left repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #354d3f;
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu a,
#cssmenu a:link,
#cssmenu a:visited {
padding: 15px 20px;
display: block;
text-decoration: none;
color: #ffffff;
text-shadow: 0 -1px 1px #161f1a;
border-right: 1px solid #354d3f;
}
#cssmenu a:hover {
color: #161f1a;
text-shadow: 0 1px 1px #69987e;
}
#cssmenu li {
float: left;
border-right: 1px solid #5e8972;
}
#cssmenu li:hover {
background: #4a6b58 url(/img/pattern.png) top left repeat;
}
#cssmenu li:first-child {
border-left: none;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
#cssmenu li#homeicon a{
background: url(/img/home.png) no-repeat;
background-position: left;
}
#cssmenu li#cardicon a{
background: url(/img/card.png) no-repeat;
background-position: left;
}
#cssmenu li#billingicon a{
background: url(/img/billing.png) no-repeat;
background-position: left;
}
#cssmenu li#ticketicon a{
background: url(/img/tickets.png) no-repeat;
background-position: left;
}
Ok, as you can see, the last 4 ID selectors is to put an icon before the button's text. But all the buttons are on left side. I want to make some buttons like: LogOut, User Settings
on the right corner. The HTML to make the menu is:
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body id="home">
<div id='cssmenu'>
<ul>
<li id="homeicon" class='active'><a href='index.html'><span>Home</span></a></li>
<li id="cardicon"><a href='#'><span>Information</span></a></li>
<li id="billingicon"><a href='#'><span>Billing</span></a></li>
<li id="ticketicon" class='last'><a href='#'><span>Tickets</span></a></li>
</ul>
</div>
</body>
</html>
I'm pretty beginner in this language, so I'm sorry for the silly question.
Thank you!
If you want to avoid classes you can use the nth-last-child selector: http://css-tricks.com/almanac/selectors/n/nth-last-child/ and float right
#cssmenu ul :nth-last-child(-n+2) {float:right;}
Demo
Better Demo With Border Fixes
If you're using ID's you could also use those to float right.
Give the right items a class and float them right. For example see this fiddle: http://jsfiddle.net/8Ena2/
#cssmenu ul li.right {float:right;}
I've added a logo to the left side of my horizontal navigational bar and I'm having a few different problems. And first of all here is a screenshot: http://i.imgur.com/TUafzKs.png
Problems:
-I want to line up all of the text with the BOTTOM of the logo. Right now all of the text is automatically lining up with to the top.
-On hover of the links, I want the background color change to white to extend to the full height of the bar, but it's only doing a portion of it. Here is a screenshot: http://i.imgur.com/ljkEdol.png
-As you can see in the first screenshot, the bar does not extend to the ends of the page (sides and top). There is a small amount of space in between. I want there to be no white space; just the pink extending to the edges.
HTML for the bar:
<ul id="nav">
<li><img id="logo" src="images/logo2.png">
<li>Work</li>
<li>About</li>
<li>Thoughts</li>
<li>Contact</li>
</ul>
CSS:
#nav {
width:100%;
float:left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #D0489A;
border-bottom: 3px solid #D0489A;
}
#nav ul {
position: absolute;
right:0px;
bottom: 2px;
}
#nav li {
float: left;
font-family: whitney light, sans-serif;
}
#nav li a {
list-style: none;
display:inline;
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
#nav li a:hover {
color: black;
background-color: white;
}
#logo {
width:200px;
}
#nav li a {
list-style: none;
display: inline-block;
padding: 8px 15px;
margin-top:174px; // you may need to adjust to get lined up perfectly
text-decoration: none;
font-weight: bold;
color: white;
border-right: 1px solid #D0489A;
}
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}