HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows pointing towards the destination host). Using tables seems too complex due to elements such as arrows spanning multiple columns, while positioning divs correctly horizontally may prove challenging.

Are there any helpful frameworks available to streamline this process? (I would prefer not to use canvas unless absolutely necessary)

Edit: I didn't mention images because certain elements of the diagram require :hover actions and future clickability.

htmlcssdiagram

Answer №1

My recommendation would be to utilize PNG files with a transparent alpha layer for overlaps and position them absolutely using CSS. Without seeing the overall layout of your project, I can't confirm that this is the ideal approach for your specific scenario.

Here's an example of CSS code for creating a circle:

<a class="circle" id="myCircle" href="bar">Bar</a>
a.circle {
  display:block;
  height:150px;
  width:150px;
  background-image:url(/path/to/circle.png);
  background-repeat:no-repeat;
  position:absolute;
  line-height:150px;
  text-align:center;
}

For positioning an individual circle element:

a#myCircle {
  top:200px;
  left:300px;
}

The class declaration sets attributes for anchor elements with the "circle" class. The anchor identified by "myCircle" will then be placed at coordinates 200,300 in pixels from the top left corner of the parent element with position:relative; specified.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for determining the numerical worth of the px containers?

https://i.stack.imgur.com/0K2TD.png Total width of the bar is set to 500px, with the red box at a width of 150px, the yellow box at 200px, and the green box at 50px. CSS Styles: .box { float:left; width:150px; box-shadow:3px 3p ...

javascriptjqueryhtmlcss

Angular17+ introduces a new feature called the Dynamic Tag Class, providing

Why isn't my navigation bar updating when the page changes? Here is my app.component.html code: <html> <app-navbar></app-navbar> <router-outlet></router-outlet> </html> This is where my navbar.component.html s ...

htmlangularclassdynamictags

Issue with horizontal scrolling functionality in DataTables

I have a table with over 10 columns, and I am using datatables to display the data. I have enabled horizontal scrolling due to the large number of columns, but the scroll is not appearing. Can someone please assist me with this issue? Here is a screenshot ...

jquerycssdatatables

Insert metadata tag into the head element of the parent iframe

I am looking to insert a meta tag element into the head element of an Iframe parent. I attempted window.parent.$('head').append('sometext'); This method worked when the source file and iframe file were in the same folder, however it d ...

javascriptjqueryhtmliframe

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

cssextjscomboboxiconsfont-awesome

What are some ways I can customize this jQuery :submit selector demonstration?

After reviewing the jQuery example provided here, I am curious about how to adjust the code in order to change the color of a cell only when the value of the submit button within that cell meets certain criteria. For instance: var submitEl = $( ...

javascriptjqueryhtml

"Discover the process of using Puppeteer to extract information from a website, even when dealing with input fields that are set

I'm attempting to replicate the structure of a website using puppeteer, and here's what I have so far: page = await this.createPage(browser); page.setContent(await originalPage.content()); The issue arises from input fields in the DOM that are ...

jqueryhtmlpuppeteer

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

cssangular

Unequal spacing between the edges of two background images

I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as ...

htmlcss

Tips for utilizing an event listener for a submission button

I am encountering a problem with this event listener. I attempted to add an event listener to the submit button, but it seems to be inactive. I can't figure out what mistake I have made! Here is my code: const form = document.getElementById("form") ...

javascripthtmlfunctionmethodsaddeventlistener

If there is no content present, the html element with contenteditable will have an <br>

I'm encountering an issue with a <div contenteditable="true"></div>. Whenever I enter content into it and then delete that content, the browser seems to automatically insert a <br> element into the div. Has anyone else experienced th ...

html

Angular - The confirmDialog from Primeng is appearing hidden behind the modal from ng-bootstrap

I am currently utilizing the primeng and ng-bootstrap components to develop an angular-based website. In order to collect data, I have implemented a form within an ng-bootstrap modal. However, upon clicking the "save" button on the modal, the primeng conf ...

htmlangularnpmprimengng-bootstrap

Crafting an interactive form

Creating a form with 2 options (Yes/No) is my current task. When the user selects one of these options, I want a collapsible subform to appear with specific details related to that selection. If the user chooses the other option, a different collapsible su ...

javascriptjqueryhtmlforms

Can I be detected for using text expanders or copying and pasting text into a form before submitting it?

As part of my job, I write messages in text boxes on a non-secure website interface for a company. Working from the comfort of my own home on my personal PC using Google Chrome, without any spy programs installed. The company prohibits pasting messages, b ...

htmlsecurityuser-interface

Modifying the content of a webpage with the help of Tampermonkey

I'm working on changing a W Text into B using the code below. It's functional, but I'm experiencing two issues. First, there is a lag when refreshing the page where it briefly shows the W text before replacing it with a B. Second, every 20 o ...

javascripthtmltampermonkey

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

Dropdown feature in the side navigation bar

Is it possible to create a drop-down section in a navigation bar using HTML/CSS/JS? For example, clicking on 'products' would reveal a list of products that disappears when clicked again. If this is achievable, how can it be done? I am currently ...

javascripthtmlcss

The choices in the cell table selection are obscured due to the select table's height when opened

I am experiencing an issue with a table where each row contains two cells with "select" options. The problem arises when I open them, as they load within the table and the available options are not clearly visible. I can only view all the options by scroll ...

javascripthtmljquerycsstom-select

Uncovering Twig's Power: Navigating JSON Key Values

In my current project, I am utilizing OctoberCMS and Twig to fetch dynamic data and translations from JSON files for the front end. Here is an example snippet of code: <div class="wrapper items"> <div class="items"> {% for suggestion in ...

htmljsontwig

Guide to using AJAX to send a select tag value to a PHP script on the current page

Issue I am facing a problem where I need to utilize the select tag in order to choose a value and then send that value via an ajax call to a PHP script embedded within the same page. In my code, I have implemented the select tag and upon selecting a valu ...

javascriptphpjqueryhtmlajax