• Ever thought it'd be cool to have your art, writing, or challenge runs featured on PokéCommunity? Click here for info - we'd love to spotlight your work!
  • Our weekly protagonist poll is now up! Vote for your favorite Trading Card Game 2 protagonist in the poll by clicking here.
  • 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

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!
 
Rainy Garden of Fire said:
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!
Click to expand...

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.
 
♪Twiggy♪ said:
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.
Click to expand...
Sooo...how does it fit together?
 
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
 
Hybrid Trainer said:
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
Click to expand...
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:
Rainy Garden of Fire said:
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...
Click to expand...

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)
 
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
 
Charizard★ said:
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
Click to expand...

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.
 
Toujours said:


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.
Click to expand...
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
 
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]
 
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
 
Toujours said:
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
Click to expand...

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

Thanks!

donavannj said:
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*
Click to expand...

Thanks Donny! :D
 
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.
 
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
 
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.
 
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

*image removed**image removed**image removed*
Text​

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

[center]*image removed**image removed**image removed*
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?
 
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.

*pokemonelite2000 image removed*
Eevee

*pokemonelite2000 image removed*
Vaporeon

And so on...
 
Iloveeevee said:
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.

*pokemonelite2000 image removed*
Eevee

*pokemonelite2000 image removed*
Vaporeon

And so on...
Click to expand...

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.
 

*pokemonelite2000 image removed**pokemonelite2000 image removed*


Now how do you put their names underneath their images?
 
You must log in or register to reply here.
Back
Top