|
|
|
|
![]() ![]() |
Feb 10 2008, 05:43 PM
Post
#1
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 258 Joined: 18-July 07 From: Slough (UK) Member No.: 46,682 |
Hello,
I would like to ask a question about setting a style for titles on my web site. So far I have managed to set my titles with a different capital by doing this: CODE h1.title:first-letter {color: gold; font-size=xx-large; font-style: oblique; background: black}; Then my titles come out with a big golden italic capital in a black box, and I get there by doing CODE <h1 class="title">Blablablablabla</h1> However, if I also want a certain background for the rest of my title, eg. a golden background or even a background image, how do I set that in the same "h1.title" setting? The setting h1.title:first-letter only seems to affect the first letter. Also, I want this to only affect my headers for titles, not just any header (h1). Is there anyone who can help me out here? Thanks in advance. |
|
|
|
Feb 10 2008, 05:58 PM
Post
#2
|
|
|
Ephesians 6:10-17 ![]() Group: [MODERATOR] Posts: 1,864 Joined: 22-June 05 From: The World of Gentoo Member No.: 8,528 ![]() |
Remove :first-letter and modify a bit:
CODE h1.title { background: gold; } For background image: CODE h1.title { background-image: url(path_to_image.ext); } Do note, however, that the golden background may cause some visual issues with the first letter of the H1 element with the title class. |
|
|
|
Feb 10 2008, 06:05 PM
Post
#3
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 258 Joined: 18-July 07 From: Slough (UK) Member No.: 46,682 |
Remove :first-letter and modify a bit: CODE h1.title { background: gold; } For background image: CODE h1.title { background-image: url(path_to_image.ext); } Do note, however, that the golden background may cause some visual issues with the first letter of the H1 element with the title class. Thank you for your reply, truefusion. However, doing it your way removes the special capital at the beginning of the title, which is exactly what I would like to keep. |
|
|
|
Feb 10 2008, 06:53 PM
Post
#4
|
|
|
apt-get moo ![]() Group: [MODERATOR] Posts: 2,054 Joined: 28-May 05 From: Hertfordshire, England Member No.: 7,593 ![]() |
If I understand what you want, you just need two declarations to get it done.
CODE /* Applies to all the other letters */ h1.title { color: #0000FF; font-size:0.1em; background-color: #FF00FF; }; /* Applies only to the first letter */ h1.title:first-letter { color: gold; font-size=xx-large; font-style: oblique; background: black }; I see no reason why it can't be done that way. |
|
|
|
Feb 10 2008, 07:01 PM
Post
#5
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 395 Joined: 8-January 08 From: UK - Kent Member No.: 55,950 |
Yes it shoudl work like that because the specific letter will overright the specifications set in the previous statement!
|
|
|
|
Feb 10 2008, 08:39 PM
Post
#6
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 258 Joined: 18-July 07 From: Slough (UK) Member No.: 46,682 |
Thanks for your help.
That did the trick. |
|
|
|
![]() ![]() |
Similar Topics
| Topics | Topics | |
|---|---|---|
|
|
|
|
Lo-Fi Version | Time is now: 25th July 2008 - 10:51 AM |