Alignment Problem

Another problem I had when creating my website was on the Location page. I have a large map which is embedded from Google Maps, to the right of this is a box with the address and a link to the website of the sister pub.

When I first embedded the the map it moved the box on the right down for no apparent reason, it looked like this;



I played around with different bits of code to try and align it correctly again, as well as putting it into a container div box. I knew that the margin property was used to move that particular element away from one surrounding it from either/all of the top, left, right, or bottom. I wasn't however aware that by using '-' you could move the div closer to another div. This is done with;



Having found the correct amount of pixels to move the div up by, I have now aligned it properly. Simply using 'margin-bottom' would not work for this as it would leave empty space below and extend the page. It now looks like this;

Client Twitter Integration

In order to keep up with the latest web trends I thought it was important that my client has good links with social networks. I wanted to incorporate a Twitter feed into their website, but in a more interesting way than just featuring 'tweets' at the side of the page in a big row. I came up with the idea of having a ribbon across the top of the page, above the navigation. I feel this breaks up the page nicely and looks really cool;



To call in the correct Twitter feed JavaScript is referenced at the bottom of each HTML page the feed is required on;



Where it says "/user_timeline/thebluebellinn.json" is where the Twitter username is referenced, this code can be applied to any Twitter feed and and in any HTML page. To stop multiple posts appearing the code "twitterCallback2&count=1" is used, where '1' can be changed to whichever number you choose.

The CSS for the feed is as follows;



It is very easy to customise and it wasn't too difficult for me to correctly align the text in the ribbon to make it look good. After this I have also used the same JavaScript to create a Twitter feed on my own website; http://www.georgewood.me and as you can see there is a massive difference in the way I have displayed the information, showing how customisable this bit of JavaScript is.

Event Display For Client

I have been trying to think of a way to display the list of events my client requires on their website. I don't want to do just a normal boring list but I want the information to still be easy to see straight away. I have found two possibilities which display the information nicely, but I don't think it would be that easy for my client to go in and update it.

Idea 1;

This is called an Accordion and it displays the information in tabs in a vertical navigation style. This way would be good as it uses a minimal amount of space and still looks good. It also allows for quite a bit of information to be input into each event, and there is space for a picture.

Idea 2;


This way is slightly more advanced. It works by displaying the information in two different ways, one as just images, and then one with images and some text. This way looks cool but may not work aswell if there are lots of events as it would lead to the page being very long.

Tutorials for these two functions can be found here and here.

Client Update

I am slightly behind with my client project, due to the SPP3 deadline being pushed back. This meant I had to re-do my rationale and that teamed with PRP meant that my client project was pushed aside. My gantt chart states that I should be adding JQuery to the site now, which I am actually doing and some has been added, therefore I cannot be too far behind schedule.

By the end of this month I hope to have the site finished and will attend my third meeting with my client to check if they are happy and see if any changes need to be made. So far each page of the website has been created and basic elements, such as the homepage slideshow, have been put into place. I am now looking at new and exciting ways of displaying information to make the site stand out amongst other pub/restaurant sites.

Blubell Photos

Below are two of the pictures I took after my meeting with my client. The research of other pub websites showed me that it was very important to have several high quality images on the website. This shows off the pub well and gives people a good idea of the kind of atmosphere which is in the pub.

I took lots of photos when I was there and I plan to show several of these in the slideshow on the homepage, as well as including them all on the gallery page of the site.