Hi guys,

Just a heads up first, this is going to be a little long for two reasons: 1) I have a bad habit of being verbose 2) I'm going to explain exactly what my problem is and what steps I took to get there so everyone knows exactly what has been done so far.

So, I decided to give my hand a try at designing a full page template purely in Photoshop (CS4 for PS and Dreamweaver). It worked out great, looks awesome... but I didn't know what to do next. I'm currently enrolled for Web Design & Interactive Media in college, but alas I just started 5.5 weeks ago. However, I do have a photoshop learning center and posted my problem to my professors. After some long discussion of my professor telling me to slice it and just save to web & devices, and me finally being able to get it click that doing this makes a bunch of tables out of the images, I had my first full graphic web template. Problem #1: I have not worked with tables since Dreamweaver was Macromedia Dreamweaver 8... eons ago it seems. So, after finally getting everything into an HTML document, where I felt more at home, I started to play around with the tables, trying to remember anything at all about them. My professor helpfully suggested nesting the tables... it was greek to me. However, we live in the internet age, so I googled it up.

Now I have my images all in wonderfully organized tables, except for five of the images. This is the jpeg of the template. So, I was loving the template, and that is the photoshop .jpg I saved to show my girlfriend what it would end up looking like. After realizing that I had NO idea how to get the text over those specific area's while the "content boxes" were still in tables, I decided to throw in my puny skill in CSS. I made new slices, and sliced up the upper two sections for the content-title1 & content-title2 and then made 2 more new slices for content-left and content-right, then a fifth slice for the bottom of the rounded boxes content-footer. Now, I have used others' templates in the past such as this site but he was using familiar territory for me.. <div> tags. Ok, so anyway I have 4 new tables to throw in... one each for the content headers "News" and the "Welcome to Illuminati" parts, and then two other boxes for the actual content of each section. After trying to figure out how to nest tables, I gave it a shot and while in design mode, it actually works... except the navbar is slid out far to the right. And when I uploaded the site, not only is the navbar way out in deep right field, but my content-right table slid under content-left. You can see the end result here.

What I need help on:

If any kind soul could please take a look at my code and tell me exactly where I'm fubarring things up, I would greatly appreciate it!

If said kind soul could show me how to fix said problems, I would appreciate it even more!!

Lastly, on that Livengood Investments website, if you notice the bottom section where the "article of the week" and thumblist is, with that guys' template, as I add content to those sections, it grows down so that you never have gaps or spaces etc. That is why I cut the middle content boxes into two, so that I could add content without worry of having the gaps etc. I did notice though, that if one side is longer in text than the other (on my secondlife.lift4ullc.com/test2.html site) then the other side has a gap. I'm going to assume this is because with the Livengood-Investments site, that middle section is actually 1 background? I could do the same with the boxes on my site, make them 1 section instead of two, if only I knew how to have two separate tables over their individual box... thanks!

Every guide or tutorial or video I have found on the net about nesting tables gives you a simple 2 column 5 row walk-through. Very nice, and handy in some cases I'm sure, but I can't see how that helps me at this particular moment. =( Thank you in advance everyone, for your patience while I rambled, and your help in this matter.

Matt

If you are familiar with <div> tags, then why do you use tables? Tables are good for tabular data, not for page layouts.

Also, I don't understand why you use so many colspan and rowspan attributes. Make sure that each row contains an equal number of columns (taking in account any colspan you use).

Turn the border of the table on and see what happens.

Thanks for the reply Frederik,

I was unaware I could do the layout using div tags until last night. Like I said, I've never tried to do a full template in PS and then convert it over, generally what I did in the past was create the site in html and then add in some graphics here and there, but never tried to have specific boxes have backgrounds. I'm still very much a novice. Last night though I looked at some of my other sites and decided to do pretty much what you said. Everything turned out mostly right, just some floating issues to get the two boxes to line up side by side. I'll be working on those today.

The professor I first asked is one of my professors for Photoshop (beginner/intermediate/advanced) and I guess doesn't know CSS that well, which would be why he said to use tables I would guess. Instead of saving html & images, I resliced and saved just the images. Re-sliced because I needed to do the boxes differently... it looks better now, and since I'm using just div tags and css, I'm a little more familiar with it than tables. So there we have it. Thank you Frederiek, I appreciate it. =)

You're welcome.

Just try not to overdo the use of div's. That can create a tag soup which is difficult to maintain.

I usually use Photoshop to make a mock-up, to then only take those elements out that really need to be images (background or inline). Otherwise I use an applied (non-gradient) color as background-color in CSS. I never slice a PS-file.

No, I only use div's as I need, and I make sure to keep my hierarchy in tact because sometimes I need to go back myself and see exactly what div I was using in a specific area (hierarchy meaning the indents per new tag, etc). What I did pretty much was create the template that I wanted, then sliced out the specific elements that make up the majority of the template (logo, header, navbar, content boxes, footer) and left the rest to CSS. I actually think those are all of my div's, or at least will be by the time I can finish, with the exception of an actual content-left and content-right div, which I am still having trouble lining up lol. The background is done in CSS. I had thought about slicing my background from PS, but it's just #363636 which is easily done with CSS so no need for an extra file and div. =) Thanks again Frederiek

Show us (with an url) what you have so far (using div's, as your test page still uses (nested) tables).

Sorry it took me so long to get back to you, have been sick. Here is my Illumination page. I created all of the other pages, so it's fully ready to go (I installed lightbox on those pages and changed it from 2 content boxes to one), everything except the front page. Thank you!

Matt

Well, I finally got tired of messing with it. I managed to get the text box to line up but because the two boxes were different lengths due to content inside of them, the bottom parts of the boxes wouldn't line up right. So, instead of worrying about both having the same lines of content, I just merged the two boxes into one like I did on the other pages. Thank you for the help though!!

Matt