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.

Pages: (2) 1 2  ( Go to first unread post ) 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: Mar 23 2017, 03:28 PM
PM
#
Okay my mind is really blanking right now. You say to remove the inline style and to replace it with. . . another style, but how would that look?

Like right now my board wrapper for my banner inside my tableborder looks like:
CODE
<img src="http://untotheday.b1.jcink.com/uploads/untotheday/skinimgs/BannerDark.png" style="margin:8px 8px -14px 8px;">


And I'm not sure how you'd make a second class(for the targeting more specifically thing)?

I think I found that line break you mentioned, but I'm not sure. Note: I've only updated on my main forum, not my test yet.

I feel like this is basic code stuff and I know it, but my brain is blanking. It has been a long couple of weeks. xD
PM
#
Remove the inline style on the image, and then add the aforementioned styles to the containing element - not the image itself.

Adding multiple classes is as simple as adding any attribute. The structure looks like:
CODE
<div class="class1 class2 class3"></div>


This is the line-break in question:
user posted image

You can also target it with CSS and set it to display:none; using the sequential selectors, as in #userlinks + br

This post has been edited by DustBucket: Mar 31 2017, 11:27 AM
PM
#
I have never worked with multiple classes so I've no doubt I did this wrong somehow. . .

So I implemented it just on my test forum(leaving main site alone since I didn't want to mess up anything), and as you can see here? it did not fix the issue. It made it worse actually. It should have this patterned border around it like in the below image, and like the rest of my forum design if you look at either site.

user posted image

Did I insert it wrong? I mean it's totally possible I did. I was feeling kinda panicky just doing it in the first place cause I still don't quite understand the whole div class thing(I'm still learning).

Also, I absolutely can't find this break tag you're talking about anywhere. My only break tags are inside my one part of the sidebar flag div. I can post my test forum wrappers if you need(they're the exact same as my main forum except for the code I inserted from your post above)?
PM
#
Sorry for dropping off there.

To be honest, it's a little confusing (or it's just late and I'm confused regardless) to know what the problem you're having is since we're jumping between boards, especially since one appears to be premium/ad-less and the other not. Could you reiterate, just for clarity's sake?

However, I did notice this:
user posted image

That's not quite what you wanted. .tableborder:nth-of-type(2) is a CSS selector, and goes in the stylesheets. To clear it up:

QUOTE
.tableborder:nth-of-type(2)


The red is the element being targeted by class name, whereas the yellow is what's known as a pseudo-class. It adds handy utility when you need to target one specific element that shares a class name with several other elements: in this case, only the second appearing .tableborder element will be targeted as indicated by the green numeral (though pseudo-classes are base zero, so keep that in mind if it ever seems to not be working correctly)

This post has been edited by DustBucket: Apr 10 2017, 12:02 AM
PM
#
Okay, on the main site here you can see that around the banner is a light yellow border with a swirly background design. When I added the social buttons in that spot, it started making it stretch weirdly instead of being perfectly the same on right, left, top, and bottom. If you look, you can see they're not all even.

Since I don't want to mess this up on my main site as well or you won't see the difference, when I added your nth thing(I've also removed the bit in the board wrappers HTML and just left the CSS as you suggested above) that border vanishes as you can see if you look here.

[I've added nothing new to the main site; I'm just working on the test site now to hopefully make things less confusing. Sorry for jumping between them.]

I know the test site I'm working on has no premium, that could be why you're seeing the thing with the break that isn't there? I don't know. However, I don't think that really matters with the issue I'm currently having above like it shouldn't impact whether or not my border is getting eaten. I could insert the code on the main site after you see what I mean - if you think it'll help figure this out.

This post has been edited by THE SONIC CENTURION: Apr 24 2017, 01:04 AM
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 »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll