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
  #26    
Old November 17th, 2009 (12:44 PM).
Spherical Ice's Avatar
Spherical Ice Spherical Ice is online now
Team Rocket Grunt would like to battle!
ModeratorCS
 
Join Date: Nov 2007
Location: Leicester, UK
Posts: 3,678
One more question:
How would I go about making something stay at the side of the page while I scroll down, but disappear at the end of my post.

This is kind of hard to word.

Basically, if we have a post:

START OF CSS
a>>>>>b
a>>>>>b
a>>>>>b
x
x
x
END OF CSS

Who would I make it that when I'm scrolling down and reach X b is still in the same position that it was in when I was viewing a, but when the CSS ends, so does b?
Hard to explain. -.-
__________________

"Develop amnesia conveniently and forget everything you've heard!"
spheal clicker | rom hacking | pokémon gaia
staff antagonists collab 2015
Reply With Quote
  #27    
Old November 17th, 2009 (12:59 PM). Edited November 19th, 2009 by seeker.
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661


That is called float. At least I believe that is what you are looking for.
So If you wanted to float an image to the right while text goes around it you would use [css-div="Float:right;"] then post the image[/css-div]

So like this:

Spoiler:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text



Something like that?
If not, show me an example and I'll help what way I can.
__________________

| | |
Reply With Quote
  #28    
Old November 17th, 2009 (01:05 PM).
THIRTY-SIX's Avatar
THIRTY-SIX THIRTY-SIX is offline
Banned
 
Join Date: Oct 2004
Posts: 8,176
He's talking about position:absolute;
Kinda like with Counterfeit's showcase.
Reply With Quote
  #29    
Old November 17th, 2009 (01:11 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Ah, my mistake. Thanks Munna, well as stated it's using image;absolute. Though it isn't allowed in some sections a code template is this:

[css-div="position: absolute; top: 0; left: 0; text-align: center; height: 25px; width: 100%;background-color: #000000;"][COLOR=White]Text here[/COLOR][/css-div]
__________________

| | |
Reply With Quote
  #30    
Old November 17th, 2009 (01:13 PM).
Gary, the Magic Fairy's Avatar
Gary, the Magic Fairy Gary, the Magic Fairy is offline
Banned
 
Join Date: Feb 2006
Location: Your Mother
Age: 22
Gender: Male
Nature: Naughty
Posts: 2,800
But wait...

"Who would I make it that when I'm scrolling down and reach X b is still in the same position that it was in when I was viewing a, but when the CSS ends, so does b?"

Does it stop whenever the css-div ends?
Reply With Quote
  #31    
Old November 17th, 2009 (01:17 PM).
THIRTY-SIX's Avatar
THIRTY-SIX THIRTY-SIX is offline
Banned
 
Join Date: Oct 2004
Posts: 8,176
Nope it doesn't. Needs java element, I believe.
Reply With Quote
  #32    
Old November 17th, 2009 (02:23 PM).
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
I'm currently workin' on my signature, and I'm curious to as if how I can use spacing with css?

I'm tryin' to add the Facebook Icon and the LJ icon but It'll align all the way to the left again the edge of the image. How can I space it over to the right more so it isn't right against the edge?
I want it on the left side but not all the way against the edge of the image.
__________________

Reply With Quote
  #33    
Old November 17th, 2009 (02:44 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[css-div="padding-left:50px;"]Your icon[/css-div]

Your icon


Se the way my text has been pushed out a little? use padding to align your images whatever way you want. Padding works with padding-left, padding-right, padding-top, padding-bottom and any combonation by saying for example padding-top left
__________________

| | |
Reply With Quote
  #34    
Old November 17th, 2009 (02:45 PM). Edited November 17th, 2009 by Syrex.
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
Ah, That will do the trick!
Thanks so much

Edit:
Just have to locate the Facebook Icon and the LiveJournal icon
__________________

Reply With Quote
  #35    
Old November 17th, 2009 (03:06 PM).
Owl's Avatar
Owl Owl is offline
Crystal Tier
 
Join Date: Jul 2009
Age: 20
Gender: Female
Posts: 13,367
I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:
[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]
But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?
__________________


Reply With Quote
  #36    
Old November 17th, 2009 (03:11 PM).
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
Take out the "%" symbols on width.

Mm. Syrex is boss
__________________

Reply With Quote
  #37    
Old November 17th, 2009 (03:12 PM). Edited November 17th, 2009 by Jordan.
Jordan's Avatar
Jordan Jordan is offline
[:: Love Is War ★]
 
Join Date: Jun 2005
Location: Désordre, Empire of Canada
Gender: Male
Posts: 2,949
Send a message via Windows Live Messenger to Jordan
Quote originally posted by Charizard★:
I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:
[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]
But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?
There's no need to make 2 separate CSS. This will suffice:
HTML Code:
[css-div="width: 100%px; height: 100px; padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div]
Which makes:
---Signature Here---
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #38    
Old November 17th, 2009 (03:15 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Quote originally posted by Charizard★:
I've been messing around with the CSS but can't make the height visible. I tried using this:

---Signature Here---


HTML Code:
[css-div="width: 100%px; height: 100px;"][css-div="padding: 2px 2px 2px 2px; border: 0; font-variant: small-caps; color: #000000; background-color:#8A2BE2;"]---Signature Here---
[/css-div][/css-div]
But I can't make it heighten more Can someone please help me which part to put into the code so I can fix it?

Try not to rip codes straight from the tutorials also. You'll learn nothing by doing that XD
__________________

| | |
Reply With Quote
  #39    
Old November 17th, 2009 (03:17 PM).
Gary, the Magic Fairy's Avatar
Gary, the Magic Fairy Gary, the Magic Fairy is offline
Banned
 
Join Date: Feb 2006
Location: Your Mother
Age: 22
Gender: Male
Nature: Naughty
Posts: 2,800
Quote originally posted by Abnegation:
Have you tried using padding?
Padding is really hady for placement of things such as text and images.
[css-div="padding-left:50px;"]Your icon[/css-div]

Your icon


Se the way my text has been pushed out a little? use padding to align your images whatever way you want. Padding works with padding-left, padding-right, padding-top, padding-bottom and any combonation by saying for example padding-top left
This can also be done with the shorthand property padding:____. If you want all 4 sides padded equally, you can do padding:10px, or to set each side, use 4 values, going clockwise.
Spoiler:

Example:
padding:20px 40px 60px 80px
20 would be for the top, 40 for the right side, 60 for the bottom, and 80 for the left.
Example:
padding:20px 40px 60px
if you only have 3, the middle value will be used for the sides, and the first & last will be used for the top & bottom, respectively.
Example:
padding:20px 40px
and with only two, the first sets the top & bottom, and the second sets the sides.


Also, @Charizard★: it's just 100%, not 100%px. Px is pixels. XD
Reply With Quote
  #40    
Old November 17th, 2009 (03:24 PM).
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
Last question:

How about linking images?
This is an example of the code I used
HTML Code:
[URL="http://www.google.com/"][img]http://www.google.com/intl/en_ALL/images/logo.gif[/URL][/img]
But the image will not show up and it'll make all my pictures and text link to the said website.

Fix?
__________________

Reply With Quote
  #41    
Old November 17th, 2009 (03:26 PM).
Jordan's Avatar
Jordan Jordan is offline
[:: Love Is War ★]
 
Join Date: Jun 2005
Location: Désordre, Empire of Canada
Gender: Male
Posts: 2,949
Send a message via Windows Live Messenger to Jordan
Quote originally posted by Syrex:
Last question:

How about linking images?
This is an example of the code I used
HTML Code:
[URL="http://www.google.com/"][img][/B]http://www.google.com/intl/en_ALL/images/logo.gif[/URL][/img]
But the image will not show up and it'll make all my pictures and text link to the said website.

Fix?
Place the [/url] after the [/img]. This is BBCode too, by the way.


Edit: I think you didn't upload the picture correctly. Try Photobucket or imageshack, then copy + paste the [img] tag they gave you.
__________________
Formspring
MyAnimeList
Spring Breeze
Reply With Quote
  #42    
Old November 17th, 2009 (03:27 PM).
THIRTY-SIX's Avatar
THIRTY-SIX THIRTY-SIX is offline
Banned
 
Join Date: Oct 2004
Posts: 8,176
It should be [/img][/url]. No css involved. oo

The [/b] is the problem
Reply With Quote
  #43    
Old November 17th, 2009 (03:30 PM).
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
oops
My bad on that one. I knew it wasn't css but I ended up posting it here anyway.
Sorry, sorry, sorry.
__________________

Reply With Quote
  #44    
Old November 17th, 2009 (03:32 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 Abnegation:



Try not to rip codes straight from the tutorials also. You'll learn nothing by doing that XD
Yea I'll try not to xD. Its just too hard and too complicated for me to do it on my own right not xD.
__________________


Reply With Quote
  #45    
Old November 17th, 2009 (03:46 PM).
Syrex's Avatar
Syrex Syrex is offline
... Far From Perfect.
Gold Tier
 
Join Date: Jul 2008
Location: Columbus, Ohio
Age: 24
Gender: Male
Nature: Hasty
Posts: 554
I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome Check Signature, Of course.
__________________

Reply With Quote
  #46    
Old November 17th, 2009 (03:52 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Quote originally posted by Charizard★:
Yea I'll try not to xD. Its just too hard and too complicated for me to do it on my own right not xD.
It's not too hard, just code a lot and you learn them. Or make flash cards or something XD

Quote originally posted by Syrex:
I just wanted to say Thanks to Abnegation and everyone else that helped me.

I finished coding my signature following this thread.
This was the outcome :) Check Signature, Of course.
You're welcome, looks very good I do admit!
__________________

| | |
Reply With Quote
  #47    
Old November 19th, 2009 (04:29 PM).
cyan.'s Avatar
cyan. cyan. is offline
▲ 愛してる .
 
Join Date: Nov 2008
Location: toronto.
Gender: Female
Nature: Timid
Posts: 274
Send a message via ICQ to cyan. Send a message via AIM to cyan.
Does anyone know how to make text go on the image?
Like your signature, Abnegation
__________________
マーズ
Mars, Team Galactic Commander
Hair Color: Red
Eye Color: Red
Reply With Quote
  #48    
Old November 19th, 2009 (04:35 PM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661
Quote originally posted by Sinnoh Champ Cynthia.:
Does anyone know how to make text go on the image?
Like your signature, Abnegation
Yes, it is in the tutorials. Anyhow, the code.

[css-div="background-image:url('www.urlhere.com');width: px; height: px;"]
Text etc here
[/css-div]

If that doesn't make sense have a read of this tut.
CSS Signature Templates + Guide | PPN Studio
__________________

| | |
Reply With Quote
  #49    
Old November 21st, 2009 (07:32 AM).
cyan.'s Avatar
cyan. cyan. is offline
▲ 愛してる .
 
Join Date: Nov 2008
Location: toronto.
Gender: Female
Nature: Timid
Posts: 274
Send a message via ICQ to cyan. Send a message via AIM to cyan.
Thanks

Just wondering to more things:

1) How do you get the crosshair cursor when someone goes over your signature?

2) How do you add a music player on your signature?


Sorry I'm asking so much.
__________________
マーズ
Mars, Team Galactic Commander
Hair Color: Red
Eye Color: Red
Reply With Quote
  #50    
Old November 21st, 2009 (07:38 AM).
seeker's Avatar
seeker seeker is online now
adventure seeker
Platinum Tier
 
Join Date: Apr 2009
Location: Ireland
Posts: 10,661

Quote:
1) How do you get the crosshair cursor when someone goes over your signature?
cursor:crosshair;
Put it in the code.

Quote:
2) How do you add a music player on your signature?
With sound tags.

[sound"Song title here/words"]song url here[/sound]

No problem.
__________________

| | |
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 06:18 AM.