Chart in HTML CSS, Astrological chart |
Chart in HTML CSS, Astrological chart |
sujatha |
Nov 18 2023, 09:27 AM
Post
#1
|
Group: Members Posts: 4 Joined: 18-November 23 Member No.: 29,091 |
I want to make chart using html css design, I have attached design I tried table, tr, td, it didn't work since it is combination of square and triangle. Is there any way to make this design happen? After this code design, i will take care of value passing to all squares and triangles. I need just that diagram code or support. Thanks for your support.
Attached thumbnail(s) |
sujatha |
Nov 21 2023, 07:51 AM
Post
#2
|
Group: Members Posts: 4 Joined: 18-November 23 Member No.: 29,091 |
Thank you so much for all your support putting together. I am sending code for south indian chart as you are interested, i may change height width later with little updates...
#######HTML ########## <h4>South Indian Chart</h4> <table className="tableA"> <tr> <td id='Pi'>{PiVal}</td><td id='Ar'>{ArVal}</td><td id='Ta'>{TaVal}</td><td id='Ge'>{GeVal}</td> </tr> <tr> <td id='Aq'>{AqVal}</td><td className="col">Rasi Chart</td><td></td><td id='Ca'>{CnVal}</td> </tr> <tr> <td id='Ca'>{CpVal}</td><td></td><td className="col1"></td><td id='Le'>{LeVal}</td> </tr> <tr> <td id='Sa'>{SgVal}</td><td id='Sc'>{ScVal}</td><td id='Li'>{LiVal}</td><td id='Vi'>{ViVal}</td> </tr> </table> ########### CSS########### .col { border-right: hidden; border-bottom: hidden; } .col1 { border-left: hidden; border-top: hidden; } .tableA { border-collapse: collapse; /* border: 2px solid #ff4d00;*/ background-color:rgb(244, 244, 216); inline-size: 2px solid; height: 400px; width: 600px; margin-left: 10%; &td, th, tr{ border: 1px solid #402cef; text-align: center; table-layout: left; font-size: 15px; }} |
pandy |
Nov 23 2023, 02:31 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
Thank you so much for all your support putting together. I am sending code for south indian chart as you are interested, i may change height width later with little updates... I meant I wanted to actually see the content. But I googled and know now it's just text, and horizontal at that. At least the charts I found looked like that. |
Christian J |
Nov 24 2023, 07:48 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I'm still not sure of the structural/semantic meaning of the rhombuses/triangles in the Astrological Chart. But if the diagonal lines are mostly decorational, maybe you could just create them with a single background image (using CSS background-size to fit the container)? But you'd still need to place the text's HTML elements between the lines with CSS, which might be fragile of course.
|
coothead |
Nov 24 2023, 08:58 AM
Post
#5
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Christian J |
Nov 24 2023, 12:18 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
Lo-Fi Version | Time is now: 21st September 2024 - 04:00 AM |