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

Facing a selection list issue on a web application built with Flask and Vue.js

I'm trying to integrate Flask and Vue.js together, but I've encountered an issue with my select element. The following code snippet is present in my HTML file: <div class="col-sm-10"> <select class="form-select" v-mod ...

htmlvue.jsflask

The PHP "include" function seems to be malfunctioning when used inside

Hey there! I'm trying to incorporate an echo statement that includes a variable along with some CSS and an image, but for some reason it's not working as expected. Can anyone lend a hand? <?php if (isset($_POST['sharebutton'])) ...

phphtmlimagecss

When using jQuery and AJAX together, it seems that the POST method is returning

Currently experimenting with Cloud9. The current project involves creating an image gallery. On the initial page: There are a few pictures representing various "categories". Clicking on one of these will take you to the next page showcasing albums fro ...

javascriptphpjqueryhtmlajax

Update Relative Links using JQuery or JavaScript

Currently, I am employed by a company that specializes in building websites using a specific platform. We have encountered an issue related to relative URLs within this platform. The platform exclusively utilizes relative URLs and I am looking for a way t ...

jqueryhtmlhyperlink

Combining the total of numerous inputs that are multiplied by a specific value all at once

Hey, I've been working on a project with a table and an input field with costs using jQuery. You can check out This Fiddle for reference. $( ".total" ).change(function() { let i = 1; var input001 = document.getElementsByName(i)[0]; var ...

javascriptphpjqueryhtml

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

javascriptcssreactjsresponsive-designtailwind-css

Is it possible for me to develop a mobile application using JavaScript, HTML, and CSS and distribute it for sale on the App Store, Google Play Store, and Microsoft Mobile App Store at

I have a keen interest in web standards such as Javascript, HTML, and CSS. My goal is to utilize these languages to develop applications for mobile devices like phones and tablets. I am also considering selling these applications on various platforms inclu ...

javascriptandroidhtmliphoneipad

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

Omit the element from the event listener

Is there a way to prevent the image from triggering a click event in this code snippet? $('#templtable .trhover *:not(#infoimg)').live('click', function(event) { event.stopPropagation(); $(this).toggleClass('selected&a ...

jquerycss

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

javascriptregexhtmlangular

Guide on fetching data from a different php file using jQuery's .load() method?

I am trying to use a basic .load() function from jQuery to load a div element with an id from another file in the same directory when changing the selected option in a selector. However, I am having trouble getting it to work. Nothing happens when I change ...

javascriptphphtmljqueryajax

Exploring the different ways to compare data with the load() method

I am faced with a coding dilemma. I have two pages: data.php and index.html. The data.php page contains a single value (let's say 99), while the index.html page uses jQuery to dynamically load the data from data.php into a div called "data" every 2 se ...

jqueryhtmlcolorsload

Can we access global variables directly in an Angular 2 HTML template?

After setting the app.settings as shown below public static get DateFormat(): string { return 'MM/DD/YYYY';} I need to utilize it in one of my HTML templates for a component. This is what I want to achieve. <input [(ngModel)]="Holiday" [dat ...

htmlangulartypescript

What is the best way to modify a variable in a nested element using ng-click in the parent element?

Review this code snippet: <section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false"> <div class="page-content sub-content active-section">{{activeSection}} < ...

javascripthtmlangularjs

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...

htmlcssvue.jssassvuetify.js

What is the reason behind receiving email alerts whenever visitors access my website?

While developing a website, I ran some tests and noticed that whenever I visit the URL, an email notification is generated. However, the notification received is just a blank one. Could this issue be related to what I entered in the action field? <for ...

phphtmlforms

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

htmlcsstwitter-bootstrap

Tips for aligning multiline text in the center of images with varying widths

Excuse my lack of experience, but I have a question, I am looking to center a header and some text next to an image with variable width. Additionally, the text should be able to position on either side of the image, while still being coded first in the HT ...

phphtmlcsscenter

Place a material-ui React component at the center of a footer section

I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...

javascripthtmlcssreactjsmaterial-ui