Solved

Titled Borders in HTML?

Posted on 2001-07-18
15
249 Views
Last Modified: 2007-11-27
Hello everyone,

I was wondering if there is any way to have a titled border in HTML without using Java.

I like the titled border in java, however, I just want it for HTML without using any applets at all.

Thanks in advance,
--=mabait=--
0
Comment
Question by:Mabait
  • 9
  • 4
  • 2
15 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294421
I don't really understand what you mean by "title border"?

Is there an example you can point me to?

:o)

Ant
0
 

Author Comment

by:Mabait
ID: 6294485
This a site for Java that has it.

http://www.cz3.nus.edu.sg/docs/java/uiswing/misc/border.html

Go down until the screenshot with the Titled tab is highlighted.

Thanks.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294540
Ahh!!

I've done a similar kind of thing before.

There are a number of ways of implementing it - the way I have done it before is using tables and images.

The border is essentially made up of different images.

In fact take a look at:

http://www.cretins.co.uk/

Forget the java applet, but look at the border - basically it is exactly what you are after except the title is at the bottom and not the top - but that is easy to change!

And the beauty of it is that the "border" will resize itself correctly no matter what you put in the middle of it.

:o)

Ant
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 15

Expert Comment

by:a.marsh
ID: 6294560
Take a look at that - when I get home later I can put another example together for you if you wish, which gives you exactly what you are after.

:o)

Ant
0
 

Author Comment

by:Mabait
ID: 6294591
Yes, please do put another example.  I was thinking that there was another way of doing it.  So I take it the text shown as the title is an image too?

It there a way to compose it so that the title is not an image, but rather text?

Thanks again.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294620
Yes you can do it as text - that's something I'll put together in the example for you.

Unfortunately I don't have any code to hand right now - I need to wait until I get home in a couple of hours.....is that ok?

:o)

Ant
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294626
Just so you know, you can easily give a title a caption (but without it actually being within the border e.g.

<table>
<caption>title here</caption>
<tr><td>test</td><td>test</td></tr>
</table>

:o)

Ant
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294634
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6294639
<!-- Are you looking for something like this:
-->

<HTML>
<HEAD>
   <TITLE>   titled table  </TITLE>

</head>
<body>
   <TABLE WIDTH=300 BORDER=0 cellpadding=0 cellspacing=0
       style="position:absolute;left:150;top:5;z-index:25">
      <TR>
         <TD bgcolor="aqua" WIDTH=300 align="center" valign="top">
              THIS IS A TITLE </TD>    
      </TR>
   </TABLE>
   <TABLE WIDTH=600 BORDER=5 style="position:absolute;left:5 top:10;z-index:5">
      <TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR>
      <TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR>
</BODY>
</HTML>
<!--
I tested it with IE 5.  I think it should be okay for Netscape4 and 6.

It needs absolute absolute positioning which limits it, but other than
that you can format it just abount any way you want.

The big advantage is that it is all straight HTML.

HTH

Cd&
-->
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294661
That's one solution - but I still much refer doing things the way I've shown already.

:o)

Ant
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6294682
It's on my HD from the last time I answer this.  Might as well post it.

Cd&
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6294699
;o)

Ant
0
 

Author Comment

by:Mabait
ID: 6294757
Yea sure, I can wait for your example a.marsh.
0
 
LVL 15

Accepted Solution

by:
a.marsh earned 200 total points
ID: 6295487
Okay, here you go:

http://www.btinternet.com/~ant.marsh/ee/table_border_title/border.html

Here is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>table border title</title>
</head>
<body>
<table align="center" border="0" width="400" cellpadding="0" cellspacing="0">
<tr>
  <td width="28"><img src="border/topleft.gif" width="28" height="27" alt="" /></td>
  <td width="112" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td width="120" align="center">title here</td>
  <td width="112" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td width="28"><img src="border/topright.gif" width="28" height="27" alt="" /></td>
</tr>
<tr>
  <td style="background-image: url(border/left.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
  <td colspan="3">text text text text text text text text text text text text text text text
 text text text text text text text text text text text text text text</td>
  <td style="background-image: url(border/right.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
</tr>
<tr>
  <td><img src="border/bottomleft.gif" width="28" height="27" alt="" /></td>
  <td colspan="3" style="background-image: url(border/bottom.gif);">&nbsp;</td>
  <td><img src="border/bottomright.gif" width="28" height="27" alt="" /></td>
</tr>
</table>
<table align="center" border="0" width="70%" cellpadding="0" cellspacing="0">
<tr>
  <td><img src="border/topleft.gif" width="28" height="27" alt="" /></td>
  <td width="50%" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td align="center">&nbsp;title&nbsp;here&nbsp;</td>
  <td width="50%" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td><img src="border/topright.gif" width="28" height="27" alt="" /></td>
</tr>
<tr>
  <td style="background-image: url(border/left.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
  <td colspan="3">text text text text text text text text text text text text text text text
 text text text text text text text text text text text text text text</td>
  <td style="background-image: url(border/right.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
</tr>
<tr>
  <td><img src="border/bottomleft.gif" width="28" height="27" alt="" /></td>
  <td colspan="3" style="background-image: url(border/bottom.gif);">&nbsp;</td>
  <td><img src="border/bottomright.gif" width="28" height="27" alt="" /></td>
</tr>
</table>
</body>
</html>


The code above:

1 - Shows you how to use the table with fixed widths

2 - Show you how to use the table with percentage widths

3 - is 100% XHTML 1.0 compliant, which you can check here:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.btinternet.com%2F%7Eant.marsh%2Fee%2Ftable_border_title%2Fborder.html;doctype=Inline


Any questions, please ask.

:o)

Ant
0
 

Author Comment

by:Mabait
ID: 6295552
Very nice, thanks.

I tried and it works great.
0

Featured Post

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question