So I figured out how to fix my blog! The problem was so simple..... Mr. Elkner suggested that I validate it to see what was wrong, and the only problem was that I accidentally closed an
<li> with a
</ul> instead of with a
</li>. So I fixed that, and the lion is back in proportion.
I added
background-attachment: fixed so that the lion doesn't scroll with the text on the screen, and it looks really nice. The thing that I struggled with was getting rid of all of the unnecessary tags that I was using and replacing them with fewer, less complicated tags. For example, I had the title of my blog and the icon inside
<section> tags, when it really should have been inside a
<header> tag. I also had
<br><br><br><br><br> under what is now my header to put a space between the title and the beginning of my posts. Instead of using a whole bunch of breaker tags, I replaced that with
margin-bottom: 5% in my CSS.
The biggest problem I had was getting the title and icon to stay in the upper right hand corner. I ended up putting them in a <div> to separate it from everything else, and added
float: right to my CSS. This is what I did to my CSS:
header {
display: table;
width: 100%;
text-align: right;
margin-bottom: 5%;
}
header
div {
display: inline-block;
text-align: right;
float: right;
}
header
img {
display: inline-block;
float: left;
height: 100px;
width: 100px;
padding: 2%;
}
header
h1 {
display: inline-block;
font-family: 'Covered By Your Grace', cursive;
font-size: xx-large;
float: left;
}
Everything looks perfect now. As you can see, I changed a lot of the pixels to percentages so that the page will look good on any size screen. I'll post the link below, as well as a screenshot of the page, so you can see yourself.
I've begun to look at the book 'Responsive Web Design with HTML5 and CSS3'. I'm hoping that that will help me make my site mobile compatible :)
This is what it looks like now. Isn't that sooo much better? I was even able to add my Korean nuke picture in without it messing up the alignment!
Ignore my computer background, haha! I made the screen smaller so you can see how it adjusts.
I scrolled down so you can see how the lion doesn't move, even when the text does.
Hope you like it :)
