...

View Full Version : All uppsercase font with bigger first letters



tomharto
01-21-2011, 06:55 PM
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


<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?

Excavator
01-21-2011, 07:01 PM
There is, see http://www.w3schools.com/CSS/pr_pseudo_first-letter.asp

Excavator
01-21-2011, 07:06 PM
You can do it your way too, without the inline styles -

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



span {
font-size: 33px;
color: #f00;
}

tomharto
01-21-2011, 07:08 PM
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?

tomharto
01-21-2011, 07:11 PM
Oops, didnt notice your above post, that works great. Thanks again :)

Excavator
01-21-2011, 07:17 PM
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 -
<!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>

tomharto
01-21-2011, 07:30 PM
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 :)

Apostropartheid
01-21-2011, 09:38 PM
For anyone interested, you can also do this by faking small caps.

Excavator
01-21-2011, 11:06 PM
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 -
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum