• 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?".
  • 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

Xyrin

Xyrin

WOW REMEMBER THIS??
1,065
Posts
15
Years
Okay I got it right but there's one problem. Lemme just show you.

siggeh]
My name is Tanner-Add Xyr1n on XBL-My Twitter-​

See? The box isn't completely on the image, it looks very awkward. It looks even worse actually being in my sig because it goes over the line. :( Here's the code
Code: 
[div=" color: white;cursor: crosshair; background-image:url("http://fc07.deviantart.net/fs70/f/2011/120/3/f/sasuke2_by_xyr1n-d3fadbp.png"); width: 400px; height: 200px;"][div=" background-image:url("http://fc06.deviantart.net/fs70/f/2011/121/e/b/transparent_by_xyr1n-d3fcixf.png"); width: 400px; height: 190px;background-position:top "[div="-moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px;"]siggeh][/div][div="width: 400px; height: 10px;"][div="padding: 2px 2px 2px 2px; border: solid 2px #8B0000; font-variant: small; color: #000000; background-color: #FF0000; opacity: 0.8;"][CENTER]My name is Tanner-Add Xyr1n on XBL-[URL="http://www.twitter.com/xyrin"]My Twitter[/URL]-[/CENTER]

I took out the cssdivs.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
I want to center this, but the code is incredibly kind of messy and I can't get it to center right. :c Any tips? Putting it in code tags because it does weird things when I post it with my sig, but it's just the code I use for my sig.

HTML: 
[div="align:center;"][div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/div][/div]    [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/div][/div] [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/62648270@N04/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/div][/div] [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/div][/div][/div]
 
Xyrin

Xyrin

WOW REMEMBER THIS??
1,065
Posts
15
Years
Toujours said:
I want to center this, but the code is incredibly kind of messy and I can't get it to center right. :c Any tips? Putting it in code tags because it does weird things when I post it with my sig, but it's just the code I use for my sig.

HTML: 
[div="align:center;"][div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;decoration:none;"][b][i][title="Catch all Pokemon available in Unova"]Current Goal[/title][/i][/b][/div][/div]    [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][title="88/174, 48%"][color=#ffcc99]P[/color]rogr[color=#ffcc99]ess[/color][/title][/i][/b][/div][/div] [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][b][i][url="http://www.flickr.com/people/62648270@N04/"][color=#ffcc99]Flic[/color][color=#5e2612]kr[/color][/url][/i][/b][/div][/div] [div="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][div="font-size: 12px; color:#5e2612; text-align: center; padding-top:135px;"][title="Signature created by me, images from DeviantArt"][b][i][color=#ffcc99]Si[/color]gnatur[color=#ffcc99]e[/color][/i][/b][/title][/div][/div][/div]
Click to expand...

I'm not all that great at CSS but couldn't you use the BB code to align everything?
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
Xyrin said:


I'm not all that great at CSS but couldn't you use the BB code to align everything?
Click to expand...

I tried that at first, but I think the float:left ruins that, but I need that to put the boxes all on one line, soooo idk. D;
 

jigglyppuff8

⑧
2,319
Posts
16
Years
Current Goal
Progress
Signature

Spoiler:


Basically, what I did was put the rest of your CSS into another div, gave that div a defined height and width, and then centered that div. I'm not sure if it's a good method, but it works for me. Also, for PC CSS, cd > css-div. It's shorter and easier to manage.

Also also, image width limit is 500px. You might want to consider resizing since you have 600px.
 

Oryx

CoquettishCat
13,184
Posts
13
Years
  • Age 31
  • Seen Jan 30, 2015
jigglyppuff8 said:
Current Goal
Progress
Signature

Spoiler:


Basically, what I did was put the rest of your CSS into another div, gave that div a defined height and width, and then centered that div. I'm not sure if it's a good method, but it works for me. Also, for PC CSS, cd > css-div. It's shorter and easier to manage.

Also also, image width limit is 500px. You might want to consider resizing since you have 600px.
Click to expand...

Changed it, thank you very much :D
 

Neptune Vasilias

1,142
Posts
13
Years
HELP!!!! SOS!!! PLEASE HELP THIS DAMSEL IN DISTRESS! >.<

So, I was tasked (actually, volunteered but it doesn't matter now) to host the bimonthly RPA in the RP forum and I was using CSS for the OP. So I did everything nicely to the best of my beginner abilities(Which sucks, thank you very much). The problem is, that once I click the 'Preview' button, somehow extra useless CSS codes pop out from nowhere and insert themselves into the text, thus disrupting the overall flow. And I kept on deleting those redundant codes but they're still there up till now. I've probably spent hours trying to solve this and I drifted by this thread and hope that someone can hopefully save me from drowning in despair. >_<

Here's the CSS.
Spoiler:
Spoiler:


Look it even has to spill out of the spoilers. I'm so pathetic at CSS. >_<
 
Impo

Impo

Playhouse Pokemon
2,458
Posts
14
Years
Actually, that's a common problem. I have had it too.
I think the computer reads the beginning of the code, but gets confused and believes you forgot the ending, and tries to create one for you.

To remedy this try writing the code with the editor mode switched (top right button, the underlined A and the normal A.
 

abnegation

10,673
Posts
15
Years
  • Age 30
  • Seen Dec 30, 2023
It happens when you use BB code on your CSS so if you have this for example

[css-div="color: black

It's going to mess up because your codes are mixed up in BB code. Refer to the post above mine for what to do.
 

Neptune Vasilias

1,142
Posts
13
Years
Impo said:
Actually, that's a common problem. I have had it too.
I think the computer reads the beginning of the code, but gets confused and believes you forgot the ending, and tries to create one for you.

To remedy this try writing the code with the editor mode switched (top right button, the underlined A and the normal A.
Click to expand...

Abnegation said:
It happens when you use BB code on your CSS so if you have this for example

[css-div="color: black

It's going to mess up because your codes are mixed up in BB code. Refer to the post above mine for what to do.
Click to expand...
Thanks to both of you. I switched to editor mode and cleaned up the messy codes and now it's A-Ok. :D

XOXO~
 
Ooka

Ooka

[font=Maven Pro][color=#A75EE2]Cosmic[/color][/fon
2,626
Posts
16
Years
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★

Charizard★

13,373
Posts
14
Years
  • Age 29
  • Seen Jan 28, 2019
Is there a code so that I can get text on the side of my image?

Ex.:

consideration.png
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?
 

jigglyppuff8

⑧
2,319
Posts
16
Years
[image="left"][/image] "moves it all the way to the left" so to speak. Or at least more left than the default. Compare

consideration.png
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?
 
Last edited:
You must log in or register to reply here.
Back
Top