How to apply columns to some passages, to simulate a forum's layout?

Dada · April 2017

I am using Sugarcane, and my story takes place in a forum. You read the forum instead of prose. So I've been working pretty hard on making it look like one.
So far I've managed to do a decent enough work with the most absolute basic use of coding and syntax. I had no HTML nor CSS knowledge previous to this but I can be pretty resourceful. Now I've encountered a problem and I can't find a workaround.

For the passages that simulate the threads of the forum, I'd like to use a special kind of layout, different from the others, in which I have a title, and two columns.
On the column on the left, as with any regular forum, goes the username, join date, etc.
On the column of the right, the user's post.

The only way I've found so far is combining break lines, and a table HTML consisting of two colums. Problem is, I can't control the layout of the text inside the table. So it ends up looking like this:

http://puu.sh/v5O3O/a0ceeb237c.png

You can see it doesn't work. What I'd like is:
1) For all right columns to start at the same line in the passage, not depending of the previous row's ending.
2) To be able to control the text inside the table. For example, with this solution I can't add any line break niether to the "post" (right column) or to separate in different lines the "username", "join date" and "posts" in the left colum.

I'm down to any solution which gets the job done, this is only the one I've found which get's me the closest to what I want. I just want it to look like a forum thread.

Thanks in advance!

This is the coding I used to get that result:
https://puu.sh/v5OwS/f3b61871c7.png

TheMadExile · April 2017

First. If you're asking for help with code, post the code itself, not screenshots of it. When you do, please use the code tag when posting code or markup—it's C on the editor bar. Posting screenshots, in addition to code, can be helpful to document things you're seeing, which may not be readily obvious from the code alone, but they're not a substitute for the code itself.

You're breaking the wiki table markup by inserting horizontal rules between the rows. Stop doing that and the table will work as you want. If you want visible lines between rows, use a class.

Each table row must be a single line, which is why adding newlines breaks the table. To add line breaks you'll need to use the <br> markup.

For example:

<div class="usertable">\
|A user.<br>Date: ….<br>Posts: ….|blah blah blah|
|Another user.<br>Date: ….<br>Posts: ….|blah blah blah|
</div>

And the requisite style:

.usertable tr:not(:first-child) {
	border-top: 1px solid #fff;
}

If you were using SugarCube instead, which supports the special class specifier row, the wiki table could be written as follows:

|usertable|k
|A user.<br>Date: ….<br>Posts: ….|blah blah blah|
|Another user.<br>Date: ….<br>Posts: ….|blah blah blah|

Alternatively, you could use the HTML <table> markup.

Dada · April 2017

Sorry about the code, thought it wasn't neccesary in this case since it was so basic.

This has gotten me even closer to a result that leaves me satisfied, just one thing is missing: Is there a way I can add a vertical lines that separates the rows, just like the one on top that came with the code you posted?

TheMadExile · April 2017

Try something like the following:

.usertable td:first-child {
	border-right: 1px solid #444;
}

Dada · April 2017

Didn't work!

http://puu.sh/v8hdU/745e55dfc1.png

Even tried it like this, already sure it wasn't going to work, (and it didn't, it added the line to the right of the second column)

.usertable tr:not(:first-child) {
	border-top: 2px solid #fff;
        border-right: 2px solid #fff;
}

Here's all my code, if it's worth anything (disabled sidebar, corrected margin and added instant transition, which are at the top. The rest is just Sugarcane's default CSS, coppied in case I needed to manipulate it). You'll notice both .usertable are just how you showed them to me, just px and color changed.

#sidebar { display: none; }
  
  #passages { margin-left: 0; }

.transition-in {
	opacity:0;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 0s;
	-webkit-transition: 0s;
}
.transition-out {
	opacity:0;
	position:absolute;
}
.usertable tr:not(:first-child) {
	border-top: 2px solid #fff;
}

.usertable td:first-child {
	border-right: 2px solid #fff;
}

body {
	background-color: #000;
	color: #fff;
	font-family: Verdana,sans-serif;
	font-size: 64.5%;
	margin: 4em 15% 5% 5em;
}
#sidebar {
	left: 7.5em;
	margin: 0;
	padding: 0 1em 0 0;
	font: bold 1.1em Verdana,sans-serif;
}
#sidebar ul {
	padding: 0;
}
#sidebar li {
	color: #333;
	text-align: right;
	background-repeat: no-repeat;
	margin-bottom: 1em;
	line-height: 1.4em;
	list-style: none;
}
#sidebar li a {
	color: #333;
	text-decoration: none;
}
#sidebar li a:hover, #sidebar #title a:hover, #snapback:hover, #restart:hover {
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
#sidebar #title {
	font-size: 150%;
}
#sidebar #title, #sidebar #title:hover, #sidebar #title a {
	color: #999;
}
#sidebar #storySubtitle {
	font-size: 75%;
}
#storyAuthor {
	font-size: 50%;
}
#sidebar #storyMenu {
	line-height: 2.5em;
	margin-bottom: .5em;
	color: #999;
	cursor: auto;
}
#sidebar #credits {
	padding-top: 2em;
	font-weight: normal;
	font-size: 80%;
}
#sidebar #credits:hover {
	color: #333;
}
#sidebar #credits a {
	text-decoration: none;
}
#passages {
	border-left: 2px solid #333;
	padding-left: 1.5em;
	border-right: 2px solid #333;
	padding-right: 1.5em;
}
.menu {
	background-color: #343434;
	color: #fff;
	opacity: .9;
	border: 1px solid #fff;
	text-align: left;
	font: 1.1em Verdana;
	line-height: 2em;
}
.menu div {
	padding: 0 .4em;
}
.menu div:hover {
	cursor: pointer;
	background-color: #fff;
	color: #343434;
}
.passage {
	font-size: 1.2em;
	line-height: 175%;
	margin-bottom: 2em;
	text-align: left;
}
.passage a {
	font-weight: bold;
	text-decoration: none;
}
.passage a:hover {
	color: #8ea6ff;
	text-decoration: underline;
}
.content > ul {
	padding-top: 1.3em;
}
.passage ul, .passage ol {
	margin-left: .5em;
	padding-left: 1.5em;
}
.passage li {
	margin-right: 6em;
}
.passage table {
	border-collapse: collapse;
	font-size: 100%;
	margin: .8em 1.0em;
}
.passage th,.passage td,.passage tr,.passage caption {
	padding: 3px;
}
.passage hr {
	height: 1px;
}
.passage center {
	max-width:50%;
	margin:auto;
}
.marked {
	margin-right: 12px;
	padding: 3px;
}
.disabled {
	font-weight: bold;
	color: #333;
}
@media screen and (max-width: 640px) {
	body {
		margin: 5%;
	}
	#sidebar {
		width:100%;
		margin: 0;
		border-bottom: 1px solid #333;
	}
	#passages {
		padding-top: 2em;
		border-left: 0;
	}
}

TheMadExile · April 2017

Are you making the first cell on the row a header? If so, use the following:

.usertable th:first-child {
	border-right: 2px solid #fff;
}

Elsewise, please show your current markup.

Dada · April 2017

Thank you so much! Now it's working and looks great!

Howdy, Stranger!

Categories

How to apply columns to some passages, to simulate a forum's layout?

Comments