[Argh! Need Help with making Div inside a Div grow to text content]

Hi Benjamin,

 

Thanks for your reply - I had to rebuild my page after power surge lost it all. My internet was out for the last few days thanks to a second surge/blackout/whatever it was, so i haven't been able to reply.

 

I managed to get it working thanks to your suggestion however (which luckily i saw before my connections went haywire) so thank you for the response.

[Argh! Need Help with making Div inside a Div grow to text content]

Firstly! So happy i re-found this site!! I had joined a couple of years ago to participate in this community cuz i love web design - however after a major computer meltdown i lost many of the sites I was part of and lost all the URL's and passwords and whatnot that i had set up....so I stumbled upon it by chance and am glad to be back!

 

I do have a question though:

 

I am having a few troubles with a content box that i am trying to make grow with the content.

 

My site has a block of text within a div (with a tranparency of 75% black) which lays over a wider transparent div (which is set to 50% black). However i know it is probably a really simple solution (i have been really sick and my brain is not working like it should) but i am trying to get both the outer boxes to grow/expand automatically with the text content.So its a text div within a darker transparent div , within a lighter transparent div.

 

If you need code, I can recreate what i am doing but i also just had a darn blackout at my house and lost the file i was working on!? go figure...doh!

 

If someone would tell me where i could find a method for creating a content box that grows as described accoding to the inner text box/div (or point me to a link) i would be eternally grateful. The illness i am recovering from has affected part of my brain so I am having to relearn/recall certain things that i knew before, so apologies if this is seems like a really silly questin but i cannot find much help on the web - could also be due to the way my brain is functioning and not searching for the correct terminolgy.

 

BTW - the div is sitting ontop of a background within a page, so it is not the caontainer div. it is once element on the page that has text and content. Please let me know if you need more info - as i said, my brain capacity is not at it's best right now.

 

Many thanks, glad to be back! Huchy :cool:

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

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!

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

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.

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

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:

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

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

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

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

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

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

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

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

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!

bottom links

Copyright © designer 2006-2009

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








RSS:Join my RSS 2.0 Feed

Twitter:

Follow me on Twitter