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.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resolution/<div>/Table Problem (Nearly Solved)

    Hi,
    Hope someone can help me! I have been stuck on this for hours now.

    The first problem I am having, is that when I put a picture in cell, and use it as a background, it keeps repeating. I don't want it to tile.

    The second problem is that when ever I put the table to 100% for the width. It still wont stretch for any resolutions! Also is there any way to have the picture looking the same, or just about the same in most resolutions?

    Thirdly, people say using <div> is a lot better. How do I add <div> code to what I have now

    -Thanks Heaps

    These are 2 images at 2 different resolutions, this is what happens when I set everything to 100%, for the width.
    1024x768


    800x600


    This is the code
    ----------------------------
    <html>
    <head>
    <title>index.jpg</title>
    <meta http-equiv="Content-Type" content="text/html;">
    <!--Fireworks MX 2004 Dreamweaver MX 2004 target. Created Tue Jan 25 16:38:35 GMT+1100 (AUS Eastern Daylight Time) 2005-->
    </head>
    <body bgcolor="#ffffff">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <!-- fwtable fwsrc="index.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "632514108" fwnested="0" -->
    <tr>
    <td><img src="images/spacer.gif" width="179" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="620" height="1" border="0" alt=""></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>

    <tr>
    <td> </td>
    <td colspan="2"> </td>
    <td> </td>
    </tr>
    <tr>
    <td rowspan="2" colspan="2" background="images/index_r2_c1.jpg"> </td>
    <td background="images/index_r2_c3.jpg"> </td>
    <td><img src="images/spacer.gif" width="100%" height="55" border="0" alt=""></td>
    </tr>
    <tr>
    <td rowspan="2"> </td>
    <td><img src="images/spacer.gif" width="100%" height="409" border="0" alt=""></td>
    </tr>
    <tr>
    <td colspan="2"> </td>
    <td><img src="images/spacer.gif" width="100%" height="70" border="0" alt=""></td>
    </tr>
    </table>
    </body>
    </html>
    ----------------------------

    I also tryed to add this in the head but nothing happen!

    <style>
    #header {
    width: 100%;
    margin-left: 0%;
    border-bottom: 1px solid #859081;
    border-left: 4px solid #859081;
    font-size: 15pt;
    font-color: #7892A8;
    font-family: Arial;
    font-style: bold;
    }
    </style>

    If anyone can solve my problem, I will be very greatful!
    Last edited by onggie; 01-28-2005 at 12:38 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    CSS will be easier in the long run. I'm not a wiz at it but see if this works for you at all. p.s. I didn't test it but worked off one of my models.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    html, body {
         height: 100%;
    }
    body {
         padding: 0;
         margin: 10px; (*just a guess)
    }
    
    #container {
         margin-top: 10px; (*just a guess)
         width: 100%;
         position: relative;
    }
    #nav {
        width: 179px;
        margin: 0px;
        float: left;
        background: url(images/index_r2_c1.jpg);
    }
    #box {
         margin-left: 181px; (*just a guess)
         position: relative;
         width: 100%;
    }
    #banner {
            background: url(images/?.jpg) repeat-x;
            height: ?px;
            margin-top: 0;
            }
    </style>
    
    </head>
    <body>
    <div id="container">
    <div id="nav">
    
    *LINKS AND STUFF*
    
    </div>
    <div id="box">
    <div id="banner">
    </div>
    
    *ALL YOUR TEXT*
    
    </div>
    </div>
    </body>
    </html>
    I didn't know the name or the height of the bar going across the top so you need to plug that in.

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your speedy reply ! I will try it out now!

    EDIT: Looks good so far! How do I put a picture in the background, like putting a picture in a cell, so I can put links over the picture?
    Last edited by onggie; 01-26-2005 at 05:18 AM.

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry I think I found it

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Arghhhh, I can't see to work around this. Like putting all the pictures in the right place, setting anything, keeping the images from tiling. I just don't know how to place everything properly!

    Also, when I goto pages like www.ezydvd.com & http://www.pc-express.com.au/ All these pages seem to be in tables, and looks a lot easier to work with, since I am no good with HTML. Though I find it a lot easier on me, to use tables, since the page needs to be updated every day! But how do they do it?
    Last edited by onggie; 01-26-2005 at 05:45 AM.

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also this is what I wan't the webpage to be like! Like what the areas are called.





    -Thanks!

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Nothing personal, but you are asking very broad questions that will only be answered if we code the page for you. What's the saying? "Give a man a fish... etc."

    First you need to decide if you want to use tables for layout or CSS. Enter those words in Google and you'll get more than enough to read about the advantages of both, so we don't have to type it all again . (yes, I say go with CSS!)

    I'd suggest doing just a little homework to understand the basics of HTML and CSS positioning before you dive into the specifics of how to get a layout looking a certain way. My new favorite HTML/CSS tutorial is htmldog.com. Try it out, learn a little bit, and when you get stuck on something in particluar we'd be glad to help!

  • #8
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I did read a lot about it, I find that reading stuff, like tutorials off the net very hard to follow. The only way I really understand is actaully looking at the code, etc. I never really wanted anyone to do it for me yet. I was just wondering if div would be hard to put on what I want. I am finidng div hard to understand, so I just want to use tables. Unless some one can explain it!

    EDIT: And the only 2 problems I am having with doing tables is

    The first problem I am having, is that when I put a picture in cell, and use it as a background, it keeps repeating. I don't want it to tile.

    The second problem is that when ever I put the table to 100% for the width. It still wont stretch for any resolutions! Also is there any way to have the picture looking the same, or just about the same in most resolutions?
    EDIT2: Oh and I do all my web pages in photoshop, then slice them in Fireworks, so they are automatically in tables and cells.
    Last edited by onggie; 01-26-2005 at 09:33 AM.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Education!

    There are solutions to your problems, but to be able to work with them you need still need a better understanding of HTML and CSS.
    Stick with tables for now, since this works for you, and accept that the more advanced stuff simply isn't accessible at the moment.

    To give some incentive: with CSS, you can assign a background image to just about every element there is, and control position and tiling, both in horizontal and vertical directions; this opens up a lot of great styling possibilities.
    Images just won't stretch like that; to achieve for instance a fluid background for a menu sidebar, it needs to be constructed out of several background images on different elements which could partly overlap.

    Also forget the notion of a single, one-size-fits-all, works-everytime solution for every layout problem ever arising; every solution needs to be tailored to the exact circumstances, which again requires knowledge and understanding.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #10
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK thanks for your input! I have been working about 8 hours on it today trying to get it. First with the tables then I have been trying with the CSS. I just find it hard!

    With the css, is there anyway to actaully see the the boarder of like the grouping? Like the way you would see tables? And one more thing, I am unable to move all edges! I can only move the bottom, right and top side but not the left side.

    E.G. When I insert the div like harbingerOTV said, I have like these 8 bullets I can move around, to make the area either bigger or smaller. But the problem is I can only move a couple of them, these are the ones I can't move.
    Code:
          ->   #           #           #
    
    
    
          ->   #                        #
    
    
    
          ->   #           #           #
    
    Those ones, with the arrows.
    Thanks!

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Quote Originally Posted by onggie

    With the css, is there anyway to actaully see the the boarder of like the grouping?
    Add border: 1px solid black; to your Divs and you should be able to see where things are.

    It would be easier if you had all this up on a web page so you actually had a working example for people to see.

    I looked at http://www.pc-express.com.au . Why don't you try using thier code and just removing what you don't need and plugging in your pics and sizes to see if it works for your needs. That will show you how the sizing of the tables and what not they are doing works.

    Thier table layout is pretty straight forward enough. You should be able to dissect it easily enough.

  • #12
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok thanks bud, you have been a great help! I'll give it a try now!

    EDIT: Oh yeah, I can't put it on the net yet, since we are chaning hosting package at the end of the month. So ill put it on at the end of the month.

  • #13
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK I worked out the <div> I think! Thanks to everyone!


    But can anyone help me with the resolution? What I have is put everything into one kind of container, so is there anyway I can set that container to 100%?

    The Website

    -Thanks

    Well if you guys can help me at all with what I am doing wrong, etc!

    P.S. The logo sucks, thats just a temp.

  • #14
    New Coder
    Join Date
    Jan 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I may of fixed it, can you guys check it out please?

    Also is it hard to put a search on the site? So that if someone wast looking up ATI or Nvidia that could put it in the search and it would show the results just for whats on the website?

    Also how do I make everything shift to the left side of the screen, so it's no centred?

    EDIT: For some reason it doesn't show up in Firefox, what I have updated! So try IE!
    Last edited by onggie; 01-28-2005 at 12:37 AM.


  •  

    Posting Permissions

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