You Are Reading

Design Production - Mutton Quad - Website Development

I decided to start coding my website from scratch. the layout that i come up with was simple enough for me to achieve with what I have done so far. It was a simple, four buttons at the top with 1 column content that will include just image and type.




CSS Stylesheet Coding



HTML Code 




I create the simple code for the stylesheet to create a 720px box and nav bar that inside it had four 180px wide buttons. 

I then create the one column and made it an editable region converting the HTML file into a template. 

Once this was complete. I created the buttons in photoshop with a rollover image of red so that this would fit my original ideas. 

This was my website template done apart from the hovering logo which I will come back to at a later date. 

I now need to organise and sort all of my content so that i can start to drop in into the website and create something useful. 






Here is the website previewing in Firefox. It works fine, all of the links are working too. Just need to start dropping content in there. 


I added the floating header by creating a header section in my stylesheet coding. I had to add a z-index to 100 which made the logo come forward above everything. I also changed the position to fixed so it didn't move around as well as the position by altering the px from left, right and top. 





I then added some content into the column. Just an image and some body copy. This is still not perfect. I feel that the container needs to be slightly wider in order to work ashthetically. At the moment the content looks squashed.

I also need to sort out the colour of the text to red and also save all my images correctly for web and at the correct sizes. This is a good start though, and I have most of the work done which is great!








Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.