Text Effects, maybe, i think

**mayla** · 07-18-2005, 11:10 AM

I don't even know where to begin. Can anyone help with what I want to do on this page?

Here's what I want to do...

**jscheuer1** · 07-18-2005, 12:39 PM

Do you really need 7 nested tables for that?

**IanMarlowe** · 07-18-2005, 12:43 PM

hey, if it's what she wants...

**mayla** · 07-18-2005, 01:53 PM

Is there an easier way?.... keeping in mind that this page may end up with a ton of text information on it.... But, to the original question: Is there a way to wrap the title around the border of the page?

**jscheuer1** · 07-18-2005, 02:13 PM

There must be a better way, nesting tables like that, especially if graphics are involved, is one of the easiest ways to really slow down a page's load time. Also, your request for circling text - do you mean in motion or just wrapped around it in a fixed manner. Either way graphics for the vertical portions would be the way to go IMOP. If you want it in motion, a combination of vertical and horizontal marquees or marquee scripts would probably have to be involved. Timing would be everything.

**mayla** · 07-18-2005, 02:47 PM

Thank you, John.

And if there is a better way than nesting tables for this effect, I would love to know what it is.

BTW... I am a self taught designer, so if I don't know the proper name to call someting, or where exactly to post a question, Everyone has my sincere apologies up front.
Thanks again!

**jscheuer1** · 07-18-2005, 03:10 PM

Well, looking at the visual effect, it seems like it could be accomplished with, at the very most, three tables. One each for the two borders and one in the center. However, if you think of the structure of a table and recall that individual table cells may have background and/or foreground images as well as being able to span one or more columns and/or rows, it should be able to be done with one. I'd bet there are several 'don't use tables for anything except data' types out there that might be able to come up with a way to do it with no tables. My idea on using one table would go something like this:

HTML Code:

<table><tr><td colspan="5" bgimage="outerbg.jpg"></td></tr>
<tr><td width="20" bgimage="outerbg.jpg"></td><td colspan="3" bgimage="nextinbg.jpg"></td><td width="20" bgimage="outerbg.jpg"></tr>
<tr><td width="20" bgimage="outerbg.jpg"><td width="20" bgimage="nextinbg.jpg"><td>Inner content goes here</td><td width="20" bgimage="nextinbg.jpg"><td width="20" bgimage="outerbg.jpg"></tr>
<tr><td width="20" bgimage="outerbg.jpg"></td><td colspan="3" bgimage="nextinbg.jpg"></td><td width="20" bgimage="outerbg.jpg"></tr>
<tr><td colspan="5" bgimage="outerbg.jpg"></td></tr></table>

This is just a rough idea and would need some adjusting and style added to it to achieve the same look as what you have but, it would load must faster.

You still haven't said if you want this wrap around outer title text to be in motion or not. Another thing, I hope you are just using Geocities for demo purposes. It is a really poor choice of host for using scripts on.

**jscheuer1** · 07-18-2005, 04:25 PM

Here is a more realistic demo:

Code:

<html>
<head>
<title>One Table Concentric - Demo</title>
<style type="text/css">
table {
border-collapse:collapse;
margin:auto auto;
}

#content {
padding:50px;
border:3px ridge white;
}

.outerMid {
border-left:3px ridge white;
border-right:3px ridge white;
background:url('photo1.jpg');
}

#outerTop {
border:3px ridge white;
border-bottom:none;
background:url('photo1.jpg');
}

#outerBot {
border:3px ridge white;
border-top:none;
background:url('photo1.jpg');
}

#innerTop {
border-top:3px ridge white;
background:url('photo2.jpg');
}

.inner {
background:url('photo2.jpg');
}

#innerBot {
border-bottom:3px ridge white;
background:url('photo2.jpg');
}

* html table {
margin:20% auto;
}

td {
padding:5px;
margin:5px;
}

body {
color:white;
background-color:navy;
}
</style>
</head>
<body>
<table align="center"><tr><td id="outerTop" colspan="5" >&nbsp;</td></tr>
<tr><td class="outerMid" width="20" >&nbsp;</td><td id="innerTop" colspan="3" ></td><td class="outerMid" width="20" ></tr>
<tr><td class="outerMid" width="20" ><td width="20" class="inner"><td id="content">Inner content goes here</td><td width="20" class="inner"><td class="outerMid" width="20" ></tr>
<tr><td class="outerMid" width="20" >&nbsp;</td><td id="innerBot" colspan="3" ></td><td class="outerMid" width="20" ></tr>
<tr><td id="outerBot" colspan="5" >&nbsp;</td></tr></table>
</body>
</html>

**mayla** · 07-18-2005, 05:21 PM

Thank you for all the help thus far. You're a lifesaver in reducing code

I had wanted the bordered text to be stationary, not in motion. I found coding for marquis, but all were motion based.

**Twey** · 07-18-2005, 06:39 PM

Code:

<script language="JavaScript">var PUpage="76001080"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript"> var thGetOv="http://themis.geocities.yahoo.com/themis/h.php"; var thCanURL="http://us.geocities.com/lil_mayla/titledborder.html"; var thSpaceId="76001080"; var thIP="80.3.64.11"; var thTs="1121711648"; var thCs="9b456a12cb493163d506923b46c60739";</script><noscript><link rel="stylesheet" href="http://themis.geocities.yahoo.com/jsoff.css?thIP=80.3.64.11&thTs=1121711648"></noscript><script language="JavaScript" src="http://us.geocities.com/js_source/geovck05.js"></script>
<!-- text above generated by server. PLEASE REMOVE -->

That script outside the HTML tags will invalidate your page and cause browsers to ignore your doctype.

Sorry to be the bearer of bad news, but as far as I know, there is no way in HTML or CSS to make text run in a different direction other than left-to-right, which is what you'll need to put text in a circle.
The only solution I can think of is to use images.

If, however, you didn't literally mean "circle," but merely wanted the text to go around the outside of the border, you could use linebreaks to cause it to at least appear to go downwards, although the letters themselves would still be the right way up.

Thread: Text Effects, maybe, i think

Thread Tools

Search Thread

Text Effects, maybe, i think

Thank you very much

Bookmarks

Bookmarks

Posting Permissions