I got issue with my border right in my <li>
as you see the yellow right border is a bit trimmed at the bottom,I tried find a solution for this but I could not, this happen when the user zoom in the browser.
any ideas what can be?
this is my jsfiddle:
https://jsfiddle.net/veft8jw9/
You could use box shadows instead of borders like so:
.sidebar-nav li {
box-shadow: inset 0 -1px 0 0 blue;
padding: 15px;
}
.sidebar-nav li:hover {
box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
cursor: pointer;
}
it's the default rendering of border. when the borders are applied on same element, this is how they connect with adjacent border
You can use :after on li tags and display it on hover as shown in fiddle below.
div {
width: 200px;
height: 200px;
border: 50px solid;
border-color: red blue green yellow;
}
/* your solution */
.sidebar-nav li {
position: relative;
border-bottom: 1px solid blue;
padding: 15px;
}
.sidebar-nav li:hover:after {
content: '';
display: block;
border-right: 5px solid yellow;
position: absolute;
width: 5px;
height: 100%;
right: 0;
top: 0;
}
<div></div>
<h1>your solution</h1>
<ul class="sidebar-nav">
<li>link 1</li>
<li class="active" au-target-id="34">
link 2</li>
<li class="" au-target-id="34">
</ul>
CSS borders all have chamfers at their ends to fit with the connecting border.
I would suggest applying a wrapper around the bordered div with a yellow background. Then apply right padding to the bordered div to get the yellow area.
you can provide border with pseudo css, please use below css for same html.
.sidebar-nav li {
border-bottom: 1px solid blue;
padding: 15px;
position:relative;
}
.sidebar-nav li:hover {
cursor: pointer;
}
.sidebar-nav li:hover:after {
content:"";
position:absolute;
width:5px;
top:0px;
bottom:0px;
right:0px;
background:#f00;
}
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;
}
You know how to do this using CSS?
In my navbar I would like to see a transparent triangle to the active link.
If I create a PNG image with a transparent triangle and use it like this:
background: rgba (0,0,0,0.4) url (triangle.png) no-repeat bottom center;
this does not work properly because under my triangle shows the transparent rgba color rgba(0,0,0,0.4) ...
I would like to do this to make a nice effect when scrolling the page. It is possibile?
Demo
You can use the :before and :after pseudo elements to achieve this effect.
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution using links:
<nav>
<ul>
<li>homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
write css style for :active class
js. No jQuery and you even get the hover effect for free.
i think this will help you..
same concept but used differently for further reference refer here :
stackoverflow.com/questions/17327076/how-to-create-a-ul-with-a-triangle-for-the-active-row
Will post my solution. It's pretty complicated and though I don't know if there is other simpler way to make li>a nested elements be transparent for the background under ul. This solution uses :before/:after pseudo attributes.
I used this markup (how to avoid helper <i></i>?):
<header>
<ul class="clearfix">
<li><a class="active" href="">HOMEPAGE <i></i></a></li>
<li>CONTACT <i></i></li>
<li>GET OUT <i></i></li>
</ul>
</header>
and CSS:
header li a {
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: inline-block;
padding: 25px;
color: #FFF;
position: relative;
}
header li a:hover {
background: rgba(255, 255, 255, .2);
}
header li a i:after, header li a i:before {
content:'';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
display: none;
background: url(http://subtlepatterns.com/patterns/escheresque_ste.png);
background-attachment: fixed;
border-top: 15px solid rgba(0, 0, 0, .5);
}
header li a.active i:after, header li a.active i:before {
display: block;
}
header li a:hover i:after, header li a:hover i:before {
display: block;
border-top-color: rgba(255, 255, 255, .1);
}
header li a i:before {
margin-left: -15px;
border-right: 15px solid transparent;
}
header li a i:after {
border-left: 15px solid transparent;
}
Hopefully someone will get inspired one day.
Demo: http://jsfiddle.net/R9pKq/
<figure>
<div><div>
</figure>
css
figure{
width:400px;
height:320px;
background:skyblue url(http://img1.wikia.nocookie.net/__cb20140301204257/disney/images/4/49/Elsa-Anna.jpg);
border:4px solid rgba(0,0,0,.8);
margin:40px auto;
position:relative;
}
figure div{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:200px;
background:rgba(255,255,255,.1);
}
figure div:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-40px;
margin-left:-40px;
border-bottom:40px solid rgba(255,255,255,.1);
border-left:40px solid transparent;
border-right:40px solid transparent;
}
Demo
or if you want to apply it to a menu
<menu>
<li><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Projects</a></li>
<li><a>Infos</a></li>
</menu>
css
menu{
margin-top:40px;
}
menu li{
float:left;
list-style:none;
position:relative;
}
menu li{
padding:20px; 40px;
}
menu li:hover:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-20px;
margin-left:-20px;
border-bottom:20px solid rgba(0,0,0,.8);
border-left:20px solid transparent;
border-right:20px solid transparent;
}
Demo with Hover
to use the active class jst change menu li:hover:before to menu li.active:before
I have a drop down menu and it seems to be cut of due to the parent div i.e if i increase the height of the parent div, the drop down menu seems to come visible. please help. and below is my code:
MarkUp
<div id="main-navigation" class="container">
<div class="menu rounded">
<ul id="navigation" class="l_tinynav1">
<select id="tinynav1" class="tinynav tinynav1">
</div>
</div>
CSS
#main-navigation .menu ul
{
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #D51386;
border-left: 1px solid #D51386;
border-radius: 0 0 5px 5px;
border-right: 1px solid #D51386;
margin: 0 auto;
min-height: 38px;
overflow: visible;
width: 98%;
}
#main-navigation .menu li
{
border-left: 1px solid #E1E1E1;
border-right: 1px solid #C1C1C1;
float: left;
height: 38px;
position: relative;
top: 0;
}
It may be that you have overflow:hidden; on one of wrap divs .menu .rounded #main-navigation or .container, check them.
On inspecting your site, I found that you're using ul and li as custom dropdown menu. Thr reason for cut off is the the width of .va_sort_list_wrap.
Try changing it to
.va_sort_list_wrap {
width: 132px;
}
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: ;
}
I want to create a box shape and I am having trouble.
I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box.
Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.
Here is a rough sketch of what I am trying to do:
You can do this pretty cleanly with this css:
.box {
width: 100px;
border: solid #884400;
border-width: 8px 3px 8px 3px;
background-color: #ccaa77;
}
.box ul {
margin: 0px;
padding: 0px;
padding-top: 50px; /* presuming the non-list header space at the top of
your box is desirable */
}
.box ul li {
margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
sufficiently visible */
background-color: #ffffff;
list-style-type: none;
padding-left: 2px;
}
and this html:
<div class="box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
DEMO
So if you have source:
<div class="panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
You can use CSS:
div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em;
border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white;
margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
Maybe those two will help:
Listutorial
CssPlay Menus
Html:
<div id="content">
<a><div class="title">Title</div>Text</a>
<ul>
<li>Text</li>
<li>More Text...</li>
</ul>
</div>
CSS:
#content{
text-align:left;
width:200px;
background:#e0c784;
border-top:solid 10px #7f4200;
border-bottom:solid 10px #7f4200;
border-right:solid 5px #7f4200;
border-left:solid 5px #7f4200;
}
#content a{
margin-left:20px;
}
#content ul{
list-style-type:none;
margin-bottom:0px;
}
#content ul li{
padding-left:20px;
margin:0px 0px 1px -40px;
text-align:left;
width:180px;
list-style-type:none;
background-color:white;
}
#content .title{
text-align:center;
font-weight:bolder;
text-align:center;
font-size:20px;
border-bottom:solid 2px #ffcc99;
background:#996633;
color:#ffffff;
margin-bottom:20px;
}
Hope this helps.... I also added a title to it, if you dont like it just delete it...