• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

CSS Help & Resources

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?
 
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:
 
Can you take a screenshot so I know what you're looking for?
 

[PokeCommunity.com] CSS Help & Resources

♫ : ♪ : ♫ : ♪ : ♫
[PokeCommunity.com] CSS Help & Resources



Is this what you're looking for? Keep in mind that this signature breaks 2 different sig rules though...lol
 
The images, as seen by the disabled tag in your sig right now XD;

Edit: No wait I'm wrong ignore me you already fixed that one
 
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.
 
Toujours said:
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.
Click to expand...

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.
 
Last edited:
I've tried everything, but I can't seem to get this to work.

I want to get this image:
[PokeCommunity.com] CSS Help & Resources


To go on here:
[PokeCommunity.com] CSS Help & Resources


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..
 
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.


[PokeCommunity.com] CSS Help & Resources


Code: 
[PLAIN][cd=background-image:URL('https://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png'); background-repeat:no-repeat;][IMG]https://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

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


[PokeCommunity.com] CSS Help & Resources

[PokeCommunity.com] CSS Help & Resources


Code: 
[PLAIN][IMG]https://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]https://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

As you can see the second one is more accurate so I'd personally go with that one.
 
Hybrid Trainer said:

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


[PokeCommunity.com] CSS Help & Resources

[PokeCommunity.com] CSS Help & Resources


Code: 
[PLAIN][IMG]https://i1150.photobucket.com/albums/o603/mPlattenum/STUB.png[/IMG]
[cd=margin-top:-40px; padding-left:10px; background-repeat:no-repeat;][IMG]https://sprites.pokecheck.org/i/376.gif[/IMG][/cd][/PLAIN]

As you can see the second one is more accurate so I'd personally go with that one.
Click to expand...

Ah, that's exactly what I was looking for! Thank-you. I didn't know of the margin code.
 
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
 
Let me know how this goes.


BATTLE LOG




KNOWN ACHIEVEMENTS





PHP: 
[CENTER][div="height:150px;"][div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:     solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"]
[SIZE=3][COLOR=White]BATTLE LOG[/COLOR][/SIZE][SIZE=1]

[/SIZE]   [div="width:290px;height:80px;overflow:auto;-webkit-border-radius:      10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/div]
[/div]   [div="width:300px;height:150px;-webkit-border-radius:25px;border-radius:25px;background-color:#1b1b1b;border-width:4px;border-style:      solid;border-left-color:#0a0a0a;border-right-color:#323232;border-top-color:#232323;border-bottom-color:#232323;display:inline-block;"][SIZE=3][COLOR=White]
KNOWN ACHIEVEMENTS[/COLOR][/SIZE][SIZE=1]

[/SIZE][div="width:290px;height:80px;overflow:auto;-webkit-border-radius:       10px;border-radius:10px;border-width:2px;border-style:solid;border-left-color:#323232;border-right-color:#0a0a0a;border-top-color:#232323;border-bottom-color:#232323;text-align:justified;"]

[/div]
[/div][/div][/CENTER]
 
Okay, I need help here.

Is there any way to use CSS to create tabs?

For example, when you're on a PC Profile, and you can click the different tabs to see other information.

Is there any way to do this with the coding for this forum? I want to make a signature with multiple sections, and a row of buttons (tabs) that will reveal different sections of information one at a time.

I would like to know if there's certain codes or a method of using those codes to work in the way I've just explained. That way I can keep my Signature nice and cozy.

Thanks in advance,
WolfOfEve
 
totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.
 
How would you get this background to "stretch" or not repeat?

Spoiler:

That's the only problem I'm having so far.
A.nd I know how to do CSS I just really like the style she used.
 
Last edited:
Hybrid Trainer said:
totally thought someone else had answered this already

But no, sorry. Tabs and stuff are done using JavaScript and HTML as far as I know so you can't do it using CSS.
Honestly I can't even think of an alternative to tabs in a signature either.
Click to expand...

Okay, so maybe I could start it off a little bit simpler. Is there a code that does something similar to
Spoiler:
 
You must log in or register to reply here.
Back
Top