• 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

Buoysel

Trust me, I'm a Professional*
2,006
Posts
15
Years
    • ChrisJavier said:
    Um.. English is not my strong point, so i'll try to explain better..

    You know that Haunter I have? Let's say I want it far away to a corner on the right. It automatically puts it in line with the text.
    Click to expand...

    You might try using the right tags around the image code.
    sigpic489745_4.gif

    [RIGHT][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/RIGHT]

    In HTML for a webpage you would use the style tag and add the float CSS like so:
    Code: 
    <img src="http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">
     
    Tsutarja

    Tsutarja

    27,747
    Posts
    14
    Years
    • Buoysel said:
    You might try using the right tags around the image code.
    sigpic489745_4.gif

    [RIGHT][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/RIGHT]

    In HTML for a webpage you would use the style tag and add the float CSS like so:
    Code: 
    <img src="http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">
    Click to expand...
    I think he's asking though for the Haunter gif and the text to be on the same line; which isn't possible with the
    align tags.​
     

    Buoysel

    Trust me, I'm a Professional*
    2,006
    Posts
    15
    Years
    • Tsutarja said:
    I think he's asking though for the Haunter gif and the text to be on the same line; which isn't possible with the
    align tags.​
    Click to expand...


    Hmm, I didn't notice that at first. It looks like css will work though.

    FC: 0275-8985-5713| IGN: Javier
    sigpic489745_4.gif

    Code: 
    [PLAIN][div=""]FC: 0275-8985-5713| IGN: Javier[div="float:right;"][img]http://www.pokecommunity.com/signaturepics/sigpic489745_4.gif[/img][/div][/div][/PLAIN]
     
    Impo

    Impo

    Playhouse Pokemon
    2,458
    Posts
    14
    Years
    • machamp.gif
    Bag_Luxury_Ball_Sprite.png

    Machamp lvl 50 ♂
    holding Lum Berry
    Adamant. No Guard.
    31/31/31/x/31/31
    240HP/248Atk/16SpD/4Spe
    Dynamic Punch
    Payback
    Bullet Punch
    Ice Punch


    How would I get the text below the image to move to the right? I think it's to do with the inline block but I have no idea about the format :x

    thanks for any help!
     
    Tsutarja

    Tsutarja

    27,747
    Posts
    14
    Years
    • Impo said:
    machamp.gif
    Bag_Luxury_Ball_Sprite.png

    Machamp lvl 50 ♂
    holding Lum Berry
    Adamant. No Guard.
    31/31/31/x/31/31
    240HP/248Atk/16SpD/4Spe
    Dynamic Punch
    Payback
    Bullet Punch
    Ice Punch


    How would I get the text below the image to move to the right? I think it's to do with the inline block but I have no idea about the format :x

    thanks for any help!
    Click to expand...
    In this instance, you do not need to use the inline block at all. What you're looking for is float.

    Here's the code you would use:

    Spoiler:


    And its output:

    Spoiler:


    If you want the text to be farther-separated from the Pokéball background, then you can do that by setting a left option within the text's CSS properties.
     
    Talon

    Talon

    [font=Cambria]Hidden From Mind[/font]
    1,080
    Posts
    10
    Years
    • How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.
     
    Impo

    Impo

    Playhouse Pokemon
    2,458
    Posts
    14
    Years
    • Tsutarja said:
    In this instance, you do not need to use the inline block at all. What you're looking for is float.

    Here's the code you would use:

    Spoiler:


    And its output:

    Spoiler:


    If you want the text to be farther-separated from the Pokéball background, then you can do that by setting a left option within the text's CSS properties.
    Click to expand...

    Thank you!
    But I have one more question :x
    I tried it centered but the float remains to the left of the page. I tried again with inline blocks and it seemed to do the trick, but my top padding for the text isn't working as I would it too. Is it possible for the text and the top of the background image to start at the same time? (It's just bringing the text down, but whenever I try to put things in inline blocks it messes up :x

    here's what I have:
    Spoiler:


    Rengar said:
    How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.
    Click to expand...

    I'm not sure about most of that, but I think I know hover text!
    [title="the hover text"]text[/title]

    ie: text
     

    Buoysel

    Trust me, I'm a Professional*
    2,006
    Posts
    15
    Years
    • Rengar said:
    How could I make the images in my sig change when someone hovers over them, and also display a small text box? If displaying a text box isn't possible, then hover text is ok also.
    Click to expand...
    Change how?

    CSS has a transform tag that would or might do what you want to do, but I am not sure how it can be implemented into PC's css-div tag that they allow us to use in posts/signatures because the transform tag requires the use of the :hover selector.

    Impo said:
    Is it possible for the text and the top of the background image to start at the same time? (It's just bringing the text down, but whenever I try to put things in inline blocks it messes up :x
    Click to expand...

    Not sure what you are asking. It looks to be starting on the same line on my screen. Maybe your browser isn't rendering it correctly? Here's what it looks like for me. Is this what you are tying to get? http://i.imgur.com/erVari5.png
     
    Talon

    Talon

    [font=Cambria]Hidden From Mind[/font]
    1,080
    Posts
    10
    Years
    • Buoysel said:
    Change how?

    CSS has a transform tag that would or might do what you want to do, but I am not sure how it can be implemented into PC's css-div tag that they allow us to use in posts/signatures because the transform tag requires the use of the :hover selector.
    Click to expand...

    I mean when they hover over it, it changes to another image.
     

    Oryx

    CoquettishCat
    13,184
    Posts
    13
    Years
    • Age 31
    • Seen Jan 30, 2015
    Rengar said:
    I mean when they hover over it, it changes to another image.
    Click to expand...

    I don't think that's possible with PC CSS. That would require use of :hover as Buoysel noted.
     
    Impo

    Impo

    Playhouse Pokemon
    2,458
    Posts
    14
    Years
    • One more question :x

    how would I get the staryu and pokeball to start at the bottom of the background image?
    Is it possible?

    staryu.gif

    Bag_Pok%C3%A9_Ball_Sprite.png
    Staryu lvl 1
    Timid. Natural Cure.
    31/x/31/31/31/31
    Tackle
    Harden​

    here's the code:
    Spoiler:
     

    Oryx

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

    Bag_Pok%C3%A9_Ball_Sprite.png
    Staryu lvl 1
    Timid. Natural Cure.
    31/x/31/31/31/31
    Tackle
    Harden​

    All you have to do is add display:table-cell (unlocks the vertical alignment options) and vertical-align:bottom. If it's too low keep in mind that there's a cimg tag in bbcode that lets you put padding on the bottom of the pokeball to bump it up :)
     
    Alfieri

    Alfieri

    2,850
    Posts
    10
    Years
    • Seen Nov 14, 2023
    Hey guys, CSS noob here. Is there any way to have the image change each time you refresh a page? I have a lot of pictures I'd like to use in my signature.
     
    Tsutarja

    Tsutarja

    27,747
    Posts
    14
    Years
    • Alfieri said:
    Hey guys, CSS noob here. Is there any way to have the image change each time you refresh a page? I have a lot of pictures I'd like to use in my signature.
    Click to expand...

    ❤Hitomi❤ said:
    I don't think you can, you can have a gif with it though.
    Click to expand...
    ^ this. At least within PC's CSS capabilities.

    Your only option for rotating images is to use an image-rotating service, or create one using PHP and linking to that.
     
    You must log in or register to reply here.
    Back
    Top