If you just happened to pass by and aren’t sure what I’m talking about, you can read the Achieve a Goal Challenge Page
I use this challenge to get rid of some back log tasks I have ‘laying around’.
Task of this week
For the first challenge post I chose the task to create a more neat homepage.
Content of task
Every element its own spot
Before I started this task I had one bigger area to work with for my home page, because I use a full width page of this template. I didn’t want to have a widget on the front page. I tried to keep everything in place, but I encountered issues. Html can act funny if it has room to do that. Therefore, I ruled it was time to throw in a table to keep everything in place, figuratively speaking. I wanted to win the challenge of keeping everything in place and not allow one more element to make a move to a spot I didn’t tell it to go. Time to roll up my sleeves!
Main image is out the door
I decided to get rid of the main image. No, I didn’t just carelessly throw away all the work I’ve put in that picture. At least, not until I re-used the elements to create separate images. As part of my digital cleaning rules I could throw out that image as soon as I had created new images.
On friday I got a bit reckless and thought I could add a self-created menu, to replace the existing black menu bar, into this task. I don’t like the existing menu’s separate from the main white page.
The menu had to be an html-based only, otherwise it wouldn’t work. That’s because the area where we create our pages and posts is basically only the body of an html document. For more advanced menu’s you need more than html, like jQuery. You have to implement that part of the code into the head of an html document. I’m not that advanced myself yet to know where and how.
My idea then was to create button images and turn those into links, neatly behind each other without white space in between. I got quite far, I even was almost done. Where it went wrong was that I should’ve used more than 35 px for the height of the buttons or a different easier readable font. I thought to correct that by fixing the height here manually in the code. Somehow, the height of the buttons refused to show the number I had given. When I right-clicked to open the image in a new page, it showed me the size only was 25 px height. How was that possible? They were 35 px originally and I’d tried to enlarge, not made smaller! I couldn’t wrap my head around that.
I gave up for that day. Concluded, this part has to wait until I get new courage, to be busy with it again. That might not be too soon! At least I do know how to solve it.
I just had taken on too much with that menu. It could wait. I comforted myself by saying to myself that at least I had practised and that I almost succeeded. Instead, I worked ahead with the original task. I can tell you, it took me hours to finish that. This certainly wasn’t done in a 30 minute time span. I’d wish! A lot of trial and error I had to deal with.
Start to finish
To create the table I used a word processor program and opened a new html document. Of course, I could’ve implemented the basic html table codes into the existing page and work from there. But I found it personally easier to work behind the scenes. I implemented and adjusted all the achieved code on-line later, to make it fit. And that was where the trial and error started. I had a smaller area to work with than in my word processor. The table I created at first couldn’t be used in that shape on my website. Its content in that form just didn’t fit. I needed to use a different approach with less cells. Just when I thought it was better to continue on Sunday, after a good night sleep, I tried one last time. I’m glad I did. Suddenly it worked out. It started to look as I had planned.
Instead of six images I ended up with five. Four of them function as a clickable image. The Thanks for Visiting image on top is just for visual purposes. I didn’t feel the need or see the value to create a page to link to that one.
I feel I accomplished a more neat, better functional home page. Of course, this is a start, but I have a good frame-work now and I can go from there. My mission for this week in this particular case is accomplished. Hopefully yours turned out good as well and I am curious about your finished task for this week!
Please (only) leave your short summary with the link to your blog post in the comments. I’ll visit and leave a comment on your blog.