...

View Full Version : Table layout blues



Muckiem14
07-03-2007, 06:50 AM
Hi. Im working on this layout that was given to me. It is a bunch of tables. I have managed to get around most problems...well, I thought so anyways. If you look at the page, the top left table with the go button and text box, you will see that it keeps expanding when I add content to the main area. You can see this by clicking on whats new and services. This doesnt even show in my editor but definetly shows in all browsers. Also, the same table has a gap on the right showing the blue background. It should meet up perfectly with the image to the right. So, my question is how can I stop this table from expanding and make it meet up with the table next to it. Here is the link...

http://www.imikedesigns.com/americad

I hate tables. They never cooperate. Ever...I really hope someone can help. Thanks.

Mike

_Aerospace_Eng_
07-03-2007, 07:21 AM
I hate tables. They never cooperate. Ever...I really hope someone can help. Thanks.

Mike
Then why use them? Just convert the layout to a layout that doesn't use tables for page layout. Its just a simple to column layout.

groog
07-03-2007, 07:34 AM
I hate tables. They never cooperate. Ever...


Amen! CSS is the way to go man. You'll have the div... oranges...

if you didn't catch that the opposite of table blues is div oranges ;)

Muckiem14
07-03-2007, 07:47 AM
I agree. I attempted this at first but I had a lapse in judgement and decided to try to work with what I had. Any tips on how I should slice this thing? I know its a simple layout but I have trouble visualizing it sliced. Right now im thinking a top image that spans the whole width and reaches down to to right below the top of the first side box. Then one image for the sideboxs and a y repeated bg for the main area. Then the footer. Does this sound right?

It would be sweet to have the div oranges. It even sounds better than table blues.

Mike

_Aerospace_Eng_
07-03-2007, 08:25 AM
Yeah that sounds right. You could probably even do a repeating background image for the sidebox. Just have the login box its own image with a blue background set and have it always at the bottom of the side bar.

Muckiem14
07-03-2007, 09:49 AM
Thanks Aerospace. Well, everything was going smooth until I started added images. I added the go button and the form and for some reason the main content area jumped way down the page. You can see what im talking about at the same address

http://www.imikedesigns.com/americad

This is definetly easier to work with, but I need to get the hang of adding images without making the whole layout go crazy. Any help with this is appreciated. Thanks.

Mike

_Aerospace_Eng_
07-03-2007, 10:42 AM
You need to float your left side since it comes before #main in the html. If you moved your left side after #main then you could float #main to the right and the left side should fall into place though you need to add a width. Add background colors to your elements so you can see what is happening though IMO before you start worrying about style, worry about actually coding proper html first.

Judging from your code you shouldn't even be using an xhtml doctype. Use an HTML Strict doctype. Your code is still going to be invalid though. Learn to use the validator (http://validator.w3.org). You have 8 errors, most of them simple mistakes that shouldn't happen. See them here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.imikedesigns.com%2FAmericad%2F).

After you get those fixed you will need to clear your floats http://www.positioniseverything.net/easyclearing.html

Muckiem14
07-03-2007, 01:25 PM
Thanks. I moved the #leftside beyond the main div and floated the main to the right. It worked. So, the form and button no longer make the page break up but I cant align my go button to the middle of the form. I was using absmiddle but I think thats bad code. When I use margins or padding, both the button and the form move. Any ideas there?

Then the menu buttons. I have tried all that I know and cant get them into place. Also, IE7 is only showing the top half of the buttons. I tried to clear the floats using methods from the link and couldnt get it to work. I also tried what you showed me on another website and it didnt work either. So, in FF, there is a tiny bit of the main area sticking out the bottom. Thanks for all of your help man. I know this is all redundant for you. Heres the link

http://www.imikedesigns.com/americad

Muckiem14
07-03-2007, 02:59 PM
Ok...so I managed to get the menu in position. But, the go button I can figure out. Also, the menu buttons have space between them and they shouldnt. I have searched everywhere trying to find the solution to the spacing problem but nothing helps me. This has to be something simple. And, im still having trouble clearing the floats. So, if you have any advice please let me know. Thanks.

http://www.imikedesigns.com/americad

Mike

_Aerospace_Eng_
07-03-2007, 04:56 PM
Change your go button to an input type="image" and as for your menu you need to use float:left; on #top li rather than display:inline. Move this after the leftside div

<div id="clearfoot"></div>
<img src="images/menud.jpg" width="473" alt="bottom menu"></div>
and get rid of the div with id="clearfoot".

Now create your bottom menu, no sense in styling something that isn't going to be used in the end. On your bottom menu use an unordered list and apply clear:both to this list.

Muckiem14
07-04-2007, 02:18 AM
Thanks again Aerospace. I changed the button to input type="image" but styling the image with a margin still moves both the form and image. I moved the bottom menu after the leftside div and now it places the menu directly under the leftside. That makes sense really. But, it needs to be in the correct position under the main area. I created the UL and applied clear:both to it as you mentioned. I just dont know how to get it under the main area. First thought would be to place the div under the main area div but then the clear wouldnt work...i think...im guessing thats why you had me move it after the leftside div so it would be the last element. So, how do I position this thing.

I attmepted to add the last form to the page. I know there is something wrong here.
-the form breaks apart my layout in my editor which makes me think something is wrong
-the layout isnt broken up in FF or IE but is out of position in FF and doesnt even show up in IE

It needs to go in the bottom left box but I cant get it there.

Also, could you have a look at the way I positioned the bottom menu/list items? To get them positioned properly I had to apply a left margin to #footer ul and a top margin to #footer li. It works in FF and IE...in fact its the only thing I could get to look the same in both browsers. But, it seems for some reason this may be a bad idea. Let me know. Thanks...

http://www.imikedesigns.com/americad

Mike

_Aerospace_Eng_
07-05-2007, 06:07 PM
Now that I think about it. Put your footer inside of #main and don't float the footer. Get rid of the clear:both on the list.

Muckiem14
07-05-2007, 08:43 PM
Thanks for the tip Aerospace. Everything seems to be in place now. All of the pages are valid except the contact page. Just so happens that this is the page im having problems with. The form looks right in FF and IE7 but I get all of these errors. Im not sure why I get the legend errors...I had a legend but I removed it and now the validator still sees it for some reason. The same thing is happening with a javascript error. I had one line of java script and then removed it. This error is attached to div errors. Im not sure if divs can be placed inside forms though. But, I cant have <p> inside the form so I cant think of a way to format it. Its really a simple form...labels on top of each text box and text area. How can I fix this?
Here is the validation link (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imikedesigns.com%2FAmericad%2Fcontact.html&charset=%28detect+automatically%29&doctype=Inline#result)

and here is the page

http://imikedesigns.com/americad/contact.html

_Aerospace_Eng_
07-06-2007, 02:37 AM
You don't need to remove the legend, just be sure to close it.

Muckiem14
07-06-2007, 01:09 PM
Thanks Aerospace. So, if fieldset is used do you always have to have legend tags even if you dont want a legend? Just wondering about that.

Everything seems to be good at this point thanks to all of your help and some advice from Jutlander. I thank you guys so much.

I have one last little 2 pixel problem in FF. In FF the flash header has about 2px of space underneath. IE7 looks fine and every page is valid. So if anyone can help me with this little issue I could be finished for now. Thanks again.

The Site (www.imikedesigns.com/americad)

Mike

Muckiem14
07-06-2007, 02:19 PM
Scratch the last message...I fixed the space by adding font size 1px to the header. Thanks for all the help.

Mike



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum