9.3 – D.S. 8 – Composing everything together

Development Step Eight

Composing everything together

I wasn’t really sure how to call this development step but since my plans are to make the website good looking and flawless I thought I would call it composing everything together since I now have to make minor adjustments here and there to make it pleasing to look at.
My first step into that direction would be a background over the whole page, and for that I wanted something “papery” self made since it would fit my box design.

My first step, was finding a good texture. After having that done and saved in my data folder, I could implement it. To do that I just used

background-image: url(data/paper.jpg);

inside of the body. The result was the image covering up the whole background of the website. Now, I am actually going to size the video down a bit because I feel like all of the buttons should be clickable without scrolling. So I put the width of my video to 920p and moved the buttons up so everything is on one site.

But the scroll bar is still accessible even tho it moves the page only by a few pixel. So I googeld on how to remove the scroll bar and found this. Here someone explains that with using

overflow: hidden;

the scrollbar on the used div/ element disappears. The problem is that, if I use that on my div that has all the content inside, the scrollbar still doesn’t disappear.

But looking a little further down on the suggested links by google I found this forum where someone suggested this as a solution:

html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}

I just put this into my css code and it worked. My scrollbar is now gone. Since I got this out of the way I want to make my background fit the old box design even more so I am going to jump into photoshop and change it up a little bit.

Adding a white bar at the bottom and some “reviews”/icons on the background it lives up the scene already:The only thing that is annoying me now is the fact that the video isn’t really part of the scene. Its more like a square thats just pasted on there, so I want to integrate it more into the image. What I came up with, was putting a filter over it which blurs the edges to make it more fitting to the background, and that looks somewhat like this (in photoshop):

And what I need to do now, is export this as a png, import it and somehow make it perfectly stick on top of my video. But to be honest I have no clue on how to solve this, so I just started googling and found things like this, and this from which I tried both, and actually the second one got me a little closer. What I tried was putting the overlay inside of the videos div and the result was the following:

As You can see, the overlay now is more or less on top of the video, and even scales with it, its just not correctly positioned yet. But that should be fixed quickly. To do that I used

position: absolute;

Which makes the object able to lay on top of the video instead of getting pushed away by it.

left: 1.7%; top: -3.7%; right: 0%;

This was just me trying out until I found the perfect position. And this is what it looks like:

The only problem that this creates, is that the video isn’t clickable anymore to play and pause, since there is an image in front of it. So what I thought is that I can maybe make the image clickable instead. And wow it actually just worked like that. I just had to put the

onClick=”playPause();”

into the <img …> and now the video can be played and paused. Now I only want the mouse curser to be pointing when you hover over it. To do that I first tried putting

cursor: pointer;

into the division that has the image inside, the problem is that the cursor now is pointing over the whole page since the division takes 100% width. So I had to see how to select an object inside of a division. I could just give the img an id or put it into a class but since I already used that method a lot I want to learn how to use the selector. And for that I googled how to select an img inside a div. I found this link, but when I tried out what they suggested,

.overly > img {
cursor: pointer;
}

it didn’t work. But then I noticed that I had a typing error cause my division is called overlay, and then it worked :D.

Now, my masterpiece is almost perfect. The only thing I want to change is the background because I think I should have more icons and make them all smaller so its more of a texture than 4 things that cant be readable if your image is on top. So after photoshopping and putting everything together this is my final product:


Retrospective:

Finally A Development Step which wasn’t depressing like crazy :D. Which doesn’t mean I had no struggles or problems. But I feel like the outcomes from this development step where so significant that it motivated me more then ever. I now have a final and ready to present website. This doesn’t mean it is flawless, not to speak of the responsiveness with mobile devices (which I will look into in another DevStep), but this is definitely the part where I reached my first big goal. Which means that I know have to upload all of this to a server so everyone can access it through my website. And when I am done with that I will look into responsiveness and probably a new way of hosting the videos because WordPress may not be the best way.