Solved

Titled Borders in HTML?

Posted on 2001-07-18
15
242 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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" …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

747 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

12 Experts available now in Live!

Get 1:1 Help Now