43 users online (2 members and 41 guests)  


  Results 1 to 11 of 11

Related

  1. Picture & picture underneath    Forum: Myspace Forum
    Replies: 1
  2. Replies: 1
  3. Replies: 0
  4. Replies: 4
  5. Replies: 2
  1. #1
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Attaching a subtext to a text - but underneath it.

    Hello,

    New to the board and new to heavily formatted HTML. Thanks in advance for any help. I am attempting to associate some special characters with specific words in text (i.e. if the text moves around, the symbols stay underneath them). After experimenting, the best I could come up with was inserting a two row table, the first row containing the word and the second row containing the symbol(s). The problem with this is getting the table to align with the text line so that it appears to be a single fluid line. "vertical-align" doesn't seem to help.

    Here's my code so far:
    Code:
    <style type="text/css">
    p.big   {line-height: 200%}
    table {display: inline;
            height: 5px;
            width:auto;
            vertical-align: top
           }
    </style>
    </head>
    <body bgcolor="#FFFFFF">
    <p class="big">
    
    The British &nbsp
    <table>maintained<tr style="height:7">
        <td>
            <span style="font-size:10.0pt;font-family:KenRisdonFontOne">&nbsp;a&nbsp;a</span></td>
        </tr>
    </table>&nbsp and expanded their empire through trade and other
    wealth-building.
    The two "a"s show up as the special symbol. Any ideas on how to align things, or a better way to put the special text underneath?

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Attaching a subtext to a text - but underneath it.

    Do the following instead. Tables are WAY too bulky.

    Code:
    <style type="text/css">
    p.big   {line-height: 200%}
    span.foot {position: relative; top:-3px; font-size:12px;}
    </style>
    </head>
    <body bgcolor="#FFFFFF">
    <p class="big">
    
    The British maintained <span class="foot">aa</span> and expanded their empire through trade and other
    wealth-building.
    </p>
    Then every time you need to add a footnote reference, put in the same code around the reference, and the formatting will be automatic.

  3. #3
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Re: Attaching a subtext to a text - but underneath it.

    Thank you for your suggestion. The code you included makes the letters appear behind the word and slightly elevated (like a footnote). What I was trying to do was have the letters appear underneath the word without causing a break between words. Am I explaining that clear enough?

    So it would look like this (ignore the ... - I could not get the aa underneath maintained without them):

    The British maintained
    ...................aa


    But stay connected with "maintained" if the page was resized or something.
    Last edited by jtensmeyer; 12-16-2008 at 07:51 PM. Reason: the "aa" symbol was not placed correctly

  4. #4
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Re: Attaching a subtext to a text - but underneath it.

    OK. By playing a bit with your suggestion I was able to get it to place the "aa" underneath the "maintain". That does seem much better then using the table. Thank you.

    I changed the style for the foot like this:

    Code:
    span.foot {position: relative; top:12px; left:-35px}
    However, this still leaves a gap the size of the letters between "maintained" and the next word. I'd like to avoid that gap somehow.

  5. #5
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Attaching a subtext to a text - but underneath it.

    I am glad you were able to figure it out.

    If you are always going to have two digit subscripts, use the following. However, if the number of digits change, you will need to create another CSS class and change the margin-right to reflect it.

    Code:
    <style type="text/css">
    p.big   {line-height: 200%}
    div#wrapper {position: absolute; top: 300px; left: 300px; border: 1px solid #000;}
    span.foot {position: relative; top:15px; left:-25px; margin-right: -17px;;}
    </style>
    </head>
    <body bgcolor="#FFFFFF">
    <div id="wrapper">
    <p class="big">
    The British maintained <span class="foot">aa</span> and expanded their empire through trade and other
    wealth-building.
    </p>
    </div>
    I added the extra wrapper class to so that the absolute positioning of the span element is not affected by the window, but rather by the div.
    Last edited by jthayne; 12-17-2008 at 10:03 AM. Reason: Removed an extra CSS tag that was not needed

  6. #6
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Re: Attaching a subtext to a text - but underneath it.

    Thanks again for the input. The margin-right does help me move the next word back into the right position. However, in my browser (IE v7) the margining appears to cover-over the sub-text. The lines of text appear just as they should but the sub-text is not visible. When I make the margin smaller, parts of the sub-text appear, but then of course the gap between the two words gets bigger. I tried playing with the margin-left as well, but the subtext gets covered as well. This is confusing for a variety of reasons. Mainly because I found a definition of the CSS margins which stated that they should be transparent.

    Do you see the same effect in your browser?

    John

  7. #7
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Attaching a subtext to a text - but underneath it.

    I am not seeing the effect you describe in either Firefox or IE7. Could you post the code you are using that produces the effect? It is possible that I am not using the correct code.

  8. #8
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Re: Attaching a subtext to a text - but underneath it.

    Here is my code:

    Code:
    <html>
    <head>
    <title>My Test</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    span.foot {position: relative; top:12px; left:-35px; margin-right: -20px; }
    </style>
    </head>
    <body>
    The British maintained <span class="foot">aa</span> and expanded their empire through trade and other
    wealth-building. 
    </body>
    </html>
    I have pictures of how the output looks but could not figure out how to post them.

    If you change the margin-right to -10 the subscript is partially uncovered. If you change it to 0 the subscript is entirely visible but there is a space between maintained and and.

  9. #9
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Attaching a subtext to a text - but underneath it.

    Ok. I edited out something I thought was pointless out of the previous code, but apparently it is not. Add "width: 0;" to the CSS and see if that helps.

  10. #10
    jtensmeyer's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2008
    Posts
    6

    Thumbs up Re: Attaching a subtext to a text - but underneath it.

    Thank you so much. That did that trick. I was beginning to doubt it was even possible...

  11. #11
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Attaching a subtext to a text - but underneath it.

    Never doubt. Anything is possible.



Tags for this Thread