?
Solved

Titled Borders in HTML?

Posted on 2001-07-18
15
Medium Priority
?
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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 800 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

777 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