After I pitched this mockup I got feedback that the logo should be bigger, to fill the top-left, the most important part of the page. I've also been told that it looks like it's cut off at the top and should be rounded off where the C and the R are.
These are the reworks of the logo that I did, but i couldn't get one that looked as nice as the original so I decided to keep the original logo and use the space to the left and right for the links to the buttons and anchor points within a page.
The anchor links, on the right, will be the same sub-headings from the home-page and will show the different sections of the page you are on. For example if you're on the Science page, the anchor links will be: light waves, How the eye sees, The colour of objects, Additive/subtractive reproduction of colour.
The 'nav' division is intended to be fixed at the top of the window so that if you've scrolled down a long way and want to go to another page/different part of the current page or the home page, the buttons will always be visible.
Logo will change colour on hover,

doesnt work on blogger >:(
The actual page made of HTML and CSS
(screenshot of)

I've made the buttons for the top left. I have 3 Divisions; nav, content and footer. inside the nav div are buttons, logo and anchors divs. I did this so that they would sit nicely at the top. I need to make the rollover versions of the buttons so that they look like they are being pressed in or glowing. I expect i will also change the background image and footer colour but for now they are useful for seeing where the divs are going.
I'm having problems with the margins. I want it to work in the same way as normal websites; where the content is always centred however big the window is but this isn't happening....
Fixed it!
by containing the nav, content and footer in a wrapper div, and setting it's margins to auto on the left and right
(margin: 0 auto;)
the important parts stay in the middle.
No comments:
Post a Comment