Been actually quite into the web brief so I thought I'd have a stab at bringing my final scamp to fruition without referring to the web sessions, seeing how much I remember and see how far I can get with it.
This is the scamp
I modified it a little, the logo is now 130px by 130px and the margins on the right level out with the navigation rather than fit alongside it as this led to some problems for me, i'm sure it's easy to do but for this experiment I added a margin to the left and right side of the navigation and made the left and right columns a little shorter.
This is how I want it to look..
^^ Mock-ups I made digitally.
The web sessions were really helpful as I could refer to the CSS and DWT files just to be sure I'm not missing any important step out
Getting there, the columns and navigation are fine and I even managed to make the hovering logo appear just right at the top, in the teal-ish colour. I read in the HTML & CSS book that a hovering element is position:fixed. It doesn't move with the page as you scroll
^ Created a CSS element for the floating logo called #header with position:fixed;
I added a repeatable region instead of an editable region in the header div, in the HTML template as I want it to repeat but not be editable on each of the 5 html pages I've linked to it. I just thought I'd try it out and it works fine! I created a transparent png and made it save for web as we were shown in the sessions
For some reason making the position fixed for the header element makes it appear here in the 'design' view'
But previewing in Safari looks just fine! You can see it's transparent and floats even as you scroll up.
Adding the rollover buttons inside the navigation div.
Rollovers work too, the buttons slightly nudge upwards.
I don't want a background colour and want it to be transparent, so I've got rid of the 'background-color' line altogether in the CSS template, as this worked for the header element.
Worked!
I've also placed in a fighter image I prepared just to see if it'd fit in right and it seems to fit in right in the middle column which is my content column, the left and right columns almost just act as margins, but will have the 'next' and 'previous' buttons housed in them for the slideshow pages.
Now the layout actually works, time to sort the colours out, I had the colours all weird and bright so I could see if they all even fit together properly.
The hex code I need to colour it all in is #EADECA
I should be able to change all this from the CSS template and it should all
Sorted.
One issue I am actually having though is the resolution of 1024x768 is slightly too big for my screen. I have to actually scroll down to be able to see the navigation at the bottom. On a higher resolution screen it will all appear to be 'smaller'. This is an issue as I want the website to be without any serious issues on pretty much all formats.
I'll talk to Simon about an obvious solution to this, I could always just shrink the height of the website. A viewable size within the browser on my laptop is a height of 680px.
I also still don't know how to get stuff scrolling with the navigation still hovering, along with the header logo. I also don't know how to centralise the container and have the container flexible so that I don't have white borders round it and the background colour fills the white borders up, to be seamless.
Making and saving the next and previous buttons as transparent png's. They should fit seamlessly into the right and left margin
You can see here simply adding in from the design view, they push everything down as they're about 10px lower than they should be. Probably not the best way to do it, but for now I'll just change the height from the code, to be a little shorter in height, so they fit within the columns
Changed the height from 718px to 700px as a quick fix
Fixed! Now I'll create a few fighter pages and make the next and previous arrows links between them, Maybe I could create a separate greatest fighters ever template and create fighter pages from it?
Something like how the greatest fighter page would look, this is without text.
Still not too sure how to have different text styles, such as headings and so on and the best way to link up fighter pages and have the same next and previous button template without messing everything up.
I'm really happy with even getting this far so I'll make sure I know what I'm doing before moving forward.
0 comments:
Post a Comment