CSS Help & Resources Page 23

Started by seeker November 16th, 2009 5:38 PM
  • 175331 views
  • 902 replies

donavannj

Age 32
Male
'cause it get cold like Minnesota
Seen 4 Hours Ago
Posted 1 Week Ago
22,513 posts
18.2 Years
Well that's because the CSS here is limited to stuff that can be done as inline properties, as it's BBCode CSS, and no HTML can be used. [css-div="insertelement1here;insertelement2here;insertelement3here;insertelement4here;"][/css-div] is an example of how the BBCode CSS needs to be structured to function properly.

However, I see no CSS whatsoever in that code block of yours. All I see is HTML. Not even any inline CSS. And tables can't easily be done in BBCode CSS or with CSS in general. I've done a table once before myself using only CSS, but then I broke it when I went to modify it later.

That table is in the first post of this thread here if you want to study it: http://www.pokecommunity.com/showthread.php?t=255029
whoops

Ninja Paladin

Male
Northamptonshire, UK
Seen 17 Hours Ago
Posted June 12th, 2018
146 posts
16.5 Years
That's the closest I can get in CSS, just using the images for now though to keep it small, however I don't want all that empty space around the two rows...

EDIT: Actually seems to be white space around the images, any way to shrink that via image size coding of any kind?


FC: 2122-7342-8697 IGN: Telrean

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Hi, its me again. Is there a way to make is so that CSS boxes are aligned center? I tried using the align center thing that is preset, but then it screws up my whole post. Does anyone have a solution?
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
There might be a box align code or something but I'm not sure if it works on PC so what I usually do is inside the box I'd align it to what ever I want to align it to, like maybe to the centre, and then use the BBCode align to actually align the box to something, like maybe the right.
That way everything inside of the box stays where it is and you can still align the box to where ever.

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
margin:auto is your friend.

If you want to be a little bit more specific:

https://developer.mozilla.org/en/CSS/margin

margin: <value> for all sides
margin: <vertical> <horizontal>
margin: <top> <horizontal> <bottom>
margin: <top> <right> <bottom> <left>
If you want to centre a DIV block, make sure that the horizontal or left and right margins are all set to auto.

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
How do you resize an image here in bbcode?
Background images in a div, or inline images?

For the former, use the background-size property.

For the latter, nope, nothing can help you, aside from manually resizing the image to be used in the first place. You should do manual resizing, as scaling down a large image to a smaller size anyway can waste bandwidth, and scaling up a small image to larger sizes might have different final rendering quality depending on the browser.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
I'm back. This is what, the fourth or fifth time now? XD
So here is my problem. I am working on a new sig, but it isn't working.
What it looks like now:
Spoiler:





How do I get that final image up further so it isn't floating in the middle of nowhere? I'd also like some space between that image and the outside border of the largest box.
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
I bumped it up a bit for you, you can just change the "top:-300px;" to whatever value you'd like to align it perfectly however you want. As for the space in between, I just moved the picture over in the same way 15 pixels. Not sure if it's the most elegant way to do it but it works :3






Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Thanks! Could you give me the code? (I know I'm a hypocrite by saying that, as I didn't do it in my original post XD)
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
I love this thread too much to leave without posting again. XDWell, this is what my problem is now. That last image is there when I take away the span tag for the text, but then the image disappears as soon as I try to put the tag back on or I center it. I've tried everything I know, but I can't seem to have the text and image both be aligned in the way I want.
Example:
This is how I want the text/symbols. Centered and all. But I can't see the other image.
Spoiler:


: : : :



Now without those tags, I get the image, but the text isn't aligned. Center tags will do the same thing as the span tags I have inserted.
Spoiler:


: : : :


Anyone got a solution?
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
Maybe I'm missing something but those don't look centered so I'm confused as to what you want, things aren't aligned at least in the code you pasted. The two look like this:

Spoiler:




Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
That's weird, because with mine, the stuff is centered on the first one. IDK what it is, because your post looks different from mine. :\
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
What it looks like when I view my post:
Spoiler:


What it looks like when I view your post:
Spoiler:


See what I mean?
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years


: : : :


Is this what you're looking for? Keep in mind that this signature breaks 2 different sig rules though...lol


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Yeah, I know. Gonna fix the width now. But what is the other one?
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Yes, that is perfect.
And I noticed the width problem, but what is the other?
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
There are two ways to do this. One way would be to have an identically sized box positioned on top of the transparent one, that has a transparent background and opaque text. The other one (easier imo) would be to just make the background an image of a half-transparent box instead of using the opacity thing.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
The other one (easier imo) would be to just make the background an image of a half-transparent box instead of using the opacity thing.
The third way (easier than easy) is to simply set the background colour of the box to a semitransparent value, which is achievable with RGBA colours. Try setting background-color: rgba(0, 0, 0, 0.85) for 85% opaque grey black, for instance.

Disclaimer: be sure to include another background-color attribute before said rule that is a standard hex value, like #000000, to prevent your signature from mangling up in IE8, which still sees some use today. And older feature phones.

Mortalis

dreadnaught

Age 26
Male
Canada
Seen October 19th, 2020
Posted May 12th, 2017
345 posts
13 Years
I've tried everything, but I can't seem to get this to work.

I want to get this image:

To go on here:

As in, I want Metagross to be on the left side of it, just standing on it. How do I do that? I can't figure it out. I've tried padding, spacing, etc..

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
You could make the userbar a background image that doesn't repeat, so then all you need to do is place the image on it like this.




[cd=background-image:URL('http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png'); background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd]
Or you could use the margin code so that the gif is pulled up onto the userbar. Like this.





[IMG]http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd]
As you can see the second one is more accurate so I'd personally go with that one.

Mortalis

dreadnaught

Age 26
Male
Canada
Seen October 19th, 2020
Posted May 12th, 2017
345 posts
13 Years

Or you could use the margin code so that the gif is pulled up onto the userbar. Like this.





[IMG]http://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]http://sprites.pokecheck.org/i/376.gif[/IMG][/cd]
As you can see the second one is more accurate so I'd personally go with that one.
Ah, that's exactly what I was looking for! Thank-you. I didn't know of the margin code.

Impo

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years
I have a problem with CSS to do with inline: block codes (I think that is what it's called)


that very messy piece of code is meant to produce this:


BATTLE LOG





KNOWN ACHIEVEMENTS






But the second box is a little higher than the first. Does anyone have any idea how to level them?
Uhm I tried to get the code but it only turns into the thing above so :s