I DID IT!

I FINALLY figured out how to get my header to look normal! I googled CSS positioning and also looked through the online book I'm studying, and it helped me out!

Here's what my CSS looked like at first:

header {
    position: fixed;
    margin-right: 2%;
}

I thought the fact that I had display: table; was messing it up, but what I found out was SO simple, it hurts. Here's my new CSS:

header {
    position: fixed;
    right: 2%;
}

THAT'S IT. All I had to do was take out the margin! Now, this is what it looks like:

Good week

I figured out how to get my header to stay where it is:

header {
    position: fixed;
}

The only problem is, when I fix the position, it moves the header over so that not all of it is visible. I'll show you:

BEFORE

 

AFTER

See what I mean? It's annoying and I haven't yet figured out how to fix it. I think it has something to do with the fact that I have

header {
    display: table;
}

in my CSS. Maybe not, but that's all I can think of. Everything is valid, so it's not some discrepancy that is messing everything up. Any ideas?

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.

This week's progress

Sooooo this week I've been working on my family reunion website. It's coming along pretty well. I only have the home page and the directory started; the others are still not made yet.

In the directory page, I have a table that I will eventually have everyone's contact information set up in. Next week, I'm going to work on adding lines in the table to separate the columns so that it looks a little neater. It doesn't sound like it will be hard, but I will be learning all new things.

Here's a link to what I've done so far:

Home Page

Directory

I'll blog again on Tuesday, if not earlier, to go into detail a little more. I forgot to blog until the last minute today, so this is just a quick run-through.