Help Re-Creating Expanding Content Box

[belfastrab]

Hello

First of all I am new so hi!

I have had a friend come to me with their website that badly needs some changes. It seems that whoever originally designed the site used some sort of automated PSD to HTML/CSS service and it’s a real mess and trying to sort out one problem at a time.

Each html page on the site references it’s very own style sheet even though there is no need to do so?!?

The first problem I can’t solve with my limited skills is a content box which the main content of each page is within. At the moment when new content is added to the box it doesn’t automatically expand as it should and I need to manually adjust the size of the containing layer which has a background image applied in css.

The site can be viewed at SITE LINK and the css for the link for the home page css as because as I say every page has it’s own is CSS LINK

My friend doesn’t want the site to change visually at all even though I recommended just starting from scratch.

I am just trying to re-create the content box exactly but so it automatically expands itself when new content is added.

Please help I would really appericiate it as this thing is a mess.

Thanks

R

[shaneisme]

Whoa boy… this is definitely one of those things that needs to be nuked from orbit.

The design can stay the same, I don’t necessarily have an issue with it other than being dated… but really, the code needs to be rewritten from the ground up.

It looks like everything is positioned absolute and has set widths and heights. Unfortunately that’s the cause of your problems why the content isn’t pushing its container outward. If you just wrap some text in a <div> without any styling, that <div> will expand automatically by default. So you can do things like add borders, or backgrounds and everything will just work out.

If no one else has stepped in, I’ll see what I can do for you when I get home from work.

[belfastrab]

Thanks for your replies.

Wolf – yeah I have already told him that but might as well speak to a wall. And it’s in no way dynamic but again I might as well speak to a wall.

Shane – thanks if you could help that would be great

I am a graphic designer and dabble with a little bit with code for mock ups and fairly confident I could throw this together using something like bootstrap but even then I have never had the need to code a expanding box like what is currently used or not expanding as the current case may be.

I am just trying to get this box issue solved and then I can at least use the one css file for all the pages because at the moment thanks to this box issue it references different values for the divs involved in each separate css.

Once I have a single css file to work from I can quickly update the content on each page as needed and politely decline to do anything else on it unless he wants to start from fresh.

[shaneisme]

The main problem with “expanding boxes” is that in order to fix it will require you to fundamentally alter the entire page. Basically there won’t be a quick fix.

Try this: get on CodePen and just bring the HTML over without styling. Start deleting the unnecessary <div>‘s that don’t have any content in them. Once you have that, try to style it so that the content is laid out the same way (don’t worry about the images etc.). Once you have that, we can start messing around.

[belfastrab]

Just an idea would it not be possible to leave the header section of the site containing the logo, main navigation and image banner in place. And then just have a new centred div for the main content (where the new expanding box will be) and one below that for the footer contents or is that not a option?

Please know I don’t mean to be ungrateful but if it’s really involved as you say it will be then I might as well just add the new content to each page as my friend wants and manually adjust each individual page’s css as it’s starting to sound like that might be the quicker option. The only reason why I wanted to do the expanding box was to save time.

I don’t want to kill himself or any kind helper such as yourself on trying to fix this mess of a site because ultimately it’s going to have to be rebuild properly in the long run. Just thought it might be a quick copy and paste of some code.

Anyways let me know if the first suggestion has wings please and if not I will just crack on with updating the urgent content and refuse any more site related favours for my friend until he allows (pays) me to start from scratch.

Thanks for getting back to me

[Author]

Posts