I've been struggling to rework the template on my original page to turn it into a simple journal. If anyone can take a peek at the code and let me know what I'm missing I'd really appreciate it.
What I want to do is have the "recommended words" banner across the top and below just open typing space to list books I like. I was able to create a space to type that expands with the amount of content however it won't stretch across the whole page. Can't figure out what I'm doing wrong. Also, the box with the links (report content, report problem ad, etc.) is supposed to be at the bottom of the page though I'm okay with it where it is. Mainly just want to expand the text area to full width of the page.

http://chuckmanson.com/RecommendedWords.html

thanks in advance

Browser: Firefox

OS: windows vista

I think that that template can be made to do what you want, but I'm not real clear on what you want. I believe you want to eliminate the section on the right, but do you also want to eliminate the section on the left that intended to be a navigation area? Do you want just a header, mid-section, and a footer? If so, what are you going to use to link your pages together?

The template is structured a little bit differently than most. You have to make sure you understand the existing structure before you can modify it. Note, in any of the code listings below, I only list items that have changed. Everything else in the same structure or style stays the same.

There are five main "div" sections ("header", "main_right", "subnav", "main", and "footer") wrapped in a "container" div (840px). The "header" (640px) at the top only spans the "subnav" section (160px) and "main" section (480px). The "main_right" section (200px) is to the right of the "header" and "main" sections. Then, at the bottom the "footer" spans the whole width (100%). All of those pixel widths are defined in the style sheet. If you try to eliminate any one of them, you also need to adjust the pixel widths. Otherwise, the sections are still going to be limited to the defined widths. So you might want to in stages, one section at a time.

So lets say we start with just removing the section on the right. Since the original template contains a "index.html" file, I will use that as Reference Template. Initially, you start by deleting the entire "main_right" div in the "index.html" file. Note that the "right_main" div also contains one named "padded". Make sure you remove the two div tags, the contents of the divs and then the tow div terminators. The we need to adjust some widths in the "default.css" file. The "header" width definition is changed to "840px" and the "main" width definition is changed to "680px".

Initially it seems that simple. That is until you view it and see that the content of the "main_right" section is gone, but the header didn't get any wider. And, while the text area got wider, the dark stripe from the "main_right" section still exists, Template, Stage 1. The header doesn't get wider because it's just a image. And the background doesn't seem to widen because it is also an image. To make it look right you need to increase the width of the header image and the background image.

I used IrfanView to split the header image (header.jpg) into two equal pieces (left and right), I than clipped a 200 pixel wide white section out of the center. I did that to make sure the sections would color match. Then I put them all back together (left, center, right), using IrfanView's panorama capability. This gave me a header image that was now 840 pixels wide. I then saved it as "header_stage_2.jpg).

The "container" section background image (bgcontainer.jpg) is really only 3 pixels high, but is 840 pixels wide. The page simply repeats the image vertically. To change the right side of the image white, I used MS Paint and saved the image as "bgcontainer_stage_2.jpg".

With new images in the "images588" folder, I changed their references in the "default.css" file. Template, Stage 2



Now I'm going to stop here, leaving the navigation sidebar intact, because I'm not completely clear on what you are looking for and to let you digest what I wrote. If you want to look at the changes and images yourself, here is a link to the Template ZIP File. It contains the original template files plus all of changes I made. Feel free to use it as you see fit.

One last note. You should not be editing this template, or any other template, with Bravenet's Visual Editor. I can tell you have been using the Visual Editor, because the DOCTYPE tag is missing. The DOCTYPE tag is important if you want your web pages to display the same in all browsers. Without it, some browsers may shift the content areas around. Get a web page design editor on your PC and edit your pages locally. Then use a FTP tool to upload everything to your web site. Don't depend on the on-line editors. See my page on Template Editing for some free design tool suggestions.

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse

wow! much thanks for all the reworking. Obviously, I'm not sure what I'm doing, just moving elements around til I find something that works. All I wanted was a simple, clean page like the template 2 you made. I did download Filezila and between that and Bravenets SFTP I've tried to upload the template but it's not allowing "one or more" file to transfer. I'm going to dive into the help section but any advice on transfering files would again be appreciated.

Browser: Firefox

OS: windows vista

As I said before, feel free to use the code as you see fit.

Many people think that it's that easy, but find out otherwise. You need to understand the HTML structuring and how the CSS manages everything. It's especially difficult to rework an existing template. Some template designers use chopped up pieces of images that are held together by a carefully controlled structure. Upset that structure and all of sudden, nothing is where it's suppose to be.

A simpler approach to getting the layout you want to try this link to Dynamic Drive CSS Layouts. They have simplified CSS Layouts that cover just about any arrangement you like. They include the CSS within the HTML, making it easy to see how the CSS manages the HTML.

They are just layouts and do not contain navigation menus. However, the also provide a section called DynamicDrive.com - CSS Library Horizontal CSS Menus. There is another one for DynamicDrive.com - CSS Library Vertical CSS Menus. Some of them are a little overly complicated, but there are some simple, easy to use, menus. Overall DynamicDrive.com is a good source for lots of useful code.



Make sure you are uploading to the correct place. Trying to write to the wrong place is the usual problem.

Because Bravenet allows multiple web sites for a single account, there is a base directory that is not write enabled. If you log in via FTP to the root directory (/) of your web site(s) you should see a folder named "web". You need to change to the "web" folder and then you will see the root folders for each of your web site(s). Neither the root directory (/) or the "/web" folder is write enabled. You need to change to the folder for your website, before you will be able to transfer files.

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse

Again, much thanks.
I don't want to turn this into FTP For Dummies but I did manage to get the file to upload from both Filezilla and Bravenet but I don't seem to be able to do anything with it. Maybe I'm not uploading it in the right format or to the right file. I will try to explain what I've done:

Up To Parent Folder
images586
images588
myPictures
BN_Template_588(2)...
BN_Template_588.zi...
RecommendedWords.h...
Songs.html
ontact.html
index.html
info.txt

This is the menu on Bravenet webpage editor. As you can see, I managed to upload BN_Template twice but they're not a file folder and when I click on them, it tries to download again.
Should it have been uploaded to a file folder? Should they have been opened and saved to my laptop differently prior to using the FTP? I've been punting around with it for a couple of days and just can't figure out how to apply the sweet template you came up with to my site.
BTW: I have only one web site/domain.
Thanks again

Browser: Firefox

OS: windows vista

Should they have been opened and saved to my laptop differently prior to using the FTP?

Yes!

I don't know why you use the ... dots instead of the full filename, but it seems you are uploading a zip file containing the template.

A template isn't a coat of paint. It isn't some kind of skin you just add to an existing website.

You open the zip files, and you have your new page - except it has none of your content. You then edit a copy of that page to add your content. When you are happy with it, you upload it, and start on the next copy to create the next page. (Obviously, I'm assuming you are smart enough to keep an extra copy)

Chuck,

It looks like you uploaded the ZIP file that I linked to. It wasn't necessary to upload the ZIP file. Bravenet doesn't provide on-line UnZip. But it's not a big deal, you can just delete it from your site.

When you UnZip a ZIP file the original does not get deleted, unless you forcably delete it. It is always around so you can extract an new copy of whatever file you might need. In fact, ZIP files are a nice way of backing up your local design folders. Should you accidentially delete an important file, you can extract a fresh copy from your latest backup ZIP file.

Anyway, the ZIP file I provided contains a group of files. If you unzip it on your PC, it should create a folder named "BN_Template_588". Inside that folder should be a ZIP file named "bntemplate588.zip. That's just the original template as downloaded from Bravenet. You should also find one folder named "images588", a couple of HTML files. The "images588" folder contains all the images and CSS files for the HTML files.The "images588" folder contains all the usual images and style sheet that are part of the template. I won't list them all because you already have most of them. The only real important ones have "stage_1" or "stage_2" as part of their file names. The listing below gives a brief description of the important file in the "imaged588" folder. The only ones you really need have "stage_2" as part of their name. The others were for intermediate tests.

Browser: Firefox

OS: Solaris, Redhat, Fedora, Suse