Jump to content
Killersites Forums

CSS Website Issues - footer DIV that sits on top of all other content


Recommended Posts



main image

onmouseover="changeImages('button_main', 'images/button-main-over.gif'); return true;"
onmouseout="changeImages('button_main', 'images/button-main.gif'); return true;"
onmousedown="changeImages('button_main', 'images/button-main-over.gif'); return true;"
onmouseup="changeImages('button_main', 'images/button-main-over.gif'); return true;">

onmouseover="changeImages('button_profile', 'images/button-profile-over.gif'); return true;"
onmouseout="changeImages('button_profile', 'images/button-profile.gif'); return true;"
onmousedown="changeImages('button_profile', 'images/button-profile-over.gif'); return true;"
onmouseup="changeImages('button_profile', 'images/button-profile-over.gif'); return true;">

onmouseover="changeImages('button_portfolio', 'images/button-portfolio-over.gif'); return true;"
onmouseout="changeImages('button_portfolio', 'images/button-portfolio.gif'); return true;"
onmousedown="changeImages('button_portfolio', 'images/button-portfolio-over.gif'); return true;"
onmouseup="changeImages('button_portfolio', 'images/button-portfolio-over.gif'); return true;">button-portfolio.gif

onmouseover="changeImages('button_contact', 'images/button-contact-over.gif'); return true;"
onmouseout="changeImages('button_contact', 'images/button-contact.gif'); return true;"
onmousedown="changeImages('button_contact', 'images/button-contact-over.gif'); return true;"
onmouseup="changeImages('button_contact', 'images/button-contact-over.gif'); return true;">

onmouseover="changeImages('button_news', 'images/button-news-over.gif'); return true;"
onmouseout="changeImages('button_news', 'images/button-news.gif'); return true;"
onmousedown="changeImages('button_news', 'images/button-news-over.gif'); return true;"
onmouseup="changeImages('button_news', 'images/button-news-over.gif'); return true;">button-news.gif

onmouseover="changeImages('blog', 'images/blog-over.gif'); return true;"
onmouseout="changeImages('blog', 'images/blog.gif'); return true;"
onmousedown="changeImages('blog', 'images/blog-over.gif'); return true;"
onmouseup="changeImages('blog', 'images/blog-over.gif'); return true;">

onmouseover="changeImages('_', 'images/_-over.gif'); return true;"
onmouseout="changeImages('_', 'images/_.gif'); return true;"
onmousedown="changeImages('_', 'images/_-over.gif'); return true;"
onmouseup="changeImages('_', 'images/_-over.gif'); return true;">

larger text

smaller text

onmouseover="window.status='Welcome to the Design Assassin\'s Visual Concept Website'; changeImages('home', 'images/home-over.gif'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.gif'); return true;"
onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
onmouseup="changeImages('home', 'images/home-over.gif'); return true;">

onmouseover="window.status='Read more about the Design Assassin'; changeImages('profile', 'images/profile-over.gif'); return true;"
onmouseout="window.status=''; changeImages('profile', 'images/profile.gif'); return true;"
onmousedown="changeImages('profile', 'images/profile-over.gif'); return true;"
onmouseup="changeImages('profile', 'images/profile-over.gif'); return true;">

onmouseover="window.status='The Arsenal :: Here are some examples of work & creative'; changeImages('portfolio', 'images/portfolio-over.gif'); return true;"
onmouseout="window.status=''; changeImages('portfolio', 'images/portfolio.gif'); return true;"
onmousedown="changeImages('portfolio', 'images/portfolio-over.gif'); return true;"
onmouseup="changeImages('portfolio', 'images/portfolio-over.gif'); return true;">

onmouseover="window.status='Make an enquiry or Contact the Design Assassin here'; changeImages('contact', 'images/contact-over.gif'); return true;"
onmouseout="window.status=''; changeImages('contact', 'images/contact.gif'); return true;"
onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"

onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">

onmouseover="window.status='The latest News & Updates are listed here...'; changeImages('news', 'images/news-over.gif'); return true;"
onmouseout="window.status=''; changeImages('news', 'images/news.gif'); return true;"
onmousedown="changeImages('news', 'images/news-over.gif'); return true;"
onmouseup="changeImages('news', 'images/news-over.gif'); return true;">

onmouseover="window.status='Brainstorm :: the Design Assassin BLOG'; changeImages('blog032', 'images/blog-over-33.gif'); return true;"
onmouseout="window.status=''; changeImages('blog032', 'images/blog-32.gif'); return true;"
onmousedown="changeImages('blog032', 'images/blog-over-33.gif'); return true;"
onmouseup="changeImages('blog032', 'images/blog-over-33.gif'); return true;">

onmouseover="window.status='Testimonials, Feedback & Comments from other clients and customers'; changeImages('testimonials', 'images/testimonials-over.gif'); return true;"
onmouseout="window.status=''; changeImages('testimonials', 'images/testimonials.gif'); return true;"
onmousedown="changeImages('testimonials', 'images/testimonials-over.gif'); return true;"
onmouseup="changeImages('testimonials', 'images/testimonials-over.gif'); return true;">

text size

onmouseover="changeImages('button_sitemap', 'images/button-sitemap-over.gif'); return true;"
onmouseout="changeImages('button_sitemap', 'images/button-sitemap.gif'); return true;"
onmousedown="changeImages('button_sitemap', 'images/button-sitemap-over.gif'); return true;"
onmouseup="changeImages('button_sitemap', 'images/button-sitemap-over.gif'); return true;">

onmouseover="changeImages('button_services', 'images/button-services-over.gif'); return true;"
onmouseout="changeImages('button_services', 'images/button-services.gif'); return true;"
onmousedown="changeImages('button_services', 'images/button-services-over.gif'); return true;"
onmouseup="changeImages('button_services', 'images/button-services-over.gif'); return true;">

onmouseover="changeImages('button_shop', 'images/button-shop-over.gif'); return true;"
onmouseout="changeImages('button_shop', 'images/button-shop.gif'); return true;"
onmousedown="changeImages('button_shop', 'images/button-shop-over.gif'); return true;"
onmouseup="changeImages('button_shop', 'images/button-shop-over.gif'); return true;">button-shop.gif

onmouseover="changeImages('button_links', 'images/button-links-over.gif'); return true;"
onmouseout="changeImages('button_links', 'images/button-links.gif'); return true;"
onmousedown="changeImages('button_links', 'images/button-links-over.gif'); return true;"
onmouseup="changeImages('button_links', 'images/button-links-over.gif'); return true;">

onmouseover="changeImages('button_dload', 'images/button-dload-over.gif'); return true;"
onmouseout="changeImages('button_dload', 'images/button-dload.gif'); return true;"
onmousedown="changeImages('button_dload', 'images/button-dload-over.gif'); return true;"
onmouseup="changeImages('button_dload', 'images/button-dload-over.gif'); return true;">

onmouseover="changeImages('button_FAQ', 'images/button-FAQ-over.gif'); return true;"
onmouseout="changeImages('button_FAQ', 'images/button-FAQ.gif'); return true;"
onmousedown="changeImages('button_FAQ', 'images/button-FAQ-over.gif'); return true;"
onmouseup="changeImages('button_FAQ', 'images/button-FAQ-over.gif'); return true;">

onmouseover="changeImages('button_specs', 'images/button-specs-over.gif'); return true;"
onmouseout="changeImages('button_specs', 'images/button-specs.gif'); return true;"
onmousedown="changeImages('button_specs', 'images/button-specs-over.gif'); return true;"
onmouseup="changeImages('button_specs', 'images/button-specs-over.gif'); return true;">


onmouseover="window.status='Find your way around the site easily with this Sitemap'; changeImages('sitemap', 'images/sitemap-over.gif'); return true;"
onmouseout="window.status=''; changeImages('sitemap', 'images/sitemap.gif'); return true;"
onmousedown="changeImages('sitemap', 'images/sitemap-over.gif'); return true;"
onmouseup="changeImages('sitemap', 'images/sitemap-over.gif'); return true;">

onmouseover="window.status='Find out what services the Design Assassin provides to make your life easier :)'; changeImages('services', 'images/services-over.gif'); return true;"
onmouseout="window.status=''; changeImages('services', 'images/services.gif'); return true;"
onmousedown="changeImages('services', 'images/services-over.gif'); return true;"
onmouseup="changeImages('services', 'images/services-over.gif'); return true;">

onmouseover="window.status='The ONLINE SHOP - where you can buy a range of products & items securely'; changeImages('purchase', 'images/purchase-over.gif'); return true;"
onmouseout="window.status=''; changeImages('purchase', 'images/purchase.gif'); return true;"
onmousedown="changeImages('purchase', 'images/purchase-over.gif'); return true;"
onmouseup="changeImages('purchase', 'images/purchase-over.gif'); return true;">
online shop

onmouseover="window.status='Links to other great websites, inpiring pages, handy utilities, freebies & other such awesomeness...'; changeImages('links', 'images/links-over.gif'); return true;"
onmouseout="window.status=''; changeImages('links', 'images/links.gif'); return true;"
onmousedown="changeImages('links', 'images/links-over.gif'); return true;"
onmouseup="changeImages('links', 'images/links-over.gif'); return true;">

onmouseover="window.status='Downloadable freebies like screensavers, wallpapers, mobile content and other shiznit here'; changeImages('downloads', 'images/downloads-over.gif'); return true;"
onmouseout="window.status=''; changeImages('downloads', 'images/downloads.gif'); return true;"
onmousedown="changeImages('downloads', 'images/downloads-over.gif'); return true;"
onmouseup="changeImages('downloads', 'images/downloads-over.gif'); return true;">

onmouseover="window.status='Freakishly Frequently Asked Questions'; changeImages('FAQ', 'images/FAQ-over.gif'); return true;"
onmouseout="window.status=''; changeImages('FAQ', 'images/FAQ.gif'); return true;"
onmousedown="changeImages('FAQ', 'images/FAQ-over.gif'); return true;"
onmouseup="changeImages('FAQ', 'images/FAQ-over.gif'); return true;">

onmouseover="window.status='Technical Requirements & Material Specifications - READ THIS list of requirements before sending me files...'; changeImages('tech_specs', 'images/tech-specs-over.gif'); return true;"
onmouseout="window.status=''; changeImages('tech_specs', 'images/tech-specs.gif'); return true;"
onmousedown="changeImages('tech_specs', 'images/tech-specs-over.gif'); return true;"
onmouseup="changeImages('tech_specs', 'images/tech-specs-over.gif'); return true;">
technical specs






Here is Where the Header Goes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam arcu nibh, posuere eu, luctus ultricies, imperdiet in, metus. Praesent a erat. Ut mauris ligula, vulputate vitae, porttitor vitae, pretium ut, magna. Vestibulum sodales dolor ut diam. Nulla facilisi. Phasellus nulla diam, aliquet vel, euismod scelerisque, ullamcorper vitae, purus. Cras sit amet sem. Phasellus enim. In diam tortor, lacinia eget, hendrerit quis, pulvinar at, purus. Pellentesque sit amet odio in urna tristique posuere. Mauris eget metus. Proin a nulla. Ut mattis sem quis lorem. Mauris blandit pharetra justo.

Cras pharetra velit ac diam. Maecenas aliquam risus eget justo. Nunc suscipit tristique nibh. In consectetur neque interdum tellus. Morbi lacus. Vestibulum volutpat pharetra mi. Nunc commodo ligula id dui. Praesent risus. Aenean porta, lectus eu luctus facilisis, leo magna cursus dui, vitae tristique augue urna sit amet orci. Vestibulum tempus, leo non faucibus porttitor, mi nulla volutpat odio, sit amet condimentum massa erat non nibh.

Morbi sodales auctor dolor. Quisque auctor. Duis sed ligula. Integer id nisl nec metus porttitor interdum. Integer elit magna, fringilla eget, rutrum a, adipiscing sed, purus. Integer pellentesque mattis massa. Suspendisse tristique lorem. Sed vitae diam eget nulla imperdiet ultricies. Maecenas nulla. Aenean massa enim, volutpat at, molestie nec, consequat nec, sapien. Donec tincidunt massa vitae odio. Donec odio. Vivamus condimentum turpis. Donec tincidunt risus nec mauris. Cras semper augue ut sem. Curabitur laoreet risus.

Integer viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse est odio, facilisis lacinia, condimentum et, elementum ac, mi. Quisque erat nisl, placerat eu, tristique at, accumsan vel, nulla. Suspendisse leo. Duis congue lobortis nunc. Maecenas volutpat. Phasellus urna dui, posuere eu, vehicula in, condimentum eget, diam. Proin eros lorem, aliquam dictum, dignissim ac, iaculis et, nulla. Nulla varius dignissim augue. Donec id urna.

Maecenas aliquet dolor vel mauris. Nam viverra. Duis orci dui, volutpat placerat, suscipit id, laoreet et, eros. Duis a risus. Nullam sapien felis, porttitor vitae, mattis ut, vulputate at, magna. Praesent vel felis. Nullam in nulla. Aliquam erat volutpat. Nulla et ligula. Nunc condimentum posuere risus. Aliquam diam turpis, pellentesque sit amet, fringilla sit amet, mattis at, libero. END!



Copyright © designer 2006-2009


about-lia.jpgVestibulum lacus. Aenean eu eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis arcu ligula, posuere ut, fermentum vitae, imperdiet sit amet, elit. Integer vel sem et justo congue porta. Curabitur nisi. In enim neque, laoreet sed, sollicitudin eu, accumsan ac, metus.

Curabitur ullamcorper, leo sed condimentum rhoncus, massa nisi consequat est, sed cursus risus mi at nibh. Duis commodo nulla in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean nisl felis, dapibus vel, ullamcorper at, hendrerit sit amet, quam. In ut eros. Integer eget lectus. Aenean euismod consectetur eros.
This site is a showcase of all that and...MORE>>

Vestibulum lacus. Aenean eu eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu ligula, posuere ut, fermentum vitae, imperdiet sit amet, elit. Integer vel sem et justo congue porta. Curabitur nisi. In enim neque, laoreet sed, sollicitudin eu, accumsan ac, metus.


Curabitur ullamcorper, leo sed condimentum rhoncus, massa nisi consequat est, sed cursus risus mi at nibh. Duis commodo nulla in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean nisl felis, dapibus vel, ullamcorper at, hendrerit sit amet, quam. In ut eros. Integer eget lectus. Aenean euismod consectetur eros.

Send them My Site:

Blah blah blah headline thing here

Bookmark :

Bookmark and Share

RSS:Join my RSS 2.0 Feed what is RSS?


Link to comment
Share on other sites

Can you load it up somewhere? I see your code, but with all those images I don't have, it's hard to try out. Add a clear: both; to the footer CSS. Other than that, just from looking at it so, I can tell you that:


You have the wrong doctype (should be HTML)


There are 2 charsets in your header


You design for 1024 at 1024 - which means folk viewing at 1024 will have a horizontal scroll bar.


You probably don't need all those absolute positions or height settings.


You have CSS in your header and more of it in the external stylesheet - should be all external.


You don't need JavaScript for simple hovers - you can do that much neater with CSS.


Overall, all this css/html/javascript makes for a pretty messy-looking code-page. I'd drop the fancy stuff and focus on the main layout first, then add in all the extras - if they are really necessary.

Link to comment
Share on other sites

Hi Thelma,


Thanks for your response. My internet has been intermittent in the last day or two so i have only just got to respond now.


I noticed the two charsets and deleted those - had cut and paste some code when i was tired. i changed it to html.

i trimmed down the superfluous stuff and added all css to the external. i do want to keep some interesting rollovers and not have yet another generic looking page, so the rollovers were kind of my way of doing that i guess. but i will look into creating that effect with css.


you're a lifesaver - added the clear: both; to the footer and it managed to do as it was told and stop invading my page.


I have chosen to design for my majority market and cant deal with a 800x600px resolution as it will make the pages scroll for ages, so what i have decided to do is create a separate style sheet that will load on request (according to the users browser) to cater for 800x600 users etc. I just wanted to make my page work first in the first place with my first design which was aimed at the most common majority of my audience.


thanks again for your help!! :cool:

Link to comment
Share on other sites

I didn't say you should design for 800 width - but it looks like you meant to design for 1024, but didn't consider the scrollbar - so you should set the width of your page at around 990 or so - so folk who view at 1024 (which, you're right, these days is one of the more commonly used viewing widhts) won't get said scrollbar. ---


You can do roll-overs on hover with CSS just the same as with JavaScript - but those work even when JavaScript isn't, and the code is so much neater and leaner.


Ideally all your CSS should be in an external stylesheet - ESPECIALLY the general styles like body and footer - that's the whole point of the external stylesheet, so styles are applied site-wide.

Link to comment
Share on other sites

OK. Then that size is the happy medium for both older and newer users. no i dont want any horrible scroll bars on my pages! ill work on that next. and i dont want bloated pages so if i can manage to do the rollovers with css then all the more better.


Link to comment
Share on other sites

OK. Then that size is the happy medium for both older and newer users.
But it isn't - both, 800 AND 1024 viewers will have scroll bars. Granted, 1024s won't have much of one, but it'll be there.
Link to comment
Share on other sites

Ah ok i see what you mean. That line was supposed to be more of a question actually rather than a statement - i forgot to put a question mark where i put a period. I dont want scroll bars on the 1024, but i understand that i will have to sacrifice a little and perhaps the the 800s will get one. as long as the bulk of the people i am designing for (bigger screens and higher resolutions) will see the page as it should be.



Link to comment
Share on other sites

Designing for 1024 is a happy medium -- but in order to properly design for it, you have to consider the space the scroll bar takes up - so you have to set your width for a little LESS than 1024 - like 990ish - so those viewing at 1024 will NOT get the (short but none-the-less a) scrollbar.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...