• 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

Cosmotone8

silhouette of the past
1,758
Posts
12
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?
     

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015
    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:
     

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015
    Can you take a screenshot so I know what you're looking for?
     

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015

    tumblr_lj1t56INxH1qcb1qao1_400.gif

    ♫ : ♪ : ♫ : ♪ : ♫
    tumblr_llvqk7MXiV1qcb1qao1_400.gif



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

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015
    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
     

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015
    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.
     
    Legendary Silke

    Legendary Silke

    [I][B]You like dragons?[/B][/I]
    5,925
    Posts
    13
    Years
    • Seen Dec 23, 2021
    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:
    Mortalis

    Mortalis

    [css-div="background-color:#4e9dda;text-align:cent
    345
    Posts
    13
    Years
    • I've tried everything, but I can't seem to get this to work.

    I want to get this image:
    376.gif


    To go on here:
    STUB.png


    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

    Hybrid Trainer

    2,096
    Posts
    15
    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.


    376.gif


    Code: 
    [PLAIN][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][/PLAIN]

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


    STUB.png

    376.gif


    Code: 
    [PLAIN][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][/PLAIN]

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

    Mortalis

    [css-div="background-color:#4e9dda;text-align:cent
    345
    Posts
    13
    Years
    • Hybrid Trainer said:

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


    STUB.png

    376.gif


    Code: 
    [PLAIN][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][/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.
     
    Impo

    Impo

    Playhouse Pokemon
    2,458
    Posts
    14
    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
     

    abnegation

    10,673
    Posts
    15
    Years
    • Seen Dec 30, 2023
    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]
     

    Satan.EXE

    King of the Hell
    2,807
    Posts
    12
    Years
    • 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
     
    Hybrid Trainer

    Hybrid Trainer

    2,096
    Posts
    15
    Years
    • 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.
     

    Ralaia

    ~Smooth as Ice~
    56
    Posts
    11
    Years
    • 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:

    Satan.EXE

    King of the Hell
    2,807
    Posts
    12
    Years
    • 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