Link to home
Start Free TrialLog in
Avatar of jknj72
jknj72

asked on

HTML Question

Im trying to make my Master page a little more presentable. I have an app that I built and we have named it EAST(its an acronym for Expense Account Submission Tracking). I want to display the E, A, S and T in caps(id like it in some type of block font in gray, and the small letters in black, but I will figure that part out).
So at the top of my page I had the following:
        <div id="header" >
            <div id="title" >
                <h2>
			        <asp:HyperLink ID="HyperLink1" NavigateUrl="UserLogin.aspx" ForeColor="White" runat="server">CRIB</asp:HyperLink>
                </h2>
                <div style="width:auto; height: 45px;">  --HERES MY ISSUE
                    <h2>E</h2>xpense<h2>A</h2>ccount<h2>S</h2>ubmission<h2>T</h2>racking                                                    
                 </div>
            </div>
            <br />
            <div style="float:right;padding-right:125px;padding-top:10px">
                <asp:UpdatePanel ID="upUserLabel" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="lblUser" runat="server" ForeColor="White" Width="260px" Font-Bold="true" style="margin-right: 20px;text-align:right;"></asp:Label>
                    &nbsp;&nbsp;         
                        <asp:LinkButton ID="lnkSignOut" runat="server" Text="Sign Out" ForeColor="White" PostBackUrl="~/UserLogin.aspx" OnClick="lnkSignOut_Click" Visible="true"  ></asp:LinkButton>
                    </ContentTemplate>
                </asp:UpdatePanel>                                                                                                                       
                
            </div>
        </div>

Open in new window


My problem is that the letters are going from top to bottom rather then from left to right?
It looks like this:

E (in caps)
xpense (lower case)

A
ccount

S
ubmission

T
racking


Im simply trying to figure out what I need to do to have this display from left to right. Also, if anyone knows any nice fonts or images of the capital letters please let me know your thoughts.  

Thanks for your help!!
Avatar of it_saige
it_saige
Flag of United States of America image

It is because you are using the H2 tag which causes a line break...  Instead, use something like 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>
p{
    text-transform:capitalize;
    font-variant:small-caps;
    font-weight:bold;
    font-size:-webkit-xxx-large;
}

</style>
</head>

<body>
<p>Expense Account Submission Tracking</p>
</body>
</html>

Open in new window

Sample output -User generated image
-saige-
ASKER CERTIFIED SOLUTION
Avatar of Paul MacDonald
Paul MacDonald
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jknj72
jknj72

ASKER

Thank you both for your replies
Saige:
I didnt get the upper case and lower case in my logo? Not sure if it was something I did wrong but see pic and your logo is on top
Paul:
This worked for me so thank you.

Im gonna post another question for possible ideas on how to make logo a lot nicer. I wanna make it pop but Im not real good with design and CSS so any tips you have would be appreciated
Avatar of jknj72

ASKER

thanks Paul
Avatar of jknj72

ASKER

image attachedUser generated image
Happy to help.  Thanks for the points.