• 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,746
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,746
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
  • Age 28
  • 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,746
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