Weblayout creation

The projects consists of a small website layout, which should be converted in xhtml/css(+javascript if necessary) The website has some dropdown menus etc that should appear when you hover over/ click on them. The website should be fully IE, firefox, safari and chrome compatible. Also minor layout changes should be done compared to the given images. ## Deliverables Attached can be found an image of the layout that should be put in Xhtml/css(+javascript if necessary). The website should be fully IE,Firefox,Safari and Chrome compatible. Site itself: width, position, color The site must be possible to view on a 1024x768px screen. The site has a grey top menu bar. This bar should be shown over the full width off the screen. The site is now shown with a backgroundcolor in blue, it must be possible to edit this backgroundcolor by just changing 1 or a few RGB values in the CSS. (So please do not use no images for the background, for shadows etc this is allowed, but please make sure the user can just change the color by chosing another RGB value!!) I have added a screenshot with a orange background to show what should change. The site must be in the center of the screen. So I guess the width must be somewhat 1000px? For the main content area this means it has an minimum width, but if for instance a table with width 1500 px is placed in it, it should adjust as well. It must be possible to place a banner (default size = ?) at top of the site, in the space shown, top menu item tooltips (see top menu section) and drop down menus must appear on top of these banners. The main content area must always have a white background. A example pages must also be made where an iframe is placed in the main content area of the site: 1. The iframe is of fixed size, no scroll bars. 2. The iframe 'detects' the height of its src page, and takes this value as its height, no scrollbars. 3. same as 2, but now the height and width are set to the value of the src page. (if nesessary the main content area should adjust its width as well. ) dynamic css 1. TOP menu: Normal: this is the layout of a normal menu item on top. Hover: This is the layout when hovering over this normal menu item, when you click on it it should just go to the link. Hover2: when hovering for e.g. 2 sec on an item this should give a tooltip (as shown: latest content) An alternative version with a bubble (as shown on the left menu) should also be possible. Click: The top menu kan be marked as a drop down menu: if hover: just do the same as 'hover' or 'hover2', if clicked: show the dropdown menu. The menu is here shown on the right of the page, so relative to menu item 'click' is displayed towards the left. It must also be possible to show this menu item 'click' on the left side of the page making sure the menu is than more displayed towards the right, so it does fit nicely on the page. This drop down menu is copied from Facebook: Please alter it so it does not exactly look like the original menu anymore, but still looks sober, and it has to fit in the layout. 2. Left menu: This left menu is copied from facebook: Please alter the layout/color somewhat, so it does not look exactly like the facebook layout anymore. Also look for an free-to-use icon set that can be used for each submenu item. The menu must be positioned underneath the picture. Requests: If clicked this should follow the link, if See all is pressed: the submenu (shown on the image with items '1 group invitation, 3 page suggestions, messages, events and Friends') is shown. (if possible you may add a special effect to it: eg. letting it come from underneath the menu etc.) Also for each request / submenu a tooltip (shown as 'updates addressed to you from others') should be possible to add that is shown when hovering on the item (for 2seconds)