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

 Some Odd Code Problems
#
Okay so I'm going to give you both board links:
http://lovemeanddespair.jcink.net (my test board; if it's not public let me know and I'll make it so, but it should be)
http://untotheday.jcink.net/ (main site)

Okay my first issue: my subforums aren't displaying correctly(on either site, I'd assume except I don't have the sub-subforums and such on my test site so using screenshots from the main site)

user posted image
This is how they look on the front page and this is correct.

user posted image
When I click to go into display subforums, the subforums list on the forums that have their own subforums isn't right. The code should work the same on all the subforums listings, right? Except even on the sub-subforums it doesn't work right either as seen below.

user posted image
(not correct again)

I'm not sure how to fix it. Or what is messing it up in the first place.


Second issue:

I have a custom bbcode I made called credit, it lets people post in credit tags to give credit/list a source for stuff they write-up or link to, etc. Today I noticed this issue in one of my posts:

user posted image

Okay so what's weird is the edited by text. It should not look that way at all. Not only is it the wrong color, it's in the wrong place, it's the wrong size, etc. It should look like this, but I've no idea why my CSS for a custom bbcode would mess with the boards built-in 'add edit by'.


Third issue:

I have these buttons below that I'm trying to get to a certain part of my site. Now, on my test site they're in a different slot cause I messed with the code, but if you look at my code check the test site cause that's the updated one.

user posted image
main site

user posted image
current position on my test site after attempts to edit it yet again

I want it over the right top above my banner where the strip of yellow is before the red border stuff.

user posted image

However, I made a div id class called socialbuttons and I've tried changing position, I've tried changing left, right, bottom, top. . . nothing puts it where I want and I don't know what I'm doing at this point. =/ Help?


Deeply appreciate any help you can provide.
PM
#
The subforums issue is because the front page uses the .tooltip class, whereas the sub-subforums use just regular anchor styles. To fix it, move the styles for .tableborder .row4 .tooltip to .subforums a

The second issue we'll need a link to an example to help with.

The third issue is simple, but confusing - where do you want these buttons, exactly?
PM
#
Ohhh, oddly my code didn't even have a .subforums a o.o So I added one and did what you said, and subforums are all fixed.

As for the second issue: this thread is where I noticed the problem. At the bottom of the first post.

And here's a picture for the third issue of where I want the buttons:

user posted image

Inside that black box, preferably. I just made the box somewhat large cause if we had any other social buttons they'd go there too.
PM
#
Seems like your give credit BB code might have an open tag. Check the code to make sure all the elements close.

For the social buttons, some new organization is needed. Delete your current .socialbuttons element and styles, and paste this new structure in as the first child of #mainboard:

CODE
<div class="socialbuttons"><div class="socialinner"><a href="http://sutdrp.tumblr.com/"><img src="http://lovemeanddespair.b1.jcink.com/uploads/lovemeanddespair/tumblrcrack.png"></a> <a href="https://www.pinterest.com/untotheday/"><img src="http://lovemeanddespair.b1.jcink.com/uploads/lovemeanddespair/pintcracked.png"></a></div></div>


And add these styles:

CODE
.socialbuttons {
   position: relative;
   width: 100%;
   height: 30px;
   margin-top: -14px;
}
.socialinner {
   right: 0;
   position: absolute;
}


This post has been edited by DustBucket: Mar 20 2017, 11:00 PM
PM
#
Okay that was weird. It didn't have a missing closed tag, it changed my closing div in the bbcode thing itself to a span tag. o.O I'm not sure why. I hope it doesn't do that again. I changed it back to a closing div tag and that resolved the issue.

That moved the buttons where I wanted them. And huh, now looking at what you provided I definitely see what I was doing wrong - I think. Lol hopefully I can learn from this for future positioning. Thank you.

EDIT: actually, I was wrong about it being resolved. =/ Okay so. . . it's stretching the field around the banner?

On the right and at the bottom(does same on my test forum)
screenshot here

This post has been edited by THE SONIC CENTURION: Mar 21 2017, 12:00 AM
PM
#
That's actually not the fault of the social buttons, though it may have revealed that problem. The stretched appearance arises from the div #mainboard having a width of 900 pixels, whereas the banner image itself has a width of only 860 pixels. This 40 pixel difference is what you're seeing there. You can either adjust the image, change the width of the #mainboard div, or (the easiest way) add margin: 8px 8px -14px 8px; to the banner image itself using inline styles.

EDIT: To clarify, the vertical gap at the bottom is the result of the social buttons using a negative margin-top property. I wasn't sure if you wanted the buttons closer to the border edge or also affected by the padding property.

This post has been edited by DustBucket: Mar 21 2017, 02:25 AM
PM
#
QUOTE (DustBucket @ Mar 21 2017, 02:21 AM)
That's actually not the fault of the social buttons, though it may have revealed that problem. The stretched appearance arises from the div #mainboard having a width of 900 pixels, whereas the banner image itself has a width of only 860 pixels. This 40 pixel difference is what you're seeing there. You can either adjust the image, change the width of the #mainboard div, or (the easiest way) add margin: 8px 8px -14px 8px; to the banner image itself using inline styles.

EDIT: To clarify, the vertical gap at the bottom is the result of the social buttons using a negative margin-top property. I wasn't sure if you wanted the buttons closer to the border edge or also affected by the padding property.


The buttons where they are looks fine to me. If I add the margin stuff though that should solve the issue I'm having and make my banner, and the space around it, look like before? Though I have to ask how do I add inline styles to the banner? I'm still re-teaching myself some HTML and CSS stuff from when I used to code years ago, and inline is just eluding me(doesn't help I have crap memories). The only thing I get when searching it is inline block or something. Nothing about margin or how to add that with inline style.
PM
#
An inline style is just adding the style attribute to an element:

CODE
<img src="urltoimage.png" style="margin:8px 8px -14px 8px;">


This post has been edited by DustBucket: Mar 21 2017, 12:59 PM
PM
#
Okay, so I added that to my banner image on both forums and somehow got two different reactions that didn't fully solve the issue.

On my test board here the bottom bit under the banner is still really stretched and so are the sides now. The banner border is actual wider than my forum sections underneath it. That shouldn't be the case.

On my main site here it mostly looks the same like on my test site except the bottom bit isn't as stretched as on the test forum.

Is this cause of the padding style thing? If it takes not having the buttons right against that border edge and affected by the padding then I'm fine with doing that too if it'll solve this issue so our banner with its border is the same width as the forum sections beneath it again.
PM
#
Sorry, made a goof up earlier.

Remove the inline style from the image, and add this style for the containing element. You can either use my selector (.tableborder:nth-of-type(2)), or add a second class to target more specifically.

CODE
.tableborder:nth-of-type(2) {
   padding: 0px;
   width: 860px;
   height: 300px;
   margin: auto;
}


There is also a line break tag after the userlinks and before the .innerwrapper div. If you can, remove it in your wrappers. If you cannot, because it is part of a keyword, you can target it and set it to display:none; like so:

CODE
.tableborder:nth-of-type(2) br {
   display: none;
}


This post has been edited by DustBucket: Yesterday at 03:28 pm
PM
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