Hi all, I have been trying for days to figure out how to create a menu container that expands with additional content or when the menu drops down but alas I have not found a solution! Have googled and there is lots of css info, that I have tried to follow - but I am not even sure if I have the container set up properly. Basically the background image (or container) has always had, sitting on top of it a static (if that's the correct terminology) subnav menu - but now the menu is javascript enabled to allow for drop down. You probably get where I am going - now everytime the menu drops down it extends past the background image and spills on to the images below. I am not a designer or programmer etc - my line of work is totally unrelated to this type of stuff - so I feel a bit out of league! If anyone could look at the page that I am playing with http://www.buildingskillsacademy.co.uk/links.php and possibly give me some advice I'd much appreciate it!!!! Thank you.
The first thing I noticed is that you have HTML language in your CSS file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=unicode"> <meta content="MSHTML 6.00.6000.16674" name="GENERATOR"></head> <body> Code (markup): I presume you cut and paste it into it by accident but nevertheless get rid of it. The second thing is that you've put CSS commands into the HTML code itself as so: <div id="item2a" class="MyMenu" style="position:absolute; left:5px; top:273.792px; width:197px; height:191.226px; z-index:14"> Code (markup): This is really bad practice and completely unnecessary. There's no reason at all why all CSS can't be placed into an external file. It sure makes matters a hell of a lot easier. I see you've extensively used positioning on the layout. I would never use this unless absolutely necessary... which is hardly at all. The best way of going about this is using the image as a background image in CSS. Try background : url ("image path here") ; Then your menu should sit over image. At the moment there doesn't seem to be any connection between the div that holds the image and that that holds the menu. Remember this is cascading style sheets... there needs to be a logical connection in the HTML code.... Sorry to read about your frustration... but you'll get there eventually...
Divisive Cottonwood - Thank you for your help, I did what you suggested but after a lot of trying, I still couldn't get the background image to expand with the menu - but have solved the problem to a certain extent by adding a background colour and now the background expands with the menu (not ideal from a design point of view - but it works!). However, now the background spills onto the image below!!! lol - you can't win! Don't know where the html in css file came from - I didn't design the site and as I have had no previous html or css experience I was none the wiser! It's gone now though. CSS code in html - again I didn't do it - LOL, but I am trying to bring it all to css file. Positioning - you know what I am going to say (he he) - it's giving me a headache!
So the end product - does anyone know how to get stop my almost great drop down list and its background colour from dropping down over the image under it? Many thanks.