Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 topic row html template
#
Site: https://snowred.jcink.net/index.php?showforum=1

I made some edits to the html template for my topic row. It worked just fine when one topic existed but I tested it out by making a new thread and I realized the positioning for some elements is screwy, because everything has disappeared for my second thread.

I have experience with the other html templates (board statistics, mini profile, main profile, etc.) but this is my first time working on the topic row so I'm not sure the best way to go about this.

Thanks in advance.

My code:

CODE
<div style="width:980px;padding-top:15px;padding-bottom:15px;border-top:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;">
<div style="width:980px;padding:20px;background-color:#fff;height:140px;overflow:hidden;">

<table><tbody><tr>
<td valign="middle"><div style="position:relative;top:-130px;left:50px;"><div style="font:16px 'Playfair Display',serif;font-weight:600;color:#4d0404;width:260px;text-transform:uppercase;margin-right:20px;"><!-- |go_new_post| --><!-- |prefix| --><!-- |topic| --> <!-- |pages| --> </div><br><div style="font:8px 'Montserrat',sans-serif;color:#1c1c1c;text-transform:uppercase;letter-spacing:2px;text-align:justify;"><!-- |topic_desc| --> </div></div></td>

<td valign="middle">
<div style="position:relative;top:-130px;left:100px;">
<div style="position:relative;width:200px;font:8px 'Montserrat',sans-serif;color:#1c1c1c;text-transform:uppercase;letter-spacing:2px;text-align:right;">created by</div>
<br>
<div style="font:13px 'Playfair Display',serif;font-weight:600;color:#4d0404;width:260px;text-transform:uppercase;text-align:right;margin-top:-5px;position:relative;left:-60px;"> <!-- |starter| --> </div></div></td>

<td valign="middle">
<div style="position:relative;top:-130px;left:180px;">
<div style="position:relative;width:200px;font:8px 'Montserrat',sans-serif;color:#1c1c1c;text-transform:uppercase;letter-spacing:2px;text-align:right;"><a href='<!-- |last_post_url| -->'>last post by</a></div>
<br>
<div style="font:13px 'Playfair Display',serif;font-weight:600;color:#4d0404;width:260px;text-transform:uppercase;text-align:right;margin-top:-5px;position:relative;left:-60px;"> <!-- |last_poster| --> </div>
<br>
<div style="position:relative;width:200px;font:7px 'Montserrat',sans-serif;color:#1c1c1c;text-transform:uppercase;letter-spacing:2px;text-align:right;"> <!-- |last_post| --> </div></div></td>
</tr></tbody></table></div></div>


This post has been edited by LEVI: May 21 2018, 07:21 PM

signature
And I stood upon the sand of the sea, and saw a beast rise up out of the sea, having seven heads and ten horns, and upon his horns ten crowns, and upon his heads the name of blasphemy. - Revelation 13:1-18

blood red. snow white.
PM
#
Hey there! I just wanted to say that I've had a look at this, but I'm having a hard time figuring it out. All of that inline styling is making it difficult. Would you be willing to convert this into something using CSS to make it a little easier to tweak on my end? I have a feeling it has something to do with positioning, but I'm having a hard time working it out as is.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Sorry about that Owl - I usually test things with all inline coding and switch it over to my stylesheet when it's all fully functioning. I've updated the code, please see it below.

CODE
<div class="topicx">
<div class="topicinner">

<table><tbody><tr>
<td valign="middle"><div class="leftposition"><div class="newposttext"><!-- |go_new_post| --><!-- |prefix| --><!-- |topic| --> <!-- |pages| --> </div><br><div class="postsmalltext"><!-- |topic_desc| --> </div></div></td>

<td valign="middle">
<div class="middleposition">
<div class="postsmalltext_2">created by</div>
<br>
<div class="poststartertext"> <!-- |starter| --> </div></div></td>

<td valign="middle">
<div class="rightposition">
<div class="postsmalltext_2"><a href='<!-- |last_post_url| -->'>last post by</a></div>
<br>
<div class="poststartertext"> <!-- |last_poster| --> </div>
<br>
<div class="lastpostertext"> <!-- |last_post| --> </div></div></td>
</tr></tbody></table></div></div>

signature
And I stood upon the sand of the sea, and saw a beast rise up out of the sea, having seven heads and ten horns, and upon his horns ten crowns, and upon his heads the name of blasphemy. - Revelation 13:1-18

blood red. snow white.
PM
#
For some reason, when I view the source, it shows that the "topicinner" ends before there's anything ever in it, including the table that holds the thread content.

If you take:

.topicinner {
width:980px;
padding:20px;
background-color:#fff;
height:140px;
overflow:hidden;
}

And replace it with:

.topicinner {
width:980px;
padding:20px;
}

Your threads are no longer hidden, but they styling suffers. If I were you I'd try and pick one method to lay everything out - either use tables and don't modify it with positioning, or use divs and use positioning only, because I think that's some of where things are getting lost in translation.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Great idea Owl. I've never been a fan of tables but I tried to figure it out and it didn't work the way I wanted. Removing the tables fixed the issue with my div and everything else was done with positioning. Thank you for the help.

signature
And I stood upon the sand of the sea, and saw a beast rise up out of the sea, having seven heads and ten horns, and upon his horns ten crowns, and upon his heads the name of blasphemy. - Revelation 13:1-18

blood red. snow white.
PM
#
I'm so glad that helped! To be honest with you, I still don't quite understand tables myself, and I've had these sorts of struggles before too. Your site looks great - good luck with it! ^^

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll