• 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?".
  • Forum moderator applications are now open! Click here for details.
  • 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.

CSS Help & Resources

258
Posts
12
Years
  • Seen Jan 27, 2014
Hello!
Can you help me a bit with CSS?
I have this line of code...

[*cough*cd="background-color: #6E4B3B; height: 200px; width: 500px; float: center"]
My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
[/*cough*cd]


Get rid of the *cough* part, I did it so it won't be actual CSS.
Whenever I use this code, I get this...


My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A


What can I do to make it have the height and width I want?

Thanks!
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
Hello!
Can you help me a bit with CSS?
I have this line of code...

[*cough*cd="background-color: #6E4B3B; height: 200px; width: 500px; float: center"]
My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
[/*cough*cd]


Get rid of the *cough* part, I did it so it won't be actual CSS.
Whenever I use this code, I get this...


My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A


What can I do to make it have the height and width I want?

Thanks!

Use relative positioning on the block of text(s) that you want to move.
You might want to put a wrapper div around the blocks of text.
Then insert these two:
Code:
position:relative;top:(as needed)px;left:(as needed);

You'll need to tweak a lot so you'll need the previews :) Try doing it in Firefox. Never use line breaks (enter/return) to position the blocks of text since different browsers can have different line heights, same goes with different fonts.

float:center doesn't exist.
 
258
Posts
12
Years
  • Seen Jan 27, 2014
Use relative positioning on the block of text(s) that you want to move.
You might want to put a wrapper div around the blocks of text.
Then insert these two:
Code:
position:relative;top:(as needed)px;left:(as needed);
You'll need to tweak a lot so you'll need the previews :) Try doing it in Firefox. Never use line breaks (enter/return) to position the blocks of text since different browsers can have different line heights, same goes with different fonts.

float:center doesn't exist.
Sooo...how does it fit together?
 
2,096
Posts
15
Years
Is that what you were looking for? From looking at your code you had a lot of un-needed BBcoding in there. I'd very strongly advise if you are using CSS then avoid using BBcoding where possible. For example when trying to make a font colour put in "color:#49648" into the css tag.

[cd="background-color: #6E4B3B; height: 200px; width: 500px; text-align: center; color:#496489; font-family:Trebuchet MS;"]My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
[/cd]

My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
 
258
Posts
12
Years
  • Seen Jan 27, 2014
Is that what you were looking for? From looking at your code you had a lot of un-needed BBcoding in there. I'd very strongly advise if you are using CSS then avoid using BBcoding where possible. For example when trying to make a font colour put in "color:#49648" into the css tag.

[cd="background-color: #6E4B3B; height: 200px; width: 500px; text-align: center; color:#496489; font-family:Trebuchet MS;"]My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
[/cd]

My Friend Code:
HeartGold | FC N/A | OT Jason | ID N/A
My Past OTs and IDs:
HeartGold | OT Jason | ID N/A
SoulSilver | OT Jason | ID N/A
Platinum | OT Jason | ID N/A
Oh, I know that for the font colors...for the font type, I never use CSS to format that...Thanks a lot! And also...is it possible to use text-align: center for a line of CSS code that will be used for the whole post? And I have another question...how would you use the text family Lucida Console / Lucida Sans Unicode? I tried it and it won't work...
 
Last edited:

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
Oh, I know that for the font colors...for the font type, I never use CSS to format that...Thanks a lot! And also...is it possible to use text-align: center for a line of CSS code that will be used for the whole post? And I have another question...how would you use the text family Lucida Console / Lucida Sans Unicode? I tried it and it won't work...

Yes. Wrap the entire text block with a single div with that property.

font-family:'Lucida Console','Lucida Sans Unicode',sans-serif (the single quotes need to be in there due to spaces in font names)
 
13,373
Posts
14
Years
  • Age 29
  • Seen Jan 28, 2019
Just wanted to ask quick question, what's the code for overlapping text? And shadow text (?) as well please. It's been a while since I've been here and I forgot them. x.x
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Just wanted to ask quick question, what's the code for overlapping text? And shadow text (?) as well please. It's been a while since I've been here and I forgot them. x.x

To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

Text shadow is like this:

text-shadow: right bottom fuzzy color

"right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.
 
13,373
Posts
14
Years
  • Age 29
  • Seen Jan 28, 2019


To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

Text shadow is like this:

text-shadow: right bottom fuzzy color

"right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.
Not to be nitpicky or anything, but I remember there were more specific codes for doing the shadow and overlap. ._.

Not trying to be rude by saying that x.x
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD

Edit:


Text shadows are shadowy

That code is:

[span="color:#CC99CC;text-shadow:2px 2px 2px #000;font-size:16px;font-family:Arial Black;"]Text shadows are shadowy[/span]
 
22,952
Posts
19
Years
Text-shadow is the proper code.

There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

text-shadow: -2px 0px 2px #660000;

The above gives us this:

Test text.


EDIT: Oh, you mean the overlap option? *goes to check W3C on it*

EDIT 2: There is no element called overlap. :x
 
13,373
Posts
14
Years
  • Age 29
  • Seen Jan 28, 2019
Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD

*facepalm* My bad, not using CSS coding for a while really made me confused .///.

Thanks!

Text-shadow is the proper code.

There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

text-shadow: -2px 0px 2px #660000;

The above gives us this:

Test text.


EDIT: Oh, you mean the overlap option? *goes to check W3C on it*

Thanks Donny! :D
 

Legendary Silke

[I][B]You like dragons?[/B][/I]
5,925
Posts
13
Years
  • Age 30
  • Seen Dec 23, 2021
In addition to the above values, there is a fourth value, the spread value, just like box-shadow. However support is really spotty for it for text-shadow, since right now only IE10 supports it properly. I wouldn't recommend it, but it can make the shadow thicker or thinner. you can also use it to outline text. :) You will have to do double declarations if you want it to work on everything, one without the spread value, then one with it. It has to be in this order because the latter is deemed invalid in older browsers. And putting the former value later will cause the newer browsers to use the fallback values instead.
 
2,096
Posts
15
Years
Yea that's very possible. In fact I've seen multiple ways of doing it. I prefer to use the margin-top:-10px; code to make the text go upwards slightly when I'm trying to get text to go over whatever image I'm using. It also works with marrgin-bottom and margin-left and margin-right too.
Example:
SOMETEXT
SOMEMORETEXT


[cd=font-size:18pt; color:#333333]SOMETEXT[/cd][cd=margin-top:-13px; margin-left:18px; color:#666666;]SOMEMORETEXT[/cd]

There is a more complex way of doing it which includes making a box that is postion:relative; and then positioning the text or images with the position:absolute; and the top:1px; bottom:1px; left:1px; and right:1px; codes. You can also add in a z-index:1; code as well to determine what is on top of what, giving something a lower number than another object will place it underneath. This methods quite good if you've already mocked up the signature in photoshop or something like that because then you can position it perfectly.
A good example is Toujours' signature, she's always used this way to position the text over images or text over text. totally not avoiding making an example
 
1,814
Posts
12
Years
  • Age 29
  • Seen Jan 2, 2016
What is the code to have multiple images side by side with text underneath each one? I have searched everywhere and I haven't seen anything like what I'm looking for. Any help is appreciated.
 
2,096
Posts
15
Years
Well Eevee it depends on what you want really. From what you're saying I'm picturing just three images side by side with text underneath like this

Spr_4p_133.png
Spr_4p_133.png
Spr_4p_133.png

Text​

which is made using three IMG tags side by side and then using a line break and typing some text.

[center][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img]
Text[/center]

But I'm guessing you were looking for something different? Care to explain more or show us an example so we can help a bit more?
 
1,814
Posts
12
Years
  • Age 29
  • Seen Jan 2, 2016
What I am trying to do is fit inside this box...

This is about the size box I want.


these images with text underneath them.

dpmfa133.png
Eevee

dpmfa134.png

Vaporeon

And so on...
 
22,952
Posts
19
Years
What I am trying to do is fit inside this box...

This is about the size box I want.


these images with text underneath them.

dpmfa133.png
Eevee

dpmfa134.png

Vaporeon

And so on...

You have the code necessary for the background. All you need to do basically is copy the BBCode Hybrid Trainer posted for the images, alter it to your needs, and put it inside the css-div you made before your text.
 
Back
Top