Go Back   The PokéCommunity Forums > Entertainment & Hobbies > Computers & Technology
Reload this Page CSS Help & Resources

Notices
For all updates, view the main page.

Computers & Technology The place to go for all things tech and internet. Share a funny YouTube video or meme, discover the latest useful apps, or just get some free tech support.



Reply
 
Thread Tools
  #526    
Old February 17th, 2012 (07:41 AM).
Oryx's Avatar
Oryx Oryx is offline
CoquettishCat
Crystal Tier
 
Join Date: Mar 2011
Age: 22
Gender: Female
Nature: Relaxed
Posts: 13,207
You want the "overflow:auto;" tag in the css box that you'd like a scroll on. That will add one if the text spills over the height limit. :3
__________________


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Reply With Quote
  #527    
Old February 18th, 2012 (04:39 AM).
何贤豪's Avatar
何贤豪 何贤豪 is offline
 
Join Date: Jan 2012
Posts: 258
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!
Reply With Quote
  #528    
Old February 18th, 2012 (04:58 AM).
Twiggy's Avatar
Twiggy Twiggy is offline
You like dragons?
Crystal Tier
 
Join Date: Dec 2010
Location: Plushies.
Gender: Male
Nature: Hasty
Posts: 4,900
Quote originally posted by Rainy Garden of Fire:
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.
__________________
Hey, it's Twiggy here. Or ♪Twiggy♪, if you prefer. I like Turtwig and Zorua a lot. I'm paired with Kip. I like Katy Perry. I want a Hydreigon plushie. Also, I'm a total PC geek.
Links
Reply With Quote
  #529    
Old February 18th, 2012 (07:39 AM).
何贤豪's Avatar
何贤豪 何贤豪 is offline
 
Join Date: Jan 2012
Posts: 258
Quote originally posted by ♪Twiggy♪:
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?
Reply With Quote
  #530    
Old February 18th, 2012 (09:34 AM).
Liliana Vess's Avatar
Liliana Vess Liliana Vess is offline
My Secrecy. My Advantage.
Platinum Tier
 
Join Date: Nov 2008
Location: «UK»
Gender: Male
Posts: 1,980
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
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #531    
Old February 18th, 2012 (08:06 PM). Edited February 18th, 2012 by 何贤豪.
何贤豪's Avatar
何贤豪 何贤豪 is offline
 
Join Date: Jan 2012
Posts: 258
Quote originally posted by Hybrid Trainer:
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...
Reply With Quote
  #532    
Old February 18th, 2012 (08:21 PM).
Twiggy's Avatar
Twiggy Twiggy is offline
You like dragons?
Crystal Tier
 
Join Date: Dec 2010
Location: Plushies.
Gender: Male
Nature: Hasty
Posts: 4,900
Quote originally posted by Rainy Garden of Fire:
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)
__________________
Hey, it's Twiggy here. Or ♪Twiggy♪, if you prefer. I like Turtwig and Zorua a lot. I'm paired with Kip. I like Katy Perry. I want a Hydreigon plushie. Also, I'm a total PC geek.
Links
Reply With Quote
  #533    
Old February 19th, 2012 (05:29 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
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
__________________


Reply With Quote
  #534    
Old February 19th, 2012 (05:36 PM).
Oryx's Avatar
Oryx Oryx is offline
CoquettishCat
Crystal Tier
 
Join Date: Mar 2011
Age: 22
Gender: Female
Nature: Relaxed
Posts: 13,207
Quote originally posted by Charizard★:
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.
__________________


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Reply With Quote
  #535    
Old February 19th, 2012 (05:39 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by Toujours:


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
__________________


Reply With Quote
  #536    
Old February 19th, 2012 (05:42 PM).
Oryx's Avatar
Oryx Oryx is offline
CoquettishCat
Crystal Tier
 
Join Date: Mar 2011
Age: 22
Gender: Female
Nature: Relaxed
Posts: 13,207
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]
__________________


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Reply With Quote
  #537    
Old February 19th, 2012 (05:44 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,581
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
__________________

KYON-KUN, DENWA
Reply With Quote
  #538    
Old February 19th, 2012 (05:46 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by Toujours:
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!

Quote originally posted by donavannj:
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
__________________


Reply With Quote
  #539    
Old February 19th, 2012 (07:32 PM).
Twiggy's Avatar
Twiggy Twiggy is offline
You like dragons?
Crystal Tier
 
Join Date: Dec 2010
Location: Plushies.
Gender: Male
Nature: Hasty
Posts: 4,900
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.
__________________
Hey, it's Twiggy here. Or ♪Twiggy♪, if you prefer. I like Turtwig and Zorua a lot. I'm paired with Kip. I like Katy Perry. I want a Hydreigon plushie. Also, I'm a total PC geek.
Links
Reply With Quote
  #540    
Old February 20th, 2012 (03:58 PM). Edited February 20th, 2012 by Owl.
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
Quote originally posted by donavannj:

EDIT 2: There is no element called overlap. :x
So, it would be impossible to do this on PC? I remember doing something similar in my signature where the text went a bit higher onto my sig picture and the bottom one kind of overlapped onto it.
__________________


Reply With Quote
  #541    
Old February 20th, 2012 (04:41 PM).
Liliana Vess's Avatar
Liliana Vess Liliana Vess is offline
My Secrecy. My Advantage.
Platinum Tier
 
Join Date: Nov 2008
Location: «UK»
Gender: Male
Posts: 1,980
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
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #542    
Old February 21st, 2012 (02:52 PM).
Absol Absol is offline
Crystal Tier
 
Join Date: Jan 2012
Posts: 1,846
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.
Reply With Quote
  #543    
Old February 21st, 2012 (03:16 PM).
Liliana Vess's Avatar
Liliana Vess Liliana Vess is offline
My Secrecy. My Advantage.
Platinum Tier
 
Join Date: Nov 2008
Location: «UK»
Gender: Male
Posts: 1,980
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


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?
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #544    
Old February 21st, 2012 (07:46 PM).
Absol Absol is offline
Crystal Tier
 
Join Date: Jan 2012
Posts: 1,846
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.

Eevee


Vaporeon

And so on...
Reply With Quote
  #545    
Old February 21st, 2012 (10:05 PM).
donavannj's Avatar
donavannj donavannj is offline
KYON-KUN, DENWA
ModeratorCS
 
Join Date: Mar 2005
Location: KYON-KUN, DENWA
Age: 24
Posts: 16,581
Quote originally posted by Iloveeevee:
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.

Eevee


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

KYON-KUN, DENWA
Reply With Quote
  #546    
Old February 22nd, 2012 (01:20 PM).
Absol Absol is offline
Crystal Tier
 
Join Date: Jan 2012
Posts: 1,846




Now how do you put their names underneath their images?
Reply With Quote
  #547    
Old February 23rd, 2012 (06:48 AM).
Liliana Vess's Avatar
Liliana Vess Liliana Vess is offline
My Secrecy. My Advantage.
Platinum Tier
 
Join Date: Nov 2008
Location: «UK»
Gender: Male
Posts: 1,980
Quote originally posted by Iloveeevee:



Now how do you put their names underneath their images?
In the same way you did it with the pictures, put the text inside the cd tags like so.

Eevee Vaporeon

[cd="background-color:black;color:white;height:100px;width:200px;"][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Eevee Vaporeon
[/cd]

But if I may, I think this signature would look pretty good if you were to use the [twocolumn] tag so that they could be aligned better :3


Eevee

Vaporeon



[cd="background-color:black;color:white;height:100px;width:200px; text-align: center;"][twocolumn][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG]
Eevee
[IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Vaporeon[/twocolumn]
[/cd]
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #548    
Old February 24th, 2012 (06:58 PM).
Cosmotone8 Cosmotone8 is offline
silhouette of the past
 
Join Date: Jan 2012
Location: Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Gender: Male
Nature: Careful
Posts: 1,787
I'm new at the whole CSS thing but after going through a couple tutorials I think I know enough to get by alright. But I've been learning about the HTML coding CSS. I checked in the FAQs and found out that HTML is not used but that BBCode is. What's the difference and how can I adjust to make it compatible.
Sorry, I'm really new to this kind of stuff.
__________________
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Reply With Quote
  #549    
Old February 24th, 2012 (07:17 PM).
Liliana Vess's Avatar
Liliana Vess Liliana Vess is offline
My Secrecy. My Advantage.
Platinum Tier
 
Join Date: Nov 2008
Location: «UK»
Gender: Male
Posts: 1,980
Well with the BBCode version you'll be making your own little pocket of CSS. For example if you were to make a heading out of CSS with the BBCode you'd set it out like this
[cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd]
This is a heading.


The red bits are the BBCode, the green bits are the CSS coding and the blue bits are the body text :3
[c*d=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/c*d]
* are put in to stop the code going all screwy, obviously.

It's possible for you to put a cd tag within a cd tag like so
[cd=width:100%; background-color:white;][cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd][/cd]

This is a heading.


Do you understand a little better now?
__________________


"I am confident that if anyone actually penetrates our facades, even the most perceptive would still be fundamentally unprepared for the truth of House Dimir."
-Szadek, Lord of Secrets

Reply With Quote
  #550    
Old February 24th, 2012 (07:34 PM).
Cosmotone8 Cosmotone8 is offline
silhouette of the past
 
Join Date: Jan 2012
Location: Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Gender: Male
Nature: Careful
Posts: 1,787
Yeah, Ill experiment with it a little bit and figure the rest out. Thanks!
__________________
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Reply With Quote
Reply
Quick Reply

Sponsored Links

You may also like.. (Beta)
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are UTC -8. The time now is 08:43 AM.