Jump to content
Stef's Coding Community
hunchy

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

Recommended Posts







title





main-img-left.gif


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;">
button-main.gif


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;">
button-profile.gif

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;">
button-contact.gif

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;">
blog


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;">
_.gif



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;">
homepage


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;">
about


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;">
portfolio


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;">
contact


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;">
news


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;">
blog


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;">
testimonials


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;">
button-sitemap.gif


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;">
button-services.gif

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;">
button-links.gif


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;">
button-dload.gif


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;">
button-FAQ.gif


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;">
button-specs.gif


spare-red.gif


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;">
sitemap


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;">
services


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;">
links


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;">
downloads


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;">
FAQ


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


spare.gif


box-assassin_L.gif


box-assassin_R.gif


main-img-lower.gif


blk-headline-spacer.gif


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!









footer-divider.gif


red-footer-spacer.gif





Copyright © designer 2006-2009



_-81.gif





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.


SOME

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?

Twitter:






Share this post


Link to post
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.

Share this post


Link to post
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:

Share this post


Link to post
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.

Share this post


Link to post
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.

thanks.

Share this post


Link to post
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.

Share this post


Link to post
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.

 

thanks!

Share this post


Link to post
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.

Share this post


Link to post
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.

Guest
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.

Loading...

×
×
  • Create New...