Solved

Titled Borders in HTML?

Posted on 2001-07-18
15
248 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
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.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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)

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now