Back to discussion

Diagonial Lines in HTML

Last post was 04 Jun 2003 at 08:31
.net , css Brisbane, Australia
  • 17 years ago

    Hello


    I am trying many ways to make diaginial lines in tables in html.


    I am writing a program that makes N-S Diagrams and i haven't decided on the output format yet but html would be the easiest.
    - HTML
    - Word
    - Excel
    - Pictures


    Word allow you to easily have diagonial lines in tables, but html doesn't have this feature, so here is one way i tried; it is make with FrontPage and the lines control in FP. Using pictures through a webpage is a bit messy and the xml thing is a pain in the arse; it would be so sweet if there would be an easy way to achieve what i am looking for.
    http://jonorossi.f2o.org/products/jrstudio/dev/nsdiagram/branching.htm


    Thanks for any help you can give me

    Report abuse
  • 17 years ago

    can't you just have a JPEG of the diagonal line?

    Report abuse
  • 17 years ago

    yes, i know this isn't my forum post, but i'll answer the question anyway...


    yes and know. all pictures are rectangular. this means that there would be no way to use the normal "clear" atribute to put the text on top of the blank space in the rectange. however, with some fancy text formatting (well placed <br />s) and use of css, the text could (i think) be floated over the picture. however, this would be very hard to do with a program [you would have to create a picture and do the text formatting automatically (scripts would probably be the best thing for this)]. however, i think it could be done...


    for the web programming challenged (jk), css (cascading style sheets) is an advaced protocol for formatting. i use it instead of the normal formatting elements (<b>, <font>, and many attributes for tags), since it is MUCH more powerful. also, if you are going to use css for everything, i recommend using XHTML 1.1 instead of HTML 4. it is much better for css, and there isn't TOO much of a change. read the W3C specs of XHTML 1.0 (epecially Strict), before you try XHTML 1.1, just so you know the changes.



    PS
    I don't know if it is possible in exel, and using pictures would probably be just as hard as html (if not harder). you would almost definitely have to use a script for pictures.

    Report abuse
  • 17 years ago

    Hello


    Thanks for that valuable info.


    I has an idea that i could set the bg picture to the diagonial line, but the only problem is that there is no scretch property for the bg img. Or is there?


    That would make it easy because different people have different resolutuons and the window size of the browser would make the bg img look stupid.


    Thanks

    Report abuse
  • 17 years ago

    in order to avoid tricky css positioning, and any excessive scripting, i suggest for each table heading where you need a diagonal line, you use a single jpeg or png, with the text, plus the diagonal line all wrapped into it, then you use it as the cell background, and don't overlay any text on it.


    Report abuse
  • 17 years ago

    Hello


    I didn't particularly want to use a CSS or JavaScript for the page.


    Fanen, could you provide some html code please.


    Thanks

    Report abuse
  • 17 years ago

    hey fanen, can u talk in english please? i'm good, but i'm not that good...

    Report abuse
  • 17 years ago

    ...all the html intro blah blah
    blah... i don't have the sample image on any server  so assume this to be the image: period-group.jpg 



    
------------

    
|period/   |

    
|       /     |

    
|     /       |

    
|   / group|

    
------------

    
 


     

    
<table>

    
<th><tr><td class=heading style="background-image: url('period-group.jpg')></td>

    
        <td>heading 2</td></tr></th>


    just remember to set the table width to some fixed, non relative value like 600px in css, or can you set the column width? i can't remembr all my html and css!!!


    and rsrsharma...i don't think i speak Indian (or what they call it?) too!!!! how do you pronounce your name?


    i was telling him to design an image like the one i showed above, then use the image as tbe background of the cell where he wanted that heading!


    overlay means to put over? or lay over, in this case i meant don't write any text over the image.

    Report abuse
  • 17 years ago

    you means omething like this baby:



    Report abuse
  • 17 years ago

    fanen, this isn't even my name, but half of it is. the first three letters you just say like the alphabet. the "sharma" part you say regularly (i think u can pronouce that).


    websoftware- stop advertising!

    Report abuse
  • 17 years ago

    rsrsharma > its not advertising. Its asking a question.


    you cant buy it nor use it, its a tool used in our software... nothing to advertise about!

    Report abuse
  • 17 years ago

    we'll incase that was what you were after heres the first part of the code... this is the CSS to it...

    Code:

    .tblListheader{
    // Use this for the heading
       background-color: #CCCCCC;
       font-weight: bold;
       font-size: 11px;
       text-align: left;
       padding-top: 5px;
       padding-left: 10px;
       height: 25px;
       /*
       // Ummm yeah...
       BORDER-RIGHT: 1px solid #999999;
       BORDER-TOP: 1px solid #999999;
       BORDER-LEFT: 1px solid #999999;
       BORDER-BOTTOM: 1px solid #999999;
       */
    }
    .tblListBorderLeft{
    // Left Border
       BORDER-RIGHT: 1px solid #6699cc;
       BORDER-BOTTOM: 1px solid #6699cc;
    }
    .tblList    Border{
    // General Border
       BORDER-RIGHT: 1px solid #6699cc;
       BORDER-TOP: 1px solid #6699cc;
       BORDER-LEFT: 1px solid #6699cc;
    }
    .tblListBorderRight{
    // Right Boarder
       BORDER-BOTTOM: 1px solid #6699cc;
    }
    .tblList_body{
    // Body, no font because the body would be configured in the main CSS file...
       background-color: White;
       font-size: 11px;
       text-align: left;
       padding-left: 10px;
       padding-top: 3px;
       padding-bottom: 5px;
    }


    not too complex... now for the tables:

    Code:

       <table width="100%" cellspacing=0 cellpadding=0 class="tblListbody tblListBorder">
         
         <TR VALIGN="top">
           <TH width=15% class="tblListheader tblListBorderLeft">
             Requirement
           </TH>
           <TH width=43% class="tblList    header tblListBorderLeft">
             Minimum
           </TH>
           <TH width=42% class="tblListheader tblListBorderRight">
             Recommended
           </TH>
         </TR>
         <TR VALIGN="top">
           <TD width=15% class="tblList    body tblListBorderLeft">
             CPU
           </TD>
           <TD width=43% class="tblListbody tblListBorderLeft">
             Intel Pentium 166 or Above (AMD Equivalent)
           </TD>
           <TD width=42% class="tblList    body tblListBorderRight">
             Intel Pentium II 400 or Above (AMD Equivalent)
           </TD>
         </TR>
         <TR VALIGN="top">
           <TD width=15% class="tblListbody tblListBorderLeft">
             RAM
           </TD>
           <TD width=43% class="tblList    body tblListBorderLeft">
             32MB
           </TD>
           <TD width=42% class="tblListbody tblListBorderRight">
             128MB
           </TD>
         </TR>
         <TR VALIGN="top">
           <TD width=15% class="tblList    body tblListBorderLeft">
             HD Space
           </TD>
           <TD width=43% class="tblListbody tblListBorderLeft">
             12MB
           </TD>
           <TD width=42% class="tblList    body tblListBorderRight">
             20MB
           </TD>
         </TR>
         <TR VALIGN="top">
           <TD width=15% class="tblListbody tblListBorderLeft">
             Video/Screen
           </TD>
           <TD width=43% class="tblList    body tblListBorderLeft">
             800x600x32
           </TD>
           <TD width=42% class="tblListbody tblListBorderRight">
             1024x768x32 or Higher
           </TD>
         </TR>
         <TR VALIGN="top">
           <TD width=20% class="tblList    body tblListBorderLeft">
             Operating System
           </TD>
           <TD width=40% class="tblListbody tblListBorderLeft">
             Any Win32 Operating System(Windows® 9x, ME, NT4[SP4+], 2000, XP, Server 2003)
           </TD>
           <TD width=40% class="tblList    body tblListBorderRight">
             Windows® 2000, XP, Server 2003
           </TD>
         </TR>
       </table>

    There you go, i just advertised my own work...

    Report abuse
  • 17 years ago

    websoftware:
    nice table, but it isn't diagonal...
    i was gonna download hothtml but ur site is down (just so u know)
    one feature you should add to hothtml 3 (you might already have it, i wouldn't know) is automatic end tag creation. also, maybe the same kind of "intellisense" stuff in visual studio .net (i use it to do all of my html for those two reasons). even if you don't have intellisense, the end tags would be a great addition, and not too hard to code...

    Report abuse
  • 17 years ago

    Sorry, a lot of posts i have been on in 2 days.


    websoftware
    rsrsharma is right that doesn't have any diagonial html code.


    fanen
    I tried out that code and by looking at it i didn't understand it; so i tried it and it didn't work.


    rsrsharma
    You understand what i am after; am i not explaining what i am looking for correctly or so it is understandable?


    I would just like to add that the html page will not just have the one set of diagonial, but as many as the users adds so i cannot really set a width.


    The VB code for the html page is the following:

    Code:
    If IsJonoCool = True Then
       write "Hello," & NewLine & "This is a N-S Diagram"
    End If
    End


    Thanks everyone, i hope that we can get this to work.

    Report abuse
  • 17 years ago

    Hello


    I am including a snapshot of my program in use, this may help to clear things things up and explain a few more things




    Thanks again

    Report abuse
  • 17 years ago

    ahhh okay that makes somewhat sense now! dont you just love PNG?


    hmmm okay interestinG! if your oging to use CSS for that then its somwhat tricky.... i was looking a hte diagram and thought you were after v/h lines... okay.. my mistake... now which was easier to see that i didnt understand? the code or the picture


    i'll have to think about it while i go driving...


    rsrsharma> about your suggestions! thanks! HotHTML 4 will have intellisense support for a set of languages and hte possibility of extensions by others. While not as complex and intelligent as the VS.NET IDE it should be useful never the less.. the other main area that i'm concentrating on is .NET support (hardcore) but time will tell what i'll do...

    Report abuse
  • 17 years ago

    Hello


    Cool you now understand. Yes i love PNG, sweet compression and BMP quality. That picture was only 9kb!


    I am not saying that it must be using CSS or JavaScript. Really anything that works and has a pretty strong support on browsers will be excellent. I decided to use html because i didn't want to have to have the end user have to buy MSWord or DL and install OpenOffice. And pictures would be too much work for something that could be achieved quite easily using something else. Also i wanted it so that the end user could easily set it to portrait or landscape within the program they are using; it would most the time IE.


    Thanks for the help it is greatly appriated.

    Report abuse
  • 17 years ago

    yah, png is amazing. i would use it for everything, but  for some reason IE doesn't display the transparency right...


    ok, back to buisiness. i'm gonna stick to what i said in the first place. this is gonna take a LOT of scripting- but not for the html code itself. You're gonna have to create a picture of each diagonal possible (or use a script to spontaneously generate them, but I don't know how to do it). then, use a script (possible perl, javascript, or vbscript) to format the text so that it will be against the angle of the line. it will then place the text in a <div> tag so that you can control it. Then you use the #(name_here) propery for doing some positioning (probably relative). Since you're doing this in a windows application, you might even be able to accomplish this without any scripting (just vb or c++ or whatever). I personally think this is your best bet, and the most browser/os/screen resolution compatible.

    Report abuse
  • 17 years ago

    Hello


    Yes png is the best for larger pictures mainly snapshots of programs but the png header is quite large compared to gif so for 16x16 pictures on websites i always use gif, i hate jpg because of the quality but it has the compatibility because it has been around longer than png.


    Okay i understand what are are saying but i am not really familiar with alot of scripting; my website is written in asp so vbscript might be the easiest for me but i think that JS is the way. I can create the picture from my vb app; my vb app is actually creating the html code.


    Is there anyway to use a picture in a cell background and stretch the picture because that would mean i only have to create one diagonial line for each side and i would need any scripting? Is there a way to stretch the bgpicture using scripting?


    Thanks so much

    Report abuse
  • 17 years ago

    ok, i can't figure out how to get it to work, but you might want to check out this forum post from someone else (someone else wantin to stretch the bgpicture too):


    http://www.abiglime.com/webmaster/boards/html/posts/591.htm

    Report abuse
  • 17 years ago

    oh yah- check this out 2 (might help if we can't stretch it):


    http://www.javaworld.com/javaworld/jw-08-1996/jw-08-javascript-p3.html

    Report abuse
  • 17 years ago

    sorry Jonorossi, i forgot the end quotes in my "style" attribute! just insert it, and ...


    ah, yeah, there is no stretch property, that's why i said you might need to consider setting the width of the table to some fixed unit.


    i think instead of using it as a bg pic, you should use an <img> tag, so you can modify its height and width attributs in script like in


    <table><tr><td><img height="xx" width="xx">


    you get it?

    Report abuse
  • 17 years ago

    you can use height/width=100% but that only works in IE5,5.5 and 6 and Netscape 6.2 and above(mozilla 1.0 and above) and opera 6 and above!

    Report abuse
  • 17 years ago

    oh yah, ur gonna have to use a z-index (maybe -1) if you want to use and <img> tag...

    Report abuse
  • 17 years ago

    Hello


    I am very sorry everyone, i have been sick and i haven't really been doing much on my computer.


    I have made up some more pages if anyone needs some more information on what i am trying to do.
    http://jonorossi.f2o.org/products/jrstudio/dev/nsdiagram/jeremy's%20nsdiagram.html
    http://jonorossi.f2o.org/products/jrstudio/dev/nsdiagram/NSDiagram-GolfBallEarnings.html
    http://jonorossi.f2o.org/products/jrstudio/dev/nsdiagram/branching.htm (The one from the start)


    I looked at the pages that you guys have posted and i don't really know what to do with them.
    I will be straight, i only really know the basic "Strict HTML" not to much else; so it would be really great if you could help me.


    Thanks so much for all if your help, Jono

    Report abuse

Post a reply

Enter your message below

Sign in or Join us (it's free).

.NET forum discussion

.NET tutorials

Quick links

Recent activity

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Web Development

Developer Jobs

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

Cancel
“Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.” - Brian Kernighan