Text alignment to make a logo with HTML & CSS issue

Development Web Development
1

So I'm making a website for college, and I'm trying to add a logo to my header.
My logo isn't a picture, it's just 2 letter's using a fancy font from Google's web fonts.
And I can't get it to position properly. I am new, so it could be really obvious.

HTML

<header id="banner">
<hgroup id="logo">
	<aside id="logoPic">JS</aside>
	<h1 id="logoH1">John Smith</h1>
	<h2 id="logoH2">Web Development Assessment 1</h2>
</hgroup>
</header>

CSS

#banner{
height: 100px;
width: 100%;
background-color: #42A5F5;
color: white;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

logo{

margin-left: 10%;
float: left;
padding: 20px;
padding-left: 0px;

}

logopic{

float: far-left;
padding-top: 0;
line-height: 1em;
font-weight: normal;
font-family: 'Monoton', cursive;
font-size: 2em;

}

logoH1{

float: center;
padding-top: 0;
line-height: 1em;
font-weight: normal;

}

logoH2{

text-transform: uppercase;
font-size: 1.2em;
line-height: 1em;
font-weight: normal;

}

What it looks like.

tekhelp1.png840x525 142 KB

What I want it to look like.

tekhelp2.png840x525 142 KB

2

Float your H1 and H2 to the right and within your CSS for banner set a maximum width in terms of pixels, not percentage.

1 Like
3

Another alternative to what you already have is to use a table to achieve the same result.

<table>
	<tr>
		<td rowspan="2" id="logoPic">JS</td>
		<td id="logoH1">John Smith</td>
	</tr>
	<tr>
	        <td id="logoH2">Web Development Assessment 1</td>
	</tr>
</table>
1 Like
6

Thanks everyone!
Got it all sorted, but I'll take what you've all said into future web development.