Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    inline-block on first-letter?

    hello!
    I'm a beginner when it comes to css (sort of; I've been fiddling with it for years, but only now I decided to actually try and learn it properly..) and I'm sorry about this silly question
    I tried making decorative first letters in quotes... well, here is what I did:

    blockquote:first-letter{
    display: inline-block;
    color: #000;
    font-family: serif;
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin: 0px auto;
    font-weight: bold;
    background-image: url("http://i50.tinypic.com/vggze0.gif");
    }

    only to realize that width and height properties don't work, even with inline-block, since it's a letter... is that right? But shouldn't it work, being an inline-block element? Is it a browser bug or do I just not get it? If that's the case, can someone point me in the right direction? I couldn't find much information on inline-block that led me to think otherwise.
    thanks in advance!

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Simple method:

    Code:
    blockquote:first-letter {
        text-transform: uppercase;
    }
    You should always target the elements you want to style i.e

    Code:
    h1.myclass a:first-letter {
        text-transform: uppercase;
    }
    that means: H1 of myclass find "a" tag change first letter to uppercase

    When you show code on this forum please place your code with in [CODE][/CODE]

    Thankyou

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Chell,

    and a warm welcome to these forums.

    I think that it might be safer to use the "span element" for your project.

    Check out the attachment to see it in operation.


    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    Chell (12-30-2012)

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by tempz View Post
    Simple method:

    Code:
    blockquote:first-letter {
        text-transform: uppercase;
    }
    You should always target the elements you want to style i.e

    Code:
    h1.myclass a:first-letter {
        text-transform: uppercase;
    }
    that means: H1 of myclass find "a" tag change first letter to uppercase

    When you show code on this forum please place your code with in [CODE][/CODE]

    Thankyou
    ah, I see! I'm sorry, I actually checked a few other topics to see if there was a 'code' tag but I didn't see it being used, so I ended up not using it. That's better, thank you.
    I understand that! I wanted to make decorated first letters especifically in blockquotes, so in that particular case there wouldn't be much use for first-letter, is that right?

    Quote Originally Posted by coothead View Post
    Hi there Chell,

    and a warm welcome to these forums.

    I think that it might be safer to use the "span element" for your project.

    Check out the attachment to see it in operation.


    coothead
    Whoa, thanks a bunch! The span alternative sure works well (it looks great too) and I guess it's the most semantically correct way of doing it, yes? But that would require extra coding as well. So I'm guessing there isn't any way of doing it 'automatically' using only CSS?

    Thanks so much for the help, both of you!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello Chell,

    So I'm guessing there isn't any way of doing it 'automatically' using only CSS?
    I think first-letter can still do a lot for you. Span might be easier to do but with a little setup ahead of time, it would be easy to apply first-letter to new entries.

    Something like this -
    Code:
    p:first-letter {
    	margin: 5px 10px 0;
    	padding: 18px;
    	float: left;
    	font-size: 4em;
    	border-radius: 5px;
    	box-shadow: 0 0 10px -2px #999999;
    	background: #3399FF;
    	color: #fff;
    }
    Your quote marks might work well as an actual background image.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Chell,



    I think first-letter can still do a lot for you. Span might be easier to do but with a little setup ahead of time, it would be easy to apply first-letter to new entries.

    Something like this -
    Code:
    p:first-letter {
    	margin: 5px 10px 0;
    	padding: 18px;
    	float: left;
    	font-size: 4em;
    	border-radius: 5px;
    	box-shadow: 0 0 10px -2px #999999;
    	background: #3399FF;
    	color: #fff;
    }
    Your quote marks might work well as an actual background image.
    Ah, yes, I see! That works too. Thanks a bunch! I guess I'll be going with something like that.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •