Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Table layout blues

    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
    Last edited by Muckiem14; 07-03-2007 at 06:10 AM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Muckiem14 View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Muckiem14 View Post
    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 ;)

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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
    Last edited by Muckiem14; 07-03-2007 at 06:58 AM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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. You have 8 errors, most of them simple mistakes that shouldn't happen. See them here.

    After you get those fixed you will need to clear your floats http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #9
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
     <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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
    Last edited by Muckiem14; 07-04-2007 at 02:45 AM.

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

    and here is the page

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

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You don't need to remove the legend, just be sure to close it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

    Mike


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •