CSS Help & Resources

[Xyrin]

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

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

 

[donavannj]

Then adjust the height of it until it does line up. :\

 

[jigglyppuff8]

That's probably more a fault with the image itself than the code. Try hosting the image elsewhere.

 

[Oryx]

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.

[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]

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.

[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]

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

 

[Oryx]

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

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]

Current Goal

Progress

Flickr

Signature

Spoiler:

[CENTER][cd=height:150px; width:600px;][cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][cd="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][/cd][/cd][/cd][/CENTER]

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]

Current Goal

Progress

Flickr

Signature

Spoiler:

[CENTER][cd=height:150px; width:600px;][cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/RedCharizard.png"); width: 150px; height: 150px; float:left;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Green.png"); width: 150px; height: 150px; float:left; position:relative; left:10px;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Blue.png"); width: 150px; height: 150px; float:left; position:relative; left:20px;"][cd="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][/cd][/cd] [cd="background-image:url("http://i1090.photobucket.com/albums/i379/sraeo/Yellow.png"); width: 150px; height: 150px; float:left; position:relative; left:30px;"][cd="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][/cd][/cd][/cd][/CENTER]

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.

Changed it, thank you very much :D

 

[Neptune Vasilias]

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:

WELCOME TO THE RPA ★

RPA means Role-Player Awards/Role-Play Awards
​

Voting will close on May 31st.
There are eight categories. Four where people can be voted for and four where roleplays can be voted for.
You must have posted more than once in the RP forum to be allowed to post a vote!

CATEGORIES

​

[BEST ROLEPLAYER] - For this you should nominate the person who, according to you, have been the best player this month. Maybe they have been incredibly creative with their posts? Maybe they have been in several RPs and managed to do well in all? Maybe they write very long and vivid posts that you just love to read?

[BEST GAME MASTER] - For this you should nominate the person who, according to you, have been the best GM this month. Maybe they made an extremely exciting RP? Maybe they always give answers and keeps things clear and understandable? Maybe they are dealing with members in a very mature and professional way?

[BEST SU-WRITER] - For this you should nominate the person who constantly writes the best SUs. Maybe their SUs are always very long and in-depth? Maybe their character(s) have very interesting personalit(ies) and histor(ies)? They have to have at least participated in more than one RP!

[FUNNIEST ROLEPLAYER] - For this you should nominate the person who never fails to tickle your funny bone while roleplaying. Maybe their character(s) always seem to get in ridiculous trouble or in a blunder? Maybe they have an unusual trait of purposefully-bad spelling? Maybe their character(s) are chief pranksters and nuisances?


[BEST ROOKIE RP] - For this you should nominate the RP that, according to you, have been the best RP created this month or last month, meaning it has to have been created in April or May 2011.


[BEST VETERAN RP] - For this you should nominate the RP that, according to you, have been the best RP created before this month or last month, meaning it has to have been created in April 2011 or earlier.

[BEST POKEMON RP #1] - For this you should nominate the RP that according to you, have been the best created from the previous RPA to the current one, meaning it has to have been created from March onwards. The RP has to be Pokemon-related.

[BEST OTHER RP #1] - For this you should nominate the RP that according to you, have been the best created from the previous RPA to the current one, meaning it has to have been created from March onwards. The RP has to be Non-Pokemon-related.

RULES & REGULATIONS

​

Spoiler:

• Once again, you must have posted more than once in the RP forum to be allowed to post a vote.
• You don't need to motivate your votes. You are allowed to, but keep it brief in that case.
• Don't post chit-chat in here. ONLY POST YOUR VOTING FORM.
• You may freely edit your votes until the deadline- May 31st.
• You don't have to be in a certain RP in order to vote for it.
• You CAN'T nominate yourself or your own RP. This is important.

The winners of the Best ROOKIE RP, Best VETERAN RP, Best Pokemon RP #1 and Best Other RP #1 will get their titles changed to include this. The winners of Best Roleplayer, Best Game Master, Best SU-Writer and Funniest Roleplayer will get emblems! So, find out what your favorites in all four categories are (look closely at the dates they were created, for the RP categories) and post your Voting Form here! And maybe, shape up out there in the roleplays you are active in, and just maybe you will be the one who wins?

VOTING FORM

​

Best Roleplayer of May: (this person must have been a player in at least one RP!)

Best Game Master of May: (this person must have been the creator of at least one RP!)

Best SU Writer of May: (this person must have at least taken part in more than one RP!)

Funniest Roleplayer of May: (this person must have at least taken part in more than one RP!)

Best Rookie RP of May: (this RP has have to been created in April or May 2011!)

Best Veteran RP of May: (this RP has to have been created before April 2011!)

Best Pokemon RP #1 May: (this RP has to have been created from March onwards!)

Best Other RP #1 May: (this RP has to have been created from March onwards!)

Ask me if anything is unclear.
Have fun, and good luck!~

​

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

 

[Impo]

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]

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]

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.

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.

Thanks to both of you. I switched to editor mode and cleaned up the messy codes and now it's A-Ok. :D

XOXO~

 

[Neptune Vasilias]

Another question, does anyone know how to make text boxes in signatures rounded at the corners? The one I'm constructing now looks ugly with the sharp corners of the rectangle.

 

[Skip Class]

I remember answering a question like that a while ago

You add just change the roundness of a rectangle box:

-moz-border-radius: 12px; -webkit-border-radius: 12px;

Just change how many px to how rounded you wanted to be

 

[Neptune Vasilias]

I remember answering a question like that a while ago

So do I add together with the box code or place it separately?

 

[donavannj]

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]

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★]

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

Ex.:

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]

[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]

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

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?