How to make text like logo in this case? - html

Question

See my website here http://1-dot-speaklikewater.appspot.com
and the code
<img style="vertical-align: middle;" src="speaklikewaterlogo.png" />
<a href='index.jsp' class='linkButton' >Home</a>
.linkButton:link, .linkButton:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.linkButton:hover, .linkButton:active {
background-color: green;
color: white;
}
This's ok, but the image quality is not good because when users magnify the page the image got blurred.
No, I don't want to use image as logo. I want to use Text like a logo.
Can you do the Exactly same thing like the above website but this time we use Text instead of image for logo. So it should look like this, but the middle of "Home" and the middle of the text logo should be on the same line?
SpeakLike
Water.com Home ...
Can we achieve that?

Answer 1

Can we achieve that?
Sure here is an example how to do this;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
line-height: 44px;
vertical-align: middle;
}
li a {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: block;
line-height: 1;
font-weight: bold;
}
.logo-box {
margin-right: 10px;
}
.logo-line {
display: block;
line-height: 22px;
color: #D42424;
font-weight: bold;
}
<ul>
<li>
<div class="logo-box">
<span class="logo-line">SpeakLike</span>
<span class="logo-line">Water.com</span>
</div>
</li>
<li>Home</li>
<li>Online Users</li>
<li>Method</li>
<li>Lesson</li>
<li>Conversation</li>
<li>Register</li>
<li>Login</li>
</ul>

Answer 2

I'm going to assume you know how to display text and style it, if you need me to explain, just say so.
This leaves the problem of centering the logo with "Home". You have two options to do this
1) Margin
.logo {
margin-top: -20px;
}
This will shift the .logo up 20px. Adjust margin as needed to properly center.
2) Position
.logo {
position: relative;
top: -20px
}
This does the same thing, but uses positioning instead of margins. This option is better in terms of having less hacky CSS.

Answer 3

Yes, you can use an <h1> element and style the text accordingly (you can even use web fonts, if you wish). Something like:
h1 {
color: #cc0000;
font-family: "Times New Roman", serif;
width: 100px;
word-wrap: break-word;
font-size: 20px;
float: left;
}
ul {
list-style-type: none;
position: relative;
top: 30px;
}
ul li {
float: left;
margin: 0 10px;
}
<h1>SpeakLikeWater.com</h1>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>