The PokéCommunity Forums

The PokéCommunity Forums (https://www.pokecommunity.com/index.php)
-   Internet & Technology (https://www.pokecommunity.com/forumdisplay.php?f=57)
-   -   CSS Help & Resources (https://www.pokecommunity.com/showthread.php?t=200899)

donavannj May 16th, 2011 5:04 AM

Quote:

Originally Posted by Diamond1304 (Post 6643714)
So do I add together with the box code or place it separately?

Well, considering it won't apply to that box if it's not placed next to the code, what do you think? ;)

Ooka May 17th, 2011 4:41 PM

Just a couple things. To correctly center things with CSS, you should use margin-left: auto; margin-right: auto;. Also, you no longer need -moz-, -webkit-, or -khtml-. border-radius: is now recognized by all the main browsers (Unless you're aiming for backwards compatibility).

You can also use clear: both; to clear your floats, if necessary.

Charizard★ May 24th, 2011 4:02 PM

Is there a code so that I can get text on the side of my image?

Ex.:

http://i1022.photobucket.com/albums/af347/percentage_/consideration.png?t=1306197637 I want to get the text on this side, without moving the image all the way to the left and without it always being on the bottom.




So is it possible?

donavannj May 24th, 2011 5:40 PM

[image="left"][/image] is the only way I can think of that would do that. Otherwise you'd have to place your picture in its own div and monkey around with that div's positioning.

jigglyppuff8 May 24th, 2011 5:57 PM

[image="left"][/image] "moves it all the way to the left" so to speak. Or at least more left than the default. Compare

http://i1022.photobucket.com/albums/af347/percentage_/consideration.png?t=1306197637 I want to get the text on this side, without moving the image all the way to the left and without it always being on the bottom.


to


I want to get the text on this side, without moving the image all the way to the left and without it always being on the bottom.
Aside from monkeying around with the padding and positioning like don suggested, I'm at a loss.


EDIT: Also, I'm playing around with my Tumblr and I can't seem to find anyway to change the background of my latest tweets. Anybody here know what I div and class I'd have to change?

Alternative May 26th, 2011 9:38 PM

I need help. I made a thread with coding here, and apparently something's wrong with it, something to do with it outside the box. My conclusion is that I've used position: absolute for it, so how would I go about fixing it?

Charizard★ June 3rd, 2011 7:27 PM

Another quick question, I've seen some people with CSS that makes the images/text unmovable or copyable, and I was wondering what's the code for that? I've tried searching for it, but I haven't found it.

donavannj June 3rd, 2011 7:34 PM

Quote:

Originally Posted by Charizard★ (Post 6676030)
Another quick question, I've seen some people with CSS that makes the images/text unmovable or copyable, and I was wondering what's the code for that? I've tried searching for it, but I haven't found it.

Give an example of this, please. I have no idea what you're talking about.

jigglyppuff8 June 3rd, 2011 7:34 PM

That's just because the image was used as a background image.

Regular img tags:
http://img163.imageshack.us/img163/4137/yesyoureshining2.png

background-image property:

Xyrin June 3rd, 2011 7:52 PM

I want to learn how to curve the box in this thread right here. I know the code to do it but whenever I try it, it doesn't work. If somebody could give me an example or even show me what I would need to do in my own code that'd be great. Here's my code.

HTML Code:

[FONT="Segoe UI"][COLOR="Black"][CENTER][css-div="padding: 2px 2px 2px 2px; border: dashed 1px red; color: #black; background-color: red;"]
Blarg blarg blarg. This is the stuff in my box. blargy

[/css-div][/CENTER][/COLOR]


[/FONT]

jigglyppuff8 June 3rd, 2011 8:00 PM

It's the border-radius property. Basically, you just use "border-radius: *desired radius length*;"

[css-div="padding: 2px 2px 2px 2px; color: #black; background-color: red; border-radius:8px;"]Blarg blarg blarg. This is the stuff in my box. blargy[/css-div]

Blarg blarg blarg. This is the stuff in my box. blargy

donavannj June 3rd, 2011 8:02 PM

Kevin beat me to it.

But I'd like to suggest not using that shade of red. It's blindingly bright.

Xyrin June 3rd, 2011 8:07 PM

Quote:

Originally Posted by donavannj (Post 6676072)
Kevin beat me to it.

But I'd like to suggest not using that shade of red. It's blindingly bright.

Okay. I'll use a darker one. I never noticed it was so bright until I actually looked at it.

pokewalker June 4th, 2011 8:34 AM

Well I basically have a very weird glitch. Maybe someone knows? It breaks through the border :S

PHP Code:

[CENTER][css-div="height: 300px; width: 500px; background-color: #000000; border-radius: 75px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-style:ridge; border-color: blue; border-width:5px; padding: 5px;"][center][FONT="Arial Black"][COLOR="White"]All of my shinies
[SIZE="1"](click them to view)[/SIZE]
[
css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"
][IMG]http://img89.imageshack.us/img89/9177/crobat.png[/IMG][/css-div][css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"][IMG]http://img818.imageshack.us/img818/8200/amoonguss.png[/IMG][/css-div][css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=z1NvXwm5spE&feature=channel_video_title"][IMG]http://img651.imageshack.us/img651/9154/typhlosionshiny.png[/IMG][/URL][/css-div][css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=wgiCGUxN5Cs&feature=channel_video_title"][IMG]http://img109.imageshack.us/img109/8789/cresseliae.png[/IMG][/URL][/css-div][css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=jIfbrmhEt-s&feature=channel_video_title"][IMG]http://img695.imageshack.us/img695/622/jellicent.png[/IMG][/URL][/css-div][css-div=" border-style:solid;
border-color:#EAFF00; border-width:1.5px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=3ImY0FGN6Hw&feature=channel_video_title"][IMG]http://img864.imageshack.us/img864/5059/audino.png[/IMG][/URL][/css-div][/COLOR][/FONT][/CENTER][/css-div][/CENTER] 


jigglyppuff8 June 4th, 2011 9:19 AM


Putting one div after another usually results in a line break. Example

[cd=height:auto;]Here's one div [/cd][cd=height:auto; text-decoration: blink;]and here's another div immediately following it.[/cd]
Here's one div
and here's another div immediately following it.


What I did was add the display:inline; property to properly align them one after the other.

[cd=height:auto; display:inline;]Here's one div [/cd][cd=height:auto;display:inline; text-decoration: blink;]and here's another div immediately following it.[/cd]
Here's one div
and here's another div immediately following it.


Also, I would highly recommend NOT using line breaks in PC's CSS. As for the borders, I'm not really sure what happened there.
Spoiler:
[CENTER][css-div="height: 300px; width: 500px; background-color: #000000; border-radius: 75px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-style:ridge; border-color: blue; border-width:5px; padding: 5px;"][center][FONT="Arial Black"][COLOR="White"]All of my shinies
[SIZE="1"](click them to view)[/SIZE]
[css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][IMG]http://img89.imageshack.us/img89/9177/crobat.png[/IMG][/css-div][css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][IMG]http://img818.imageshack.us/img818/8200/amoonguss.png[/IMG][/css-div][css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=z1NvXwm5spE&feature=channel_video_title"][IMG]http://img651.imageshack.us/img651/9154/typhlosionshiny.png[/IMG][/URL][/css-div][css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=wgiCGUxN5Cs&feature=channel_video_title"][IMG]http://img109.imageshack.us/img109/8789/cresseliae.png[/IMG][/URL][/css-div][css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=jIfbrmhEt-s&feature=channel_video_title"][IMG]http://img695.imageshack.us/img695/622/jellicent.png[/IMG][/URL][/css-div][css-div="display:inline; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=3ImY0FGN6Hw&feature=channel_video_title"][IMG]http://img864.imageshack.us/img864/5059/audino.png[/IMG][/URL][/css-div][/COLOR][/FONT][/CENTER][/css-div][/CENTER]

Hybrid Trainer June 4th, 2011 10:13 AM

If you use display:inline-block; instead then you won't get those glitched up borders ^-^

pokewalker June 4th, 2011 10:42 AM

Ok now I have an very not understandable other glitch. lol.



PHP Code:

[SIZE="4"][CENTER][css-div="height: 300px; width: 500px; background-color: #000000; border-radius: 75px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-style:ridge; border-color: green; border-width:5px; padding: 5px;"][center][FONT="BN Machine"][COLOR="White"]All of my shinies
[SIZE="1"](click them to view)[/SIZE]
[
css-div="border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][IMG]http://img89.imageshack.us/img89/9177/crobat.png[/IMG][/css-div][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][IMG]http://img818.imageshack.us/img818/8200/amoonguss.png[/IMG][/css-div][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=z1NvXwm5spE&feature=channel_video_title"][IMG]http://img651.imageshack.us/img651/9154/typhlosionshiny.png[/IMG][/URL][/css-div][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"]
[URL="http://www.youtube.com/watch?v=wgiCGUxN5Cs&feature=channel_video_title"][IMG]http://img109.imageshack.us/img109/8789/cresseliae.png[/IMG][/URL][/css-div][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=jIfbrmhEt-s&feature=channel_video_title"][IMG]http://img695.imageshack.us/img695/622/jellicent.png[/IMG][/URL][/css-div][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][URL="http://www.youtube.com/watch?v=3ImY0FGN6Hw&feature=channel_video_title"][IMG]http://img864.imageshack.us/img864/5059/audino.png[/IMG][/URL]
[/css-div][/COLOR][/FONT][COLOR="White"][css-div="display:inline-block; border-style:solid; border-color:#EAFF00; border-width:1px; height: 96px; width: 96px;"][/css-div][FONT="BN Machine"]My [URL="http://www.pokecommunity.com/member.php?u=119663"][COLOR="Green"][B]teacher[/B][/COLOR][/URL][/FONT][URL="http://www.pokecommunity.com/member.php?u=119663"][/URL][/COLOR][/center][/css-div][center][COLOR="White"][/COLOR][/CENTER][/CENTER][/SIZE

What's basically happening is that the My Teacher part is felling out of my signature, and there is a seperate border without anything in it too. Any suggestions?

o3o June 5th, 2011 10:17 PM

Hey, I'm having this problem with my signature where the quote, multiquote, etc. buttons are showing up alongside or in the middle of my signature.~ I used the float:left property for both the image and the text, so could that have anything to do with it? Thanks. Oh, and it doesn't seem to happen in Firefox, only in other browsers such as Chrome or Safari.

donavannj June 6th, 2011 4:59 AM

Yes, that would be the float:left causing that, most likely.

champagnepapi June 14th, 2011 11:58 PM

Code:

css-div="background-image:url('http://i980.photobucket.com/albums/ae289/CKmaster/chompyplates.png'); width: 300 px; height: 181 px;"][/css-div


So, what did I do wrong with the above code? I removed the brackets on purpose just to display the code, they're intact in the actual thing.

Hybrid Trainer June 15th, 2011 3:07 AM



Dont put a space in between the number and the px
It needs to look like this width: 300px; not width: 300 px;

Gallaceon June 16th, 2011 11:38 PM

I have to use CSS on my forum
Quote:

I think that the CSS feature should be added. It'll make posts and signatures look more snazzy.
Someone on my forum asked me for that..
Can i anyone explain me how can i do so?
I am using vBulletin 4

pokewalker June 20th, 2011 9:44 AM

I have some annoying thing in my signature.... Does anyone know how to fix?


Code:
PHP Code:

[CENTER][title="Hunting! And previous signature got deleted cos it bugged up with some people. New one under construction!"][css-div=" width: 430px; height: 275px; background-image:URL('http://img600.imageshack.us/img600/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; border-radius: 50px; border-style: solid; border-color: #158015;"]












[
URL="http://www.pokecommunity.com/member.php?u=215584"][title="The only true Skylegend"][LEFT][IMG]http://images.wikia.com/pokemon/images/e/e7/Shiny_Swellow_BW.gif[/IMG][/LEFT][/title][/URL][RIGHT][COLOR="#158015"][SIZE="5"][FONT="Slackey"][title="CSS Teacher: Hybrid Trainer"]pokewalker[/title][/FONT][/SIZE][/COLOR][/RIGHT]
[/css-div][/title][/CENTER


Oryx June 20th, 2011 9:52 AM

Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

http://i56.*.com/r7lmc6.png

jigglyppuff8 June 20th, 2011 10:19 AM

If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














pokewalker

I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.


All times are GMT -8. The time now is 11:04 PM.


Like our Facebook Page Follow us on Twitter © 2002 - 2018 The PokéCommunity™, pokecommunity.com.
Pokémon characters and images belong to The Pokémon Company International and Nintendo. This website is in no way affiliated with or endorsed by Nintendo, Creatures, GAMEFREAK, The Pokémon Company or The Pokémon Company International. We just love Pokémon.
All forum styles, their images (unless noted otherwise) and site designs are © 2002 - 2016 The PokéCommunity / PokéCommunity.com.
PokéCommunity™ is a trademark of The PokéCommunity. All rights reserved. Sponsor advertisements do not imply our endorsement of that product or service. User generated content remains the property of its creator.

Acknowledgements
Use of PokéCommunity Assets
vB Optimise by DragonByte Technologies Ltd © 2023.