Skyrim Character Building » Discussions


Character Building HTML/CSS Tricks

Back to Topics
  • Vazgen
    Member
     
    January 23, 2015

    Thanks Tec!  I added it to the thread.

  • Chris
    Member
     
    January 29, 2015

    Hey guys, do I have to do the </table> thing on each new part? 

    href="discussions/16001-17000/16606-SRskillBlock.png" target="_self">tr style="vertical-align: middle;"&gt;</a></p>
    <img />src="discussions/16001-17000/16607-SRskillBlock.png?width=144" width="144" class="align-full" /&gt;</td>

    I try this, and it just has the HTML version of the image 

  • Vazgen
    Member
     
    January 29, 2015

    Regular <table> opens the section, </table> closes it. It's true for all tags, you have to open and close them for your code to work. In the code you pasted here you are missing opening tags for image and table.

    Here is what your code should look like

    <table>
        <tr style="vertical-align: middle;">
            <td style="vertical-align: middle;">
                <img src="discussions/16001-17000/16604-SRskillBlock.png" width="144" class="align-full" />
            </td>
            <td style="vertical-align: middle; padding-left: 10px;">
                text
            </td>
        </tr>
    </table>

    text
  • Chris
    Member
     
    January 29, 2015

    So Vaz, I did all this, right, since I'm writing the build in a Draft Blog, and, when I try to tab/enter down so I can put in a new image and explanation for a next skill, it also moves the pictures down too. Help?

  • Teccam
    Member
     
    January 29, 2015

    Go into HTML editing mode, put your cursor at the VERY end of the writeup plaintext (i.e., after the final "</p>" tag), then press your enter/return key once and past "<p></p>". That will manually add a new line below your image.

    If you want a few extra lines to work with, just to be safe, just paste that a few more times as well. I think that should fix your issue, if I understand it correctly.

  • Chris
    Member
     
    January 29, 2015

    I tried that, there is one<p></p> already, but it doesnt seem to do much. And iit keeps deleteing anymore i type

  • Vazgen
    Member
     
    January 29, 2015

    Open HTML mode and add another 

    <tr>

        <td>

        </td>

        <td>

        </td>

    </tr>

    within already existing <table></table>

    Put your next image into the first <td> and text in the second <td>

    Basically what you're doing is adding new rows to the table, similarly to the first one.

    You can't do that in visual mode, it will place "Enter"s after the table (looks like <p></p> in HTML mode)

    I suggest embedding image via Visual Mode, then go to HTML mode and move the newly generated <img> tag into the table.

  • Albino
    Member
     
    February 10, 2015

    I've got another trick to add. This is something Ponty showed me a while back. Basically, it allows you to create links in your Table of Contents to specific sections. For example, with this, if you click on the "Skills" link in your table of contents, it'll send you directly to the skills section in your build.

    What you need to do is go into the HTML Editor, and for each item (I'm using "Skills" for this example) wrap it in an <a> tag like this:

    <a href="#skills">Skills</a>

    Then go to your header that says "Skills" and put:

    <a name="skills"></a>

    If you did it right an anchor should appear next to the title in the editor.

  • Vazgen
    Member
     
    February 10, 2015

    I didn't add it because it is documented in jakeG's article (linked above). The links in the Table of Contents in this article use that technique 

  • Albino
    Member
     
    February 10, 2015

    Yeah, I noticed the Table of Contents used it, but I didn't catch it in jakeG's article.


Back to Topics