Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Text Effects, maybe, i think

  1. #1
    Join Date
    Jul 2005
    Location
    Illinois
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Text Effects, maybe, i think

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Do you really need 7 nested tables for that?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2005
    Location
    Kuwait-I'm American
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hey, if it's what she wants...
    //\\ //\\// || //\\//\\ //\\ ||_
    SOFTWARE

  4. #4
    Join Date
    Jul 2005
    Location
    Illinois
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2005
    Location
    Illinois
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2005
    Location
    Illinois
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you very much

    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.

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Last edited by Twey; 07-18-2005 at 06:41 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •