This Week

Since my website looks the way it is supposed to, what I'm working on now is trying to get it to be mobile-compatible. Mr. Elkner is letting me borrow his book, titled "Responsive Web Design with HTML5 and CSS3"

When I start getting somewhere and begin to learn the information I'm looking for, I'll check back in :)

SUCCESS!

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.

Go look for yourself! LOOK AT MY COOL LION WEBSITE THAT HAS NOTHING TO DO WITH LIONS!

Hope you like it :)

Week of April 12th

Soooooooooo this blog is quite frustrating. The picture of the lion looks amazing- until I start actually putting things on the blog. I had a problem with the last blog I was making as well. I've figured out that it's because of the max-width element I put in the body. I took that out, but it didn't do anything.

This is my CSS and HTML code. Below is a picture of how the lion is supposed to look:

This is how it looks with text:

The difference is noticeable and it's very annoying. There's a website that has a kind of tutorial that I'm going through, but I haven't found any solutions to my problem so far. I was thinking about putting all of the text in a div, but I'm not sure if that would do anything. Oh well, we'll see.

Here's the link: My Lion Blog (:

Fourth Quarter

What shall I do fourth quarter? I want to continue with the blog I made because it's a lot of fun. Plus, when I get distracted, the blog is kind of my way out of that. Some of the things I want to learn are:

• How to use percentages/ pixels so that my webpage displays properly on any computer screen

• How to properly use divs/ sections to have multiple (as in, more than two) columns on a page

I'll keep the blog I have now, and continue working on my Breaking Benjamin fan page. On that site, I am going to embed videos and lyrics, and have multiple different pages linked off of the home page.