CSS Help & Resources Page 22

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

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
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...
Yes. Wrap the entire text block with a single div with that property.

font-family:'Lucida Console','Lucida Sans Unicode',sans-serif (the single quotes need to be in there due to spaces in font names)

Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
Just wanted to ask quick question, what's the code for overlapping text? And shadow text (?) as well please. It's been a while since I've been here and I forgot them. x.x
To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

Text shadow is like this:

text-shadow: right bottom fuzzy color

"right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

Charizard★

Age 28
Female
Seen January 28th, 2019
Posted November 13th, 2018
13,369 posts
13.8 Years


To overlap text you can just position one div on top of another, unless I'm missing some code that idk about, haha.

Text shadow is like this:

text-shadow: right bottom fuzzy color

"right" is how far to the right it is, "bottom" is how far down it is, "fuzzy" is obviously how sharp or not the shadow is, and color is obvious haha.
Not to be nitpicky or anything, but I remember there were more specific codes for doing the shadow and overlap. ._.

Not trying to be rude by saying that x.x


Oryx

CoquettishCat

Age 30
Female
Seen January 30th, 2015
Posted December 27th, 2014
13,184 posts
12.2 Years
Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD

Edit:


Text shadows are shadowy

That code is:

[span="color:#CC99CC;text-shadow:2px 2px 2px #000;font-size:16px;font-family:Arial Black;"]Text shadows are shadowy[/span]


Theme * Pair * VM * PM

Not all men...

Are all men stupid?

That's right.

donavannj

Age 32
Male
'cause it get cold like Minnesota
Seen 4 Hours Ago
Posted 1 Week Ago
22,513 posts
18.2 Years
Text-shadow is the proper code.

There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

text-shadow: -2px 0px 2px #660000;

The above gives us this:

Test text.


EDIT: Oh, you mean the overlap option? *goes to check W3C on it*

EDIT 2: There is no element called overlap. :x
whoops

Charizard★

Age 28
Female
Seen January 28th, 2019
Posted November 13th, 2018
13,369 posts
13.8 Years
Well that is a very specific code for shadow. That's like...the tag for it, lol. How could you get more specific than text-shadow as a tag? o_O

Overlap very well could be though, I don't know anything about that offhand so I definitely believe you that there might be an simpler way that idk about. XD
*facepalm* My bad, not using CSS coding for a while really made me confused .///.

Thanks!

Text-shadow is the proper code.

There are other options for it besides the ones Toujours mentioned, but they relate to exactly where the shadow is placed relative to the original text.

text-shadow: -2px 0px 2px #660000;

The above gives us this:

Test text.


EDIT: Oh, you mean the overlap option? *goes to check W3C on it*
Thanks Donny! :D


Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
In addition to the above values, there is a fourth value, the spread value, just like box-shadow. However support is really spotty for it for text-shadow, since right now only IE10 supports it properly. I wouldn't recommend it, but it can make the shadow thicker or thinner. you can also use it to outline text. :) You will have to do double declarations if you want it to work on everything, one without the spread value, then one with it. It has to be in this order because the latter is deemed invalid in older browsers. And putting the former value later will cause the newer browsers to use the fallback values instead.

Charizard★

Age 28
Female
Seen January 28th, 2019
Posted November 13th, 2018
13,369 posts
13.8 Years

EDIT 2: There is no element called overlap. :x
So, it would be impossible to do this on PC? I remember doing something similar in my signature where the text went a bit higher onto my sig picture and the bottom one kind of overlapped onto it.


Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
Yea that's very possible. In fact I've seen multiple ways of doing it. I prefer to use the margin-top:-10px; code to make the text go upwards slightly when I'm trying to get text to go over whatever image I'm using. It also works with marrgin-bottom and margin-left and margin-right too.
Example:
SOMETEXT
SOMEMORETEXT


[cd=font-size:18pt; color:#333333]SOMETEXT[/cd][cd=margin-top:-13px; margin-left:18px; color:#666666;]SOMEMORETEXT[/cd]

There is a more complex way of doing it which includes making a box that is postion:relative; and then positioning the text or images with the position:absolute; and the top:1px; bottom:1px; left:1px; and right:1px; codes. You can also add in a z-index:1; code as well to determine what is on top of what, giving something a lower number than another object will place it underneath. This methods quite good if you've already mocked up the signature in photoshop or something like that because then you can position it perfectly.
A good example is Toujours' signature, she's always used this way to position the text over images or text over text. totally not avoiding making an example

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
Well Eevee it depends on what you want really. From what you're saying I'm picturing just three images side by side with text underneath like this


Text

which is made using three IMG tags side by side and then using a line break and typing some text.

[center][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img][img]http://cdn.bulbagarden.net/media/upload/0/04/Spr_4p_133.png[/img]
Text[/center]

But I'm guessing you were looking for something different? Care to explain more or show us an example so we can help a bit more?

donavannj

Age 32
Male
'cause it get cold like Minnesota
Seen 4 Hours Ago
Posted 1 Week Ago
22,513 posts
18.2 Years
What I am trying to do is fit inside this box...

This is about the size box I want.


these images with text underneath them.

Eevee


Vaporeon

And so on...
You have the code necessary for the background. All you need to do basically is copy the BBCode Hybrid Trainer posted for the images, alter it to your needs, and put it inside the css-div you made before your text.
whoops

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years



Now how do you put their names underneath their images?
In the same way you did it with the pictures, put the text inside the cd tags like so.

Eevee Vaporeon

[cd="background-color:black;color:white;height:100px;width:200px;"][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Eevee Vaporeon
[/cd]

But if I may, I think this signature would look pretty good if you were to use the [twocolumn] tag so that they could be aligned better :3


Eevee

Vaporeon



[cd="background-color:black;color:white;height:100px;width:200px; text-align: center;"][twocolumn][IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa133.png[/IMG]
Eevee
[IMG]http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa134.png[/IMG]
Vaporeon[/twocolumn]
[/cd]

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
I'm new at the whole CSS thing but after going through a couple tutorials I think I know enough to get by alright. But I've been learning about the HTML coding CSS. I checked in the FAQs and found out that HTML is not used but that BBCode is. What's the difference and how can I adjust to make it compatible.
Sorry, I'm really new to this kind of stuff.
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
Well with the BBCode version you'll be making your own little pocket of CSS. For example if you were to make a heading out of CSS with the BBCode you'd set it out like this
[cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd]
This is a heading.


The red bits are the BBCode, the green bits are the CSS coding and the blue bits are the body text :3
[c*d=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/c*d]
* are put in to stop the code going all screwy, obviously.

It's possible for you to put a cd tag within a cd tag like so
[cd=width:100%; background-color:white;][cd=font-family:Arial; color:#333; font-weight:bold;]This is a heading.[/cd][/cd]

This is a heading.


Do you understand a little better now?

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Yeah, Ill experiment with it a little bit and figure the rest out. Thanks!
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Pokemon Trainer Touko

春野サクラ ♥

Age 24
Female
Konoha ★
Seen June 3rd, 2012
Posted March 7th, 2012
1,712 posts
12.3 Years
Hi! :D
Ok so I was making a thread, and then when I previewed it looooooooooads of random codes randomly appeared ;A; I deleted them and then previewed it again and they magically appeared againnnnnn ;w; halp meeeeeee >w<;;;;;;
⎡ Paired with Vaporeon 7 ★ Deviantart PC family

Hybrid Trainer

Age 28
Him/Them
«UK»
Seen 4 Weeks Ago
Posted January 27th, 2022
2,096 posts
14.5 Years
In assuming you're using Firefox right? Try clicking the view code buttton in the top right hand side I think it is and edit your post directly from there. Alternatively you could use the clear formatting button in the top left and do as much formatting as you can using cd tags.

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
When I type in this:
[c*d=background-image: url('http://photoshopinc.com/free-stock-photo/wp-content/uploads/2009/08/websitetemplatestockphotoassortedbankcards4.jpg')][c*d=text-align: center; color:white; font-family:Arial; font-weight:bold; font-size:20px]Cosmotone8[/c*d]
[c*d=text-align: center; color:white; font-family:Arial; font-size:10px]The One and Only[/c*d][/c*d]

I end up with this chopped up thing.

Cosmotone8

The One and Only
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
When I type in this:
[c*d=background-image: url('http://photoshopinc.com/free-stock-photo/wp-content/uploads/2009/08/websitetemplatestockphotoassortedbankcards4.jpg')][c*d=text-align: center; color:white; font-family:Arial; font-weight:bold; font-size:20px]Cosmotone8[/c*d]
[c*d=text-align: center; color:white; font-family:Arial; font-size:10px]The One and Only[/c*d][/c*d]

I end up with this chopped up thing.

Cosmotone8

The One and Only
Explicitly set a width for the very first div tag. Preferably exactly the same as the image width, as long as you are not using CSS borders

Cosmotone8

silhouette of the past

Male
Boston, MA, USA, Earth, Sun Solar System, Milky Way Galaxy, Universe
Seen July 22nd, 2016
Posted March 20th, 2013
1,758 posts
11.4 Years
Thank you so much! You are a lifesaver!
It now looks like this:
Spoiler:

Cosmotone8-
The One and Only

Owner:CoOwner: Clubs:
I'm a silhouette, asking every now and then
Is it over yet? Will I ever feel again?
I'm a silhouette, chasing rainbows on my own
But the more I try to move on, the more I feel alone
So I watch the summer stars to lead me home.

Ninja Paladin

Male
Northamptonshire, UK
Seen 17 Hours Ago
Posted June 12th, 2018
146 posts
16.5 Years
I don't really understand how to do something like this in css via the forums:

<center><table border="0" cellspacing="0" >
<caption><img src="http://i43.*.com/10ng4ma.jpg" /></caption>
<tr><td><a href="http://vdexproject.net/user.php?user=37392"><img src="http://vdexproject.net/p/37392/partymini.png" /></a></td>
<td rowspan="2"><a href="http://conora.dragonadopters.com/dragon_724477"><img src="http://conora.dragonadopters.com/dragonanimated_724477.gif" /></a></td></tr>
<tr><td><a href="http://my.gpxpl.us/Avara"><img src="http://p.gpxpl.us/TWdY.png" /></a></td></tr>
</table></center>
I do understand some html I just can't quite make the shift to using the variant with have in our sigs.


FC: 2122-7342-8697 IGN: Telrean