10 replies [Last post]
PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Hello. I have designed my site several years ago by teaching myself HTML as i went. Now several years later, my site has grown so much that i would like to convert to css for the ease of changing my 100+ pages. I pretty much understand how to create an external file and link to it and how to manipluate the text in the css file. Here is a link to a test page i have been working with.
http://www.herbal-connection.com/76Plustest.htm

As you can see, my page is very table oriented. What i would like to do is be able to put the graphical top and right side menu into the css file as well as the stuff at the bottom of the page. is this all possible? Ive been searching for tutorials to help and im just not finding anything helpful.

I have Adobe GoLive and have read some on floating boxes and dont know if this is the way i need to go or not. Im still learning all the terminology and if someone could direct me to a site that helps explain the different terms that would be very helpful. Ive looked at templates that you can download and everytime i see one that i think will work, i download it and it turns into greek to me.

Any help anyone is willing to give is greatly appreciated!

Sincerely,
Pamela

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with graphics

Pamela, I think you site lends itself very much to CSS and tableless html. And it wouldn't be that complicated! There are, of course, a number of ways you could do this. This first idea that comes to mind is to have four divs. One for the header, one for content, one for footer, and an absolutely positioned div for the navbar.
The header div could have the background gif and float the aqua design right, while the co. name and tagline could (should?) be text (for better accessibility). Or if you needed those fonts, just float the logo left.
Then main content div could be full width with a right margin the size of the navbar.
The footer would be another full width div with a white background and grey top and bottom borders to eliminate the hr and cover the blue stripe. That stripe could be applied to the body background and would be covered where needed by header, navbar, and footer.
The navbar div could then be positioned absolutely to sit just under the header div and on the right side of the page. The links could sit in an ul and be styled anyway you wanted. A background gradient could be applied to this div to match the test page.

Inside the main content area, you may have additional nested divs - this is perfectly acceptable. Use the borders of block elements to make your horizontal rules. And a perfect use for a table exists in the pricing section. It could be done without a table, but I personally think that's where a table should be used because the data has a relationship with the data around it.

Hope I didn't confuse you. Others may have other (better) ideas. Let us know how you make out with this.

PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Help with graphics

wolfcry911 wrote:
Hope I didn't confuse you. Others may have other (better) ideas. Let us know how you make out with this.

Thanks, Wolf! You didnt lose me too bad! LOL i pretty much understand what your saying, just not sure how to go about doing it. I will look around for a tutorial on divs and not sure what the "ul" is you referred to. Or if you know of a site that implements these ideas that i could look at to learn the coding that would be appreciated as well. Thanks for taking the time to reply to my message! Smile

Pamela

PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Help with graphics

Wolf, is it possible to do the above in an external style sheet and just have my pages call it up, or would all the divs have to be on each individual page? If the divs have to be on each page, then what is the advantage to changing from tables to divs?

Pamela

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with graphics

An external style sheet is possible, however each page would need to be rewritten Sad . The advantage is in having the ability to make changes site wide and have more control in style, not to mention conforming to standards (tables are for tabular data, not for layout). Your pages will have better structure and be more browser friendly for the future. It's a large undertaking for a large site like yours, but probably worth the work. I can set up a sample html if you'd like.

PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Help with graphics

wolfcry911 wrote:
An external style sheet is possible, however each page would need to be rewritten Sad ..... It's a large undertaking for a large site like yours, but probably worth the work. I can set up a sample html if you'd like.

Thanks, Wolf! A sample html would be great. I figured i would have to redo all the pages so i was prepared for that. I enjoy working on my website so it will be a labor of love. Smile I really like the idea of keeping all the style and layout as much as i can seperate from the page content and is why i prefer the external style sheet. It will take a while, but i feel its something i need to do to stay current and competitive. I just purchased a book on DHTML and CSS so i will probably be a bookworm for the rest of the weekend. Thanks again for all your help. Its nice to find someone willing to help the little guy! Laughing out loud I think my email is accessible on here, but you can also get it off my test page posted above.

Pamela

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Help with graphics

If you have the ability to do SSI then you might be able to do a complete redo without as much work? You do the divs and css as wolfcry suggested as a layout template page, then call up that page for all other pages as an include and then use sub routines to insert your content or additional include pages for your content.
Otherwise you will have to do a rewrite of all exisitng pages... BUMMER I know... but FUTURE site wide changes will be MUCH EASIER

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with graphics

Pamela, give this a try. I didn't spend too much time on it, I did try to imitate what you had previously sans the navbar. You could adjust style for the navbar to match - I just wanted to give you a start...

PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Help with graphics

Wow, Wolf! Thanks. I saved the page and will work with it and teach myself further. One questions though. I saved the page and opened it in GoLive and it jumbles everything up. When i preview it in GoLive it look line it does online, but in the layout tab it looks like everything is shoved to the left. Also i can remove everything in the sytle section to an external sheet can call it up on the individual pages correct?

Thanks Again,
pamela

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Help with graphics

Your welcome. I'm sorry, but I have zero experience with GoLive - so I can't help you there. Yes, you can definately make the styles external. In fact, I'd recommend you do that. I included it in the htm only for ease of developing. I should mention, this is only one of doing it. Others may have slightly or greatly different ideas. Explore and experiment...

PamelaR1987
Offline
newbie
Last seen: 15 years 11 weeks ago
Joined: 2004-09-17
Posts: 6
Points: 0

Help with graphics

Again, Wolf, Thanks for all your help. I figured out how to move the divs around in the preview on GoLive without affecting the final look. That page is really going to help me learn. I can grasp something so much easier when i "see it" Laughing out loud

Pamela