Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Trying to do circles joined by lines

knutsford01

New Coder
I have this CSS


CSS:
.responsive-circle2 {

    height: 2px;

    background-color: #CCCCCC;

    overflow: visible;

    position: relative;

}


.responsive-circle2::before,

.responsive-circle2::after,

.responsive-circle2 > i {

    background: #FF0000;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 1px solid #FF0000;

    position: absolute;

    content: "";

    top: -7px;

}


.responsive-circle2 > .circle3 {

    right: 0;

    background: #CCCCCC;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 1px solid #CCCCCC;

    position: absolute;

    content: "";

    top: -7px;

}


.responsive-circle2 > .circle1 {

    left: 33%;

    left: calc(33% - 9px);

    background: #FF0000;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 1px solid #FF0000;

    position: absolute;

    content: "";

    top: -7px;

}


.responsive-circle2 > .circle2 {

    left: 66%;

    left: calc(66% - 9px);

    background: #CCCCCC;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    border: 1px solid #CCCCCC;

    position: absolute;

    content: "";

    top: -7px;

}



And this <div>


<div class="responsive-circle2"><i class="circle1"></i><i class="circle2"></i><i class="circle3"></i><i class="circle4"></i></div>


How do I get the line between the first two red circles red instead of #CCCCCC?

Please.
Thanks
 
Last edited by a moderator:
I hope you're just messing around seeing how things work cause what your doing is crazy. Easier ways to do this.

Staying with how your doing things I did this - Because the line you are drawing is just a collaped DIV and we can't have it change colors-- Well yes we could, but I didn't mess with that. I just made another DIV with a red back ground and put it in your DIV

I added it in the CSS after the first one
<style>
.responsive-circle2 {
height: 2px;
background-color: #CCCCCC;
overflow: visible;
position: relative;
}
.responsive-circle8 {
height: 2px;
width: 100px;
background-color: red;
overflow: visible;
position: relative;
}


You need to figure out the width of it.


Here is the HTML


<div class="responsive-circle2">
<div class="responsive-circle8"></div>
<i class="circle1"></i>
<i class="circle2"></i>
<i class="circle3"></i>
<i class="circle4"></i>
</div>
 
I hope you're just messing around seeing how things work cause what your doing is crazy. Easier ways to do this.

Staying with how your doing things I did this - Because the line you are drawing is just a collaped DIV and we can't have it change colors-- Well yes we could, but I didn't mess with that. I just made another DIV with a red back ground and put it in your DIV

I added it in the CSS after the first one
<style>
.responsive-circle2 {
height: 2px;
background-color: #CCCCCC;
overflow: visible;
position: relative;
}
.responsive-circle8 {
height: 2px;
width: 100px;
background-color: red;
overflow: visible;
position: relative;
}


You need to figure out the width of it.


Here is the HTML


<div class="responsive-circle2">
<div class="responsive-circle8"></div>
<i class="circle1"></i>
<i class="circle2"></i>
<i class="circle3"></i>
<i class="circle4"></i>
</div>
I was playing around with something I found on jsfiddle. I thought it was much too complicated. I did try adding an extra div there but it didn't work so I got totally stuck. I have get a working version in fiddle in the end by adding the div before circle 4 and using left in the CSS for the red line
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom