Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    27016
    Hey everyone! I just joined-you all seem very helpful, so hopefully you'll be able to give me a hand.

    I'm creating a website, and the layout is table-based. I know that this is slightly outdated, but it's just supposed to be a quick website and this is easiest for me right now. I created a layout in Photoshop and used the slice tool to turn it into a table. So, I opened it in Dreamweaver and everything looks great, but I want the table to automatically resize itself to take up 65% of the user's window. I'm not trying to resize anyone's window, just to make sure that my site looks right in all resolutions.

    According to all of the articles/faqs/discussions I've read, my table should be resizing correctly because none of the elements have fixed widths, and I set the table width at 65%, but it's not working. It's staying full size. Does anyone know why this is happening?

    Thanks in advance...I'm keeping my fingers crossed. :/

    HTML Code:
    <html>
    <head>
    <title>title</title>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="50" marginwidth="0" marginheight="50">
    
    <div align="center">
    <table width="65%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="8">
                <img src="images/header.jpg"></td>
        </tr>
        <tr>
            <td>
                <img src="images/home.jpg"></td>
            <td>
                <img src="images/resume.jpg"></td>
            <td>
                <img src="images/replist.jpg"></td>
            <td>
                <img src="images/audio.jpg"></td>
            <td>
                <img src="images/photos.jpg"></td>
            <td>
                <img src="images/teaching.jpg"></td>
            <td>
                <img src="images/links.jpg"></td>
            <td>
                <img src="images/contact.png"></td>
        </tr>
        <tr>
            <td>
                <img src="images/bodyleft.jpg"></td>
            <td colspan="6">
                <img src="images/spacer.gif" ></td>
            <td>
                <img src="images/bodyright.jpg" ></td>
        </tr>
        <tr>
            <td colspan="8">
                <img src="images/footer.jpg" ></td>
        </tr>
    </table>
    </div>
    </body>
    </html>
    Edit: You can see the site here

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Your header image is 1500 X92 pixels, so the minimum width the table can be without scrolling is 1500px. I can see in my 24" monitor that when I fullscreen the site, it does size down, trying to get to 65%. I think to make it resize, you should separate the text from the image in the header, and set the text in your HTML, with the image in your CSS as a background, but even then I think the image needs to be much smaller.
    It's been a long time since I did anything with tables, maybe someone else can help you more.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    27016
    Well, I don't want to separate the text because I want the font I used, and it's a custom font...I've done this before, on my current site, with just an image/div rather than a table (http://ashleywilliamsflute.com)...and the image is really big, but will easily go down to 65% so that it works on any screen. I've seen images in tables resize before....I'm just not quite sure why it won't work on this one. Thanks for the help, though.

  5. #4
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Well I think it's because in the flute site the image is in a div rather than a table cell, but i could be wrong.
    Sorry I couldn't help more, but as I said, I don't use tables anymore if I can help it.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    27016
    yeah...is there any way to put a table in a div? that is probably a dumb question with the answer of "no." I'm beginning to think I understand why everyone says they avoid tables....I haven't really used them all that much up until now.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Actually I just looked at the source for the site where the image resizes and you have given the image itself a percentage size value like this:

    <div align="center" width="65%">
    <img id="banner" width="65%" src="topbanner.jpg">
    </div>
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    27016
    oh...yeah. I think when I made that site, I was trying to figure this out for a long time, too, and just put 65% everywhere I could until it worked...probably not the best method. I'm hoping I can figure something out for this site, because I'm about to just redo the html and reformat the images to 800px wide, but I don't want to do that because it's SO small on most people's monitors who don't use 800x600...and I feel like very few people actually have that size anymore!

  9. #8
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    You don't really need to resize anything. I make all of my websites to have a maximum width of 960 pixels. That gives the 1024x768 screen resolutions a bit of buffer on both sides and it looks nice. I believe that anyone using 800x600 now should just get used to having a horizontal scroll bar because that size is completely out of date. The majority of users, from what I've read, are now at least 1024x768. I would just make the containing div have a width of 960px and fit everything else in that size.
    Check out some of my work: http://www.jr-webdesigns.com

  10. #9
    Junior Member
    Join Date
    Feb 2011
    Posts
    5
    Member #
    27016
    Thanks Jeffrey....for some reason, though, when I try to put a width tag in my div tag, nothing changes, or I would just do a percentage setting and it would be perfect for everyone...the size of my images overwrites the width tag in my div container, and I'm not sure why. I tried putting all of the images in the table at 65%, but that was a big mess and definitely didn't work. I just now tried changing the width to 960 px and that didn't work, either. I'd really like it to change with the user's screen size, but so far it's just not working out! thanks, though. I'm beginning to think this might be impossible!

  11. #10
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    Images cannot be scaled with %'s in HTML or CSS (as far as I know anyway). They are a fixed size. If you want to have a fluid layout, I suggest using smaller images. The width attribute is supposed to be in your CSS not in the actual div tag. If you want to give a div styles, you give it a unique id and then call the id in CSS to change it's styles. For example:


    Code:
    <div id="container">
    </div>
    The above code is in your HTML file. That div can be used to contain all of your content. You would put the </div> tag after all the other content. Then in your CSS (whether inline or global) you can modify that div and tell it how big to be and how to look:

    Code:
    #container {
    width: 960px;
    margin: 0 auto;
    background: #000000; //black background
    color: #ffffff; //white text
    }
    The CSS tells the div that it needs to be 960 pixels wide, have a black background and all the text within that div is defaulted to white.

    The margin attribute in the CSS for the div is used to center it in the browser. The margin: 0 auto; means that the top and bottom margins are 0 and the left and right margins are set to auto. If it helps, go to my website in the link below and go view > page source with your browser. I have my divs set up in a very straightforward and hierarchical way. You'll see the body tag and than all of the divs, and they're indented when they are nested.
    Check out some of my work: http://www.jr-webdesigns.com


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

auto resize table with content html
,
automatic table resize html
,
create table with div in html and resizeable
,
css table td content auto resize
,
css why wont my table resize
,
html css table img auto resize
,

html table wont resize

,
resize table both automatic html
,
table html resize authomatic
,
table resizes itself html
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:15 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com