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

 vertical subforums?
#
I'm currently making a theme. I'm doing a lot of hard work, well let's just say styling the skin, making html templates for it etc etc etc

I'm struggling w/ making html templates for the forum row. what I want to ask is, how do you make the forum rows to be vertical aligned?

so it goes like, how do you make it to be like pic 2 instead of pic 1, any tips? (I've attached the pictures below)

thank you so much http://files.b1.jcink.com/html/emoticons/biggrin.gif

(P.s 1: yes, I'm coding this outside Jcink for testing purpose. that's only a mock up
P.s 2: I'm sorry if this topic is considered double but I've searched everywhere for it and ended up borrowing nothing.)

This post has been edited by mrslucky: Jun 9 2018, 11:25 PM

Attached 2 File(s)
Attached Image Attached Image
PM
#
There are a lot of different options on how to get something that looks like that. You could try tables (wouldn't really recommend that) floats (works, but they're touchy) make em small enough so there's room for them to be side by side, and use CSS to make them display as an inline-block, or you could look up something like flexbox.

I think the best way to go about it is to:

1. Simply choose a premade layout like this, and customize it for your uses or
2. Try and use one of the methods I outlined above - or something else, there may be other solutions - and when you run into trouble, link us with a live example of the issue and someone will likely be along to help.

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

user posted image
#
cool. I've used floats and it works, thanks a lot http://files.b1.jcink.com/html/emoticons/biggrin.gif
one more question: my subforums looks like this (I've attached the image). on the last subforum, how do I make it to float:none;? I've heard of last-child and odd and nth thingy on css but I'm not really sure about how to use it. http://files.b1.jcink.com/html/emoticons/sad.gif
again, thanks a ton. http://files.b1.jcink.com/html/emoticons/biggrin.gif

Attached 1 File(s)
Attached Image
PM
#
Yes, consider using :nth-child().

signature
user posted image
PM
#
alright, so I ended up using :nth-child(), but I think I'm missing something somewhere that it doesn't work...

the code I'm using for it was
CODE
#forum-container:nth-child(odd) { float:none; }


is there something I've overlooked? or it doesn't supposed to work with IDs, only with classes and tags?

thank you very much http://files.b1.jcink.com/html/emoticons/biggrin.gif
PM
#
Can you link to your board?

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

user posted image
#
I'm sorry but my test board is a private board, so I'm using the skin (with exact CSS) on my in construction forum that I'll be using on future for RP purpose.
you can see here: https://srndpty.jcink.net/index.php?

for test account, uname: test, password: 1234

thanks a lot http://files.b1.jcink.com/html/emoticons/biggrin.gif
PM
#
Can you do me a favor and take the <center> codes out? They're deprecated, and once they're removed it'll be easier for me to try and figure them out.

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

user posted image
#
Save yourself the hassle and use flexbox with flex-flow row and flex-wrap wrap and you're all good. Just set the boxes to 50% width and done. Add as many as you want and they'll always look good.
PM
#
owl: all done, I've removed the <center> tags.
Junkbot: I've never used flexbox before and I've just known about flexbox when owl notifies it. I've used floats plenty times before so I'm kinda getting used to using floats but I'll consider using flexbox.

thanks a lot http://files.b1.jcink.com/html/emoticons/biggrin.gif
PM
#
You're using an ID here multiple times, which may cause issues (IDs are used once, classes can be used as many times as you want. But I recommend finding this:

.forumcont {
background:#0e0e0e;
color:#fdfdfd;
width:350px;
border:10px solid #eceaea;
padding:20px;
margin:0 35px;
margin-bottom:10px;
float:left;
height:100px;
}


And replacing it with this:

.forumcont {
background:#0e0e0e;
color:#fdfdfd;
width:350px;
border:10px solid #eceaea;
padding:20px;
margin:0 35px;
margin-bottom:10px;
height:100px;
}

#forum-container {display: inline-block}
.category {text-align: center}

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

user posted image
#
whoa, that's it! it works http://files.b1.jcink.com/html/emoticons/biggrin.gif thank you very much owl!
you can consider this topic as solved now. http://files.b1.jcink.com/html/emoticons/biggrin.gif
PM
#
I'm glad it worked out for you.^^ Good luck with your forum!

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

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

Options Add ReplyNew TopicNew Poll