Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Sweet Coding :)
@SweetCodingInc
Which is okay because codepen is there to create quick examples.
If you want to code online, there are better sites to do that like Stackblitz and CodeSandbox
@rajeshrmishra are you behind some proxy?
like corporate proxy at work
rajeshrmishra
@rajeshrmishra
@Sweet Coding no, at home
Randy
@RandyGoldsmith
does anyone know how to put a line vertically down through bullet points in a list?
Sweet Coding :)
@SweetCodingInc
@RandyGoldsmith border left on ul ?
Randy
@RandyGoldsmith
@SweetCodingInc tried that
i think its very complicated..requires a lot of stuff
Sweet Coding :)
@SweetCodingInc
I shouldn't
do you have codepen?
Michael Cordero
@CyberPutty
@SweetCodingInc thanks ill check those out.
CamperBot
@camperbot
cyberputty sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Randy
@RandyGoldsmith
if you scroll all the way down you will see i did what you suggested
what i want is a vertical line that goes through the list items bullet points
Sweet Coding :)
@SweetCodingInc
@RandyGoldsmith You could set
ul {
    list-style-type: none;
    padding: 5px;
}
Randy
@RandyGoldsmith
but i need the bullet points..
im just doing a clone of this
under work and education you'll see the blue circles and lines
Sweet Coding :)
@SweetCodingInc
@RandyGoldsmith Got it... You shouldn't use ul/li in that case
Randy
@RandyGoldsmith
@SweetCodingInc i have to use :after and :before and that stuff right?
Sweet Coding :)
@SweetCodingInc
@RandyGoldsmith You could. but it will be harder that way
Randy
@RandyGoldsmith
looked it up and they have some solutions on overstack but they arent easy to understand
not very good at html and css..this is suppose to help me with that
Michael Cordero
@CyberPutty
@RandyGoldsmith take out all of the lines and place a div before the one with the list. then position it absolutely. give it a height and a margin as well as border left in order to position it. it will be absolutely positioned within the div. but you need to make sure to stay away from the top,bottom,left,right properties as that will sort of disconnect it from the div.
@RandyGoldsmith
.timeline
{ 

  height:60px;
  position: absolute;
 margin-left:30px;
  border-right: 1px solid;
  display:inline-block;

}
<div class="timeline">

      </div>
      <div class="work">
        <ul class="">
          <li class="">Design Director at Big Design, New York</li>
          <li>Senior Designer at Design Company, Brookyln</li>
          <li>Designer at Brand New, Paris</li>
        </ul>
      </div>
@RandyGoldsmith you should also make work display:inline-block i believe.
Randy
@RandyGoldsmith
@CyberPutty hmm..trying it now
Michael Cordero
@CyberPutty
.work {

  display:inline-block;

}
must be doing something wrong
Michael Cordero
@CyberPutty
Claudio Restifo
@Marmiz

I think the best approach is using pseudo-elements (:before or :after).
Could be a chance to learn them?

You can use it to style the bullet point as well :)

Michael Cordero
@CyberPutty
@RandyGoldsmith compare is that what you want
Randy
@RandyGoldsmith
@CyberPutty yes thanks, its very close..i just need the line to run through the circles
CamperBot
@camperbot
randygoldsmith sends brownie points to @cyberputty :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @cyberputty |http://www.freecodecamp.org/cyberputty
Randy
@RandyGoldsmith
@Marmiz yeah i may have to learn them and read up on how to do that
Claudio Restifo
@Marmiz

@RandyGoldsmith I'd go with something like:

li:before {
 content: "";
 width: 5px;
 height: 10px;
 position: absolute;
 background: 'acquamarine';
}

and then play around with top and left/right according to your font size

width and height are just random number as well
Randy
@RandyGoldsmith
@Marmiz okay thank you
CamperBot
@camperbot
:star2: 1160 | @marmiz |http://www.freecodecamp.org/marmiz
randygoldsmith sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
Claudio Restifo
@Marmiz
probably the div solution as @CyberPutty suggested work as well, I just never tried it :)
Dany Din
@danydin

@Marmiz i found for example those fonts:
https://github.com/lcdvirgo/bootstrap/tree/master/assets/fonts/%5BFontFont%5D%20Kievit

how i apply them on my site what are the stages?

  1. put them in my hosting folder..
  2. add href to them through my html
  3. call them through the class-css i want to apply?
    finish?
Dany Din
@danydin
??