CSS Help & Resources

[Tsutarja]

How do I post a Picture in the far right of the signature? Separated from the text

Do you mean on one line or two lines?

 

[#DickBats]

Do you mean on one line or two lines?

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.

 

[Buoysel]

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.

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

(image no longer exists)​

[RIGHT](image no longer exists)[/RIGHT]

In HTML for a webpage you would use the style tag and add the float CSS like so:

<img src="https://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">

 

[Tsutarja]

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

(image no longer exists)​

[RIGHT](image no longer exists)[/RIGHT]

In HTML for a webpage you would use the style tag and add the float CSS like so:

<img src="https://www.pokecommunity.com/signaturepics/sigpic489745_4.gif" style="float;right;">

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]

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

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

FC: 0275-8985-5713| IGN: Javier

(image no longer exists)

[PLAIN][div=""]FC: 0275-8985-5713| IGN: Javier[div="float:right;"](image no longer exists)[/div][/div][/PLAIN]

 

[Impo]

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]

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!

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:

[cd=height:120px;background-image:url('https://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;float: left;][IMG]https://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]https://archives.bulbagarden.net/media/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=height:120px;][SIZE="1"]Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd]

And its output:

Spoiler:

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

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]

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]

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:

[cd=height:120px;background-image:url('https://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;float: left;][IMG]https://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]https://archives.bulbagarden.net/media/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=height:120px;][SIZE="1"]Machamp lvl 50 ♂
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd]

And its output:

Spoiler:

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

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.

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:

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

and the code:

[PLAIN][CENTER][cd=height:110px;background-image:url('https://fc03.deviantart.net/fs70/i/2011/068/a/c/pokeball_desktop_icon_by_beccerberry-d3b98cf.png');background-size:contain;background-repeat:no-repeat;display:inline-block;][IMG]https://www.pkparaiso.com/imagenes/xy/sprites/animados/machamp.gif[/IMG][IMG]https://archives.bulbagarden.net/media/upload/8/87/Bag_Luxury_Ball_Sprite.png[/IMG][/cd][cd=display:inline-block;text-align:left;padding-left:5px;][SIZE="1"]
Machamp lvl 50 ♂ 
holding Lum Berry
Adamant. No Guard.
31/31/31/x/31/31
240HP/248Atk/16SpD/4Spe
Dynamic Punch
Payback
[title=Egg Move]Bullet Punch[/title]
[title=Egg Move]Ice Punch[/title][/SIZE][/cd][/CENTER][/PLAIN]

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.

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

ie: text

 

[Buoysel]

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.

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.

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

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? https://i.imgur.com/erVari5.png

 

[Talon]

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.

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

 

[Impo]

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? https://i.imgur.com/erVari5.png

Ah, it was just my browser :x

Thank you!

 

[Oryx]

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

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

 

[Talon]

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

Darn. Well, that sucks. Thanks for the help either way :D

 

[Impo]

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 lvl 1
Timid. Natural Cure.
31/x/31/31/31/31
Tackle
Harden​

here's the code:

Spoiler:

[CENTER][cd=height:120px;width:120px;background-image:url('https://i1026.photobucket.com/albums/y321/da_impos/pokeball_desktop_icon_by_beccerberry-d3b98cf1_zps0912dc97.png');background-repeat:no-repeat;][IMG]https://www.pkparaiso.com/imagenes/xy/sprites/animados/staryu.gif[/IMG]
[IMG]https://archives.bulbagarden.net/media/upload/9/93/Bag_Pok%C3%A9_Ball_Sprite.png[/IMG][/cd]Staryu lvl 1
Timid. Natural Cure.
31/x/31/31/31/31
Tackle
Harden[/CENTER]

 

[Oryx]

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]

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.

 

[Night Watcher]

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.

I don't think you can, you can have a gif with it though.

 

[Tsutarja]

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.

I don't think you can, you can have a gif with it though.

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

 

[Alfieri]

I don't think you can, you can have a gif with it though.

Your only option for rotating images is to use an image-rotating service, or create one using PHP and linking to that.

Thanks guys. I got it working.