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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts

    All uppsercase font with bigger first letters

    For the navigation on a site im making I'm doing all uppcase letters but i want the first letter to be bigger, so something like

    Code:
    <font size="+2">H</font><font size="+1">OME</font>
    That seems like a lot of work and unnecessary code, is there a simpler way of doing this?
    Last edited by tomharto; 01-21-2011 at 08:00 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You can do it your way too, without the inline styles -

    <a href="#"><span>H</span>OME</a>

    Code:
    span {
    	font-size: 33px;
    	color: #f00;
    }
    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

  • Users who have thanked Excavator for this post:

    tomharto (01-21-2011)

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Thanks, that kinda what I need, but instead of first letter of the block of text I need it first letter of every word, can i add first-letter to a link style like you can :hover?

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Oops, didnt notice your above post, that works great. Thanks again

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by tomharto View Post
    Thanks, that kinda what I need, but instead of first letter of the block of text I need it first letter of every word, can i add first-letter to a link style like you can :hover?
    Have a look at this. Just copy/paste the whole thing into a new .html document and view it in your browser -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    }
    #container {
    	width: 800px;
    	padding: 50px;
    	margin: 30px auto;
    	background: #999;
    }
    a span {
    	font-size: 1.8em;
    	color: #f00;
    }
    a:link,
    a:visited {
    	margin: 0 20px;
    	color: #000;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    a:hover,
    a:active {color: #f00;}
    	a:hover span,
    	a:active span {color: #0f0;}
    </style>
    </head>
    <body>
        <div id="container">
            <a href="#"><span>h</span>ome</a>
            <a href="#"><span>a</span>bout</a>
            <a href="#"><span>b</span>log</a>
        <!--end container--></div>
    </body>
    </html>
    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

  • Users who have thanked Excavator for this post:

    tomharto (01-21-2011)

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    827
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Thank you , ill have a look through that, one thing im not very good at is the CSS a:xxx things, so im sure ill learn lots from that

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    For anyone interested, you can also do this by faking small caps.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It can be done without the <span> too. If you give the anchor display: block; then the pseudo-class first-letter works.

    Look at this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    }
    #container {
    	width: 800px;
    	padding: 50px;
    	margin: 30px auto;
    	background: #999;
    } 
    a:link,
    a:visited {
    	margin: 0 20px;
    	color: #000;
    	float: left;
    	display: block;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    a:hover,
    a:active {color: #f00;}
    a:first-letter {color: #f00;}
    a:hover:first-letter {color: #0f0;}
    </style>
    </head>
    <body>
        <div id="container">
            <a href="#">home</a>
            <a href="#">about</a>
            <a href="#">blog</a>
        <!--end container--></div>
    </body>
    </html>
    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


  •  

    Posting Permissions

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