Text Effects, maybe, i think [Archive]

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... (http://www.geocities.com/lil_mayla/titledborder.html)

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... :D

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:

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

<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" > </td></tr>
<tr><td class="outerMid" width="20" > </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" > </td><td id="innerBot" colspan="3" ></td><td class="outerMid" width="20" ></tr>
<tr><td id="outerBot" colspan="5" > </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

IanMarlowe

07-19-2005, 04:38 AM

But there is a javascript code for making the script go backwards, either on this site, or on www.javascriptkit.com. I used it before. It's ok.

Why not trying

<p align="center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>

IanMarlowe

07-19-2005, 04:39 AM

(But try to get more spacing imbetween the Text Text<br>)

Twey

07-19-2005, 06:51 AM

Yes, this is what I was talking about.

IanMarlowe

07-19-2005, 06:55 AM

and to take up more space:

<font size=6> (or <h1>)
<p align="center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</font> (or </h1>

mayla

07-19-2005, 08:03 AM

I wish to thank you one and all, you have been very helpful and the page this is for looks great! And it loads twice as fast also, thanks to your help :)

I truly wish I could afford to go to school, as mentioned, all I have learned, has been in hands on trial and error, and what I can find through sites like this one.

Thank You All,

IanMarlowe

07-19-2005, 08:24 AM

hey, Twey, yahoo uses VBscript. view there source, and whoa!

mayla

07-19-2005, 08:34 AM

Now that my original question has been answered, Twey brought up another question. I really feel stupid for asking, but......

What did you mean when you said: "That script outside the HTML tags will invalidate your page and cause browsers to ignore your doctype."

I have no idea what that means "invalidate the page", " ignore doctype"

Imma sooooooooo........ :confused:

jscheuer1

07-19-2005, 08:49 AM

Well, first of all, if you are using Geocities only for testing, don't worry about it. Second, a transitional doctype (what you had when I looked at your code) is very little different than no doctype. As to whether a particular browser will or will not use the doctype, if you are constrained to use Geocities, is beyond your control anyway. Some may still use it. The bottom line for most designers is:

Does the page look OK in the browsers that I am targeting?

Unless you have utopian dreams of a time when all browsers will conform to a single standard then, in my opinion, that's all you need to worry about.

mayla

07-19-2005, 06:27 PM

Thanks for the info, unfortunately, in this case, I have no option but to use geocities for the site this page will be on. It is the site of choice for the people I am building it for. But, I do appreciate the heads up on the doc type info.

Thank You very much,