Adding directed edges to a CSS-based graph visualizer [closed] - html

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
See this CSS-based visualization for graphs. Any idea what is the easiest way to add directions to edges (e.g. arrows on edges)?

Wrap your <li> contents with <span> tags and style the pseudo elements to achieve a proper result. You may not use ASCII characters, backgounds or even pure CSS triangles.
http://jsfiddle.net/ndozdw00/1/
.tree li span:after{
content: "▼";
position: absolute;
left: 50%;
width: 10px;
margin-left: -5px;
top: 10px;
z-index: 100;
}

Related

Adding margin/space to paragraph [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I was wondering what the best way is to get some white space below paragraphs and other elements. I have seen man websites that have empty p-divs in the html(created by ), but this is probably bad practise, isn't it? Is it recommended to use margins in this case?
As noted in the comments, use margin styling. You can add a class to you divs and style on that, or you can add a default style to all tags of a certain type, etc.
<p class="my-paragraph">
Here is some text.
</p>
.my-paragraph {
margin: 15px;
}
or if you want to apply it to all
p {
margin: 15px;
}
And you can target different margin directions:
p {
margin-top: 15px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 15px;
}

Creating a underline 'beneath' the text [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to create a title where a line is 'beneath' the text as shown here
I'd look similar to a border-bottom, however I cannot figure how I'd move that by the text.
Thank you.
You can use pseudo class to generate the "border" and position it where you want.
span {
font-size: 3rem;
position: relative;
}
span:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
background-color: purple;
bottom: 8px;
left: 0;
z-index: -1;
}
<span>Our Mission</span>

Vertical link in page sides [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I have links in my pages sides like places i colored in image below and move as page scrolls (fixed position)?
With that amount of information I can give you this much of an answer
HTML
left
right
CSS
.aside-fixed {
position: fixed;
z-index: 20;
top: 50%;
background: black;
padding: 10px;
color: white;
}
.aside-left {
left: 0;
}
.aside-right {
right: 0;
}

How to bring an element outside of its parent element using CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a markup that looks like this:
<div>
<ul>
<li>Uno</li>
<li>Dos</li>
</ul>
</div>
Basically, what I want to do is bring the <ul> outside of its parent . How can I do this using CSS if possible? Thanks.
div{ position: relative; }
ul{ position: absolute; top: 100%; }
https://jsfiddle.net/zuremvwh/

How is it possible that position absolute top 0px and right 0px are not working? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
The element with "go forward" is supposed to be at the top-right corner; why is it not at that spot when the pertaining style contains "position:absolute; top:0px; right:0px;" ?
Here is a link to the page
link removed
Because your rule:
#slidecarousel div {
position: relative;
top: 5%;
}
is overriding the other rule. It's related to the rule's specificity. You could change the #sliderButtonF selectors of your rule to be:
#slidecarousel #sliderButtonF {
position: absolute;
top: 0px;
right: 0px;
}
which should do the trick.