How to make vertical lines between list items using CSS?
Tags: html,css,html5,css3
Problem :
I am referring to these lines: http://prntscr.com/d44uuk I want them to have dynamic height - so if I decide to change vertical distance between <li>
elements - they will resize automatically.
Here's my fiddle: https://jsfiddle.net/v6ccgkwo/
ul {
list-style: none;
}
ul li {
margin-bottom: 40px;
}
ul li span {
border-radius: 50%;
border: 1px dashed black;
padding: 5px 10px;
margin-right: 10px;
}
<ul>
<li><span>1</span>Легко устанавливается на сайт</li>
<li><span>2</span>Следит за поведением посетителей</li>
<li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li>
<li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li>
</ul>
Solution :
This will work with dynamic content and no extra DOM has been used. Give a try
ul {
list-style: none;
}
ul li {
padding-bottom: 40px;
position:relative
}
ul li span {
border-radius: 50%;
border: 1px dashed black;
padding: 5px 10px;
margin-right: 10px;
background:#fff
}
ul li span:before{
content:'';
position:absolute;
border-left:1px solid ;
left:14px;
bottom:0;
z-index:-1;
height:100%
}
ul li:last-child span:before{
content:none;
}
ul li:last-child{
padding-bottom:0
}
<ul>
<li><span>1</span>Легко устанавливается на сайт</li>
<li><span>2</span>Следит за поведением посетителей</li>
<li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li>
<li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li>
</ul>
CSS Howto..
I create this: html <h1 class="ribbon"> <strong class="ribbon-content">CAPTURE|WEDDING PHOTOGRAPHY</strong> </h1> css .ribbon { font-size: 16px !important; /* This ribbon is based on a 16px font side and a 24px vertical...
I think that you can try with relative protocol caller. <link rel="stylesheet" href="//www.example.com/style.css"> ---------^^ if your users visit your web in http, it loads http, and if the user visit...
#messageBox { width:95%; /* wrong calculation when you add with margin/padding makes overflow */ height:35px; margin:10px; padding:10px; font-family:Arial; font-size:18px; border:1px solid red; } <table> <tr> <td colspan="2" style="height:185px; border:1px solid...
just changed the following: .Inner3 { ... float:right; } and it worked like a charm. JSFiddle Demo...
The only real way to do those transforms is with the -webkit-transform tag. Alternatively, you can design the images / elements by hand and use .PNG files to maintain the...
You could change the name which would ensure that regardless of users browsers, they would get the new file. In all places you reference the CSS file, reference a variable...
The CSS Fonts Module Level 4 draft introduces new generic font families For most languages and scripts, existing generics can be mapped to something comparable to that script. That’s useful...
Simply add the necessary selectors? .knuth-style, .knuth-style:after, .knuth-style:before .knuth-style *, .knuth-style *:after, .knuth-style *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ...
To change the background colour of the navigation bar itself, add this to the .nav class: background-color:#002d60; You could use something like colorpicker.com to find colour hexadecimal codes. If you...
you could overlay div on top of an image and set gradient for div http://tinkerbin.com/xXJQrgnk
1) Trim image with <div> and overflow:hidden: div.trim { max-height:100px; max-width: 50px; overflow: hidden; } <div class="trim"><img src="veryBigImage.png"/></div> 2) Use max-width: 50px; and max-height: 100px for image itself. So image...
You simply can not remove the table-tag from the control because the control is formatted this way.
Append these CSS .b-mode .b, .n-mode.n { display:block; } .b-mode .n, .n-mode.b { display:none; } Modify onclick action <a href="#" onclick="NorB(this,'n')"> Modify Javascript function NorB(e, arg) { var wrapper =...
Remove the position:absolute; and replace it with position:relative; #contentbox{ width:80%; left:10%; position:relative; background-color:white; border-width:5px; border-style:solid; border-color:#0052b0; min-height:700px; top:-50px; } ...
Its much easier to use actual element names to create directives in your DOM rather than trying to use the class method. For two reasons: 1) its much more readable...
SocialEngine doesn't allow HTML modification of the built-in templates. In order to write a CSS definition for a specific element, I suggest using CSS specificity as a way to make...
This can be achieved easy with jQuery: jQuery: $(document).ready(function(){ var list = $('ul.col_selector_container'); list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()}); $(window).resize(function(){ list.css({'min-height':list.parent().height(),...
An example without pseudo classes .outer{ height: 1em; margin: 0 1em 0 1em; } .content{ border: 1px solid #000; border-left: none; border-right: none; } .innerContent{ margin: 0 1em 0 1em;...
Try using -webkit-appearance: none; to disable the browser's default styling, then apply your own styles. More info and examples at 37signals.
Transitions work in both directions automatically. The problem you are experiencing is that border-style is not a property that can be animated so it changes instantly. This means that when...
Try without comma before !important: .tooltip{ z-index: 1151 !important; } ...
Setting display: inline-block; on your span should fix this. As is pointed out in the comments below, span is by default an inline element, but that does not mean that...
you can use RGBA colors. I have made up an example for you: http://jsfiddle.net/ypaTH/ ul { background: rgba(255, 255, 255, 0.5) //white with opcaity of 50% } ul li {...
<% = WebResource("image1.jpg") %> You can use above statement inside your CSS file, and while you register your CSS with WebResourceAttribute, you can set "PerformSubstitution" to true Default.css body{ background:...
Give both the image and the text a vertical-align: middle - the text needs to be contained in an element that is also display: inline. So markup like this: <div>...
change: .fancybox-skin { background: none repeat scroll 0 0 #F9F9F9; } to .fancybox-skin { background: #000000;} in html code set padding: to 1px like so <div class="fancybox-skin" style="padding: 1px;"> ...
If you liked and your browser support allowed it, you could use a flexbox solution for your needs (you can check out a nice flexbox reference over @ css-tricks.com here)....
You need to tell Rails to precompile your additional files, in your application.rb add config.assets.precompile += ['mysubdirectory/main'] Rails will only precompile application.css and application.js by default....
Yes, you are gimbal locked, the rotateX value needs to be placed before the rotateY. Order is important for transforms. What happens in your case is that the 90 degree...
Replace h1.site-name.a with h1.site-name a You dont need to put . here.Because it is not a class it is a tag. h1.site-name a{ font-size:36px; text-decoration:none; color:red; } ...