CSS Help & Resources Page 21

Started by seeker November 16th, 2009 5:38 PM
  • 175331 views
  • 902 replies

Impo

Playhouse Pokemon

Male
Earth
Seen 1 Week Ago
Posted December 7th, 2021
2,456 posts
13.3 Years
Ok I think that's done it. What I've done is created a box and set it to relative using the position: code. I've also added on a bit of a margin to the right so that the text isn't poking out the side :3



3,600+


Mario Kart 7 Sig Collab

Paired to DragonOmega & Shining Raichu

.



Or failing that we could just get a mod/the original poster to add stuff in? xD
oh my god. You are amazing. Thank you so much :D !
I really appreciate it :D !

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
You might want to move it left ~5-10 pixels though because right now it shows a horizontal scroll bar at least on my screen. It's not outside the rules but it ruins the effect a bit :(


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
You could just make another div, like [cd="background-image:url('image.png');width:533px;height:270px;"][/cd]...that's what I would do at least.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Mew~

THE HOST IS BROKEN

Seen April 13th, 2016
Posted April 12th, 2016
4,163 posts
14.2 Years
I had a similar problem a while back. I'd get rid of the opacity tag, and put in a transparent image as the background image. For example;


Just quote this post and steal the code...
There was nothing. Followed by everything. Swirling, burning specks of creation that circled life-giving suns. And then we reached to the light.

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
Or if you're willing to break compatibility with older browsers, try RGBA or HSLA colours at background-color. (instead of a hex value, rgba(a,b,c,d) and something similar for hsla - for rgba, a,b,c = in terms of 255, and d = in terms of 0.00 to 1.00) It's more of a convenience tool, though. For graceful degradation, put a duplicate background-color with the expected hex value or rgb value before the alpha-enabled one. On the other hand, PNG transparency is waaaaay easier and works with more browsers. It's probably a better idea to not fiddle with the CSS and replace the background-color with an image.

donavannj

Age 32
Male
'cause it get cold like Minnesota
Seen 4 Hours Ago
Posted 1 Week Ago
22,513 posts
18.2 Years
Or if you're willing to break compatibility with older browsers, try RGBA or HSLA colours at background-color. (instead of a hex value, rgba(a,b,c,d) and something similar for hsla - for rgba, a,b,c = in terms of 255, and d = in terms of 0.00 to 1.00) It's more of a convenience tool, though. For graceful degradation, put a duplicate background-color with the expected hex value or rgb value before the alpha-enabled one. On the other hand, PNG transparency is waaaaay easier and works with more browsers. It's probably a better idea to not fiddle with the CSS and replace the background-color with an image.
PNG transparency isn't necessarily easier if you don't have graphical editing skills in the first place, or if the code is easier for you to work with than a program like Photoshop.
whoops

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
PNG transparency isn't necessarily easier if you don't have graphical editing skills in the first place, or if the code is easier for you to work with than a program like Photoshop.
I know, but this time, it's just a single color. Chances are, even if software is missing, a download of Paint.NET or GIMP, filling in the color values and painting the background image at once... (make another layer in GIMP first)

Mew~

THE HOST IS BROKEN

Seen April 13th, 2016
Posted April 12th, 2016
4,163 posts
14.2 Years
I'm compiling a guide/database to Best Wishes for the Pokémon Anime Section, and I was just wondering what codes can I use to make a quick links in the top right hand corner like this thread;
http://www.pokecommunity.com/showthread.php?t=209543
There was nothing. Followed by everything. Swirling, burning specks of creation that circled life-giving suns. And then we reached to the light.

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
That's actually a BB code mew :3
It's called an anchor. You need to use the a id code (here) and the aurl code (here)
It's kinda complicated at first but it's easy to pick up once you've done it a few times.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
Okay after struggling with this for a really long time I'm giving up. This sig is like one pixel too tall and idk where that 1 pixel is coming from or how to fix it. I tried all the tricks I found online to get rid of empty boxes in the case of relative positioning and in the end that helped some but now I can't....get rid...of the pixel...going to lose my mind. Please help. :(

Emi
Ibarazaki



Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
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.

Seen January 26th, 2014
Posted December 31st, 2013
258 posts
11.4 Years
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!

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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:
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.
Seen January 26th, 2014
Posted December 31st, 2013
258 posts
11.4 Years
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:
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?

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
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
Seen January 26th, 2014
Posted December 31st, 2013
258 posts
11.4 Years
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...