I created my sections according to my index wireframe.
Header: 1024px x 150px.
Middle section (content box): 1024px x 530px.
Footer: 1024px x 88px.
I gave them each a different colour so they would be easily visible when editing them on the website.
To make the header fixed I added the piece of code:
' position:fixed;
top: 0px; '
This meant that there will be no space between the top of the header and the container, placing the header in the fixed position meant that when scrolling, the header will stay essentially, fixed to the top of the page. However, when I selected this I noticed that I had acquired an extra chunk under my footer, which was the same colour I had selected as a visual reference for my container.
I noticed that this extra chunk was about the same size as my header. I then realised that as I had made my header fixed it wasn't part of the containers some anymore. Almost like it had been removed from the container and put on its own layer. Therefore the new pink space seen at the bottom was actually where the navigation bar used to be when it was in the container (original layer).
Therefore to fix this problem you need to make the container smaller by the height of the navigation bar - 150px. Totally removing the new pink chunk and making the container 618px high instead of 768px.
Or make the content box (purple) 150px bigger to make up for the subtraction of the header.
for my design it is more viable/appropriate to increase the size of the content box to instead of reducing my screen size, as my screen size will be consistently 768px high across all pages.
Therefore the height of my content box is now 630px.
The height of the container 768px - height of footer: 88px.
I then applied some text to the main container, to test that the main container would scroll behind my header.
However as shown above, I found that when I did this, the text ran over the top of the fixed header rather than underneath. This is because when using a fixed position, the HTML takes on an appearance much like programs such as illustrator where it begins to have layers. Therefore we must adjust the code so that metaphorically the fixed header must sit on the top layer, and anything else must lay beneath this. We can get the code to do this action by altering the 'z:index', The z:index property helps us to order our stack of elements. The furthest to the top of the stack (which is where I want my fixed header to be) has a value of 999 and the lowest has a value of one. therefore In order for all my elements to run correctly I put them in this order:
Fixed header - z:index 999
Image background - z:index 1
Overlay text - z:index 10
From adding these extra values we can see that now, when the page is scrolled the fixed header sits over the top of the text, and the text sits over the background image, both of which disappear behind the fixed header when scrolling.
Next I looked at customising the navbar, I wanted to start with elements that I could paste into the HTML for all my pages, so that I could begin to construct a universal framework that would be suitable across all of my 5 web pages.
As we had done in class I made 2 images for each button, Using my choice of typeface (Helvetica) and my colour pallet, I created the set of roll over images below:
The buttons are simple and clean, much like how I want the rest of the website to be, and change colour when rolled over. I created the buttons to fit the correct size of my nav bar: 150x211px and saved them for web as png. I then created a second layer on each of my illustrator tabs, and did the same design but in different colours.
I saved the black layers as 'name of button' and coloured layers as name of button2.
I then went into my code.
On my style sheet I created a style for these 4 buttons called 'button2', as button1 would be a clickable logo in the centre .
style:
#button2 {
width: 211px;
height: 150px;
position: relative;
float: left;
}
I positioned the buttons relative so that they would stack horizontally next to one another instead of ontop of eachother. They are positioned left to stack next to each other and align left.
I then also create the home button/logo in illustrator, this would not be a rollover button, but a static button that would still be clickable, much like the home buttons seen on sites such as topshop etc.
Below is the logo that I designed drawn up in illustrator:
I made this button the size that was left over from the previous 4.
previous button size: 211 x 150px x 4 = 844px
1024px - 844px = 180px
I then wrote the style for this button also known as button1:
#button1 {
float: left;
height: 150px;
width: 180px;
}
Once I had written these styles I called them as div ids in my html, between the start of the div and the end of the div, I inserted a pre loaded roll over image, selecting the plain black version as my first image, and the coloured as the second. I used the bottom option in the menu to tell the buttons to go to the other 4 pages I had created, below is how I did this process with the about us button.
The code for all my buttons inside my navbar div:
Working navbar shown below:
No comments:
Post a Comment