Website Help

Discussion in 'The Cheap Seats' started by IXI DECAY IXI, Jan 29, 2012.

  1. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    Okay, for any of you tech savy guys who are good with websites, then I need a little help with some coding.

    Basically what I'm having trouble with is in the main part of my page where the top story would go I have side tables that run along the side of that. Well everytime I increases the size bar to add more colums, it basically drops by top story box down to keep it centered where I just want it to stay at the top of the page.

    If you don't understand what I'm talking about I can post an image. Any help would be much appreciated!
     
  2. Shaun Mason

    Shaun Mason Somebody you used to know.

    Joined:
    Feb 9, 2009
    Messages:
    24,887
    Featured Threads:
    5
    Post an image.
     
  3. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    [​IMG]

    Notice how the part in red is lower than it's counter part on the right side. The reason it is doing this is because I just inserted more text in the right table and it cause the table on the left to lower where I want it to stay at the top no matter how much information is on the right side. Check next image...

    [​IMG]

    This is a pic that shows where I just threw in more text on the right hand side. and as you can see from this image as well that the table on the left is lowering itself by itself. Just let me know if you need some more information on what I'm talking about.
     
  4. Shaun Mason

    Shaun Mason Somebody you used to know.

    Joined:
    Feb 9, 2009
    Messages:
    24,887
    Featured Threads:
    5
    Can you adjust the image via CSS?
     
  5. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    What do you mean adjust the image? The image isn't giving me troubles. I could put nothing where the image is at and it still just lowers the entire table on that side.
     
  6. Shaun Mason

    Shaun Mason Somebody you used to know.

    Joined:
    Feb 9, 2009
    Messages:
    24,887
    Featured Threads:
    5
    You really shouldn't be using tables to do the layout.

    If your page looks like this:


    HTML:
    <html>
        <body>
              <div id="header"></div>
              <div id="left column"></div>
              <div id="right column"></div>
        </body>
    </html>

    You can just change the positioning on the columns.

    Let me look at your source and I'll see if I can spot anything obvious.
     
  7. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    Thanks man! You need me to post my source code on here?
     
  8. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta
    content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>Fairhope Flyers Website</title>
    </head>
    <body
    style="background-image: url(http://i1211.photobucket.com/albums/cc426/mjwalker1988/Test/TestBackgroundV1.jpg);">
    <table
    style="background-color: rgb(255, 255, 255); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;"
    border="1" bordercolor="#ffffff" cellpadding="16"
    cellspacing="0">
    <tbody>
    <tr>
    <td>
    <table
    style="background-color: rgb(0, 0, 0); width: 950px; height: 150px; text-align: left; margin-left: auto; margin-right: auto;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td colspan="7"
    rowspan="1"><img
    style="width: 950px; height: 150px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Banners/Fairhope%20Flyers%20Banner%20V3.png"><br>
    </td>
    </tr>
    <tr>
    <td style="width: 40px;"
    background="http://i1211.photobucket.com/albums/cc426/mjwalker1988/Test/TestBackgroundV2.jpg"></td>
    <td
    style="height: 30px; width: 170px; background-color: rgb(51, 51, 51);"><img
    style="width: 170px; height: 30px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Home%20Button%20V4.png"></td>
    <td
    style="width: 170px; background-color: rgb(51, 51, 51);"><img
    style="width: 170px; height: 30px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Roster%20Button%20V4.png"></td>
    <td
    style="width: 170px; text-align: right; font-family: Sonic XBd BT; background-color: rgb(51, 51, 51);"><img
    style="width: 170px; height: 30px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Schedule%20Button%20V4.png"></td>
    <td
    style="width: 170px; text-align: right; font-family: Sonic XBd BT; background-color: rgb(51, 51, 51);"><img
    style="width: 170px; height: 30px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Multimedia%20Button%20V4.gif"></td>
    <td
    style="width: 170px; text-align: right; font-family: Sonic XBd BT; background-color: rgb(51, 51, 51);"><img
    style="width: 170px; height: 30px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Archives%20Button%20V4.png"></td>
    <td
    style="text-align: right; font-family: Sonic XBd BT; background-color: rgb(51, 51, 51); width: 60px;"
    background="http://i1211.photobucket.com/albums/cc426/mjwalker1988/Test/TestBackgroundV2.jpg"></td>
    </tr>
    </tbody>
    </table>
    <br>
    <table
    style="background-color: rgb(255, 255, 255); width: 950px; text-align: left; margin-left: auto; margin-right: auto;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td colspan="2"
    rowspan="1" style="height: 40px;"><img
    style="width: 950px; height: 40px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Banners/Top%20Story%20Banner.png"></td>
    </tr>
    <tr>
    <td style="width: 475px;">
    <table
    style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
    valign="top" border="0" cellpadding="2"
    cellspacing="0">
    <tbody>
    <tr align="center"
    valign="top">
    <td
    style="vertical-align: top; text-align: center;"><img
    style="width: 400px; height: 400px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Top%20Story%20V1.png"></td>
    </tr>
    <tr>
    <td><font
    size="-1"><span
    style="font-family: Verdana;">Welcome to the official
    Fairhope Flyers website. We are currently working to improve the site
    so come back soon...</span></font></td>
    </tr>
    </tbody>
    </table>
    </td>
    <td style="width: 475px;">
    <table
    style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;"
    border="0" cellpadding="2" cellspacing="0">
    <tbody>
    <tr align="center">
    <td><img
    style="width: 400px; height: 400px;" alt=""
    src="file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Top%20Story%20V1.png"></td>
    </tr>
    <tr>
    <td><font
    size="-1"><span
    style="font-family: Verdana;">Welcome to the official
    Fairhope Flyers website. We are currently working to improve the site
    so come back soon...<br>
    <br>
    Blah blah blah blah blah blah blah blah blah blah...<br>
    <br>
    Blah blah blah blah blah blah blah blah blah blah...</span></font></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </body>
    </html>
     
  9. Bondzai

    Bondzai Your Mom's Best Friend

    Joined:
    Feb 10, 2009
    Messages:
    10,802
    [​IMG]
     
    • Like Like x 1
  10. Shaun Mason

    Shaun Mason Somebody you used to know.

    Joined:
    Feb 9, 2009
    Messages:
    24,887
    Featured Threads:
    5
    You're a funny fucker.
     
  11. Shaun Mason

    Shaun Mason Somebody you used to know.

    Joined:
    Feb 9, 2009
    Messages:
    24,887
    Featured Threads:
    5
    I haven't tested this, since I don't have images, but you should get the point. Basically I'm trying to remove all the styling from the main file into css and removing the table layout.

    HTML:
    <!doctype html>
        <head>
          <meta charset="utf-8">
          <title></title>
          <meta name="description" content="">
          <meta name="author" content="">
          <meta name="viewport" content="width=device-width,initial-scale=1">
          <link rel="stylesheet" href="css/style.css">
        </head>
        <body>
          <div id="container">
            <header>
            </header>
            <div id="buttons">
                <button id="Home"/>
                <button id="Roster"/>
                <button id="Schedule"/>
                <button id="Multimedia"/>
                <button id="Archives"/>
            </div>
            <div id="main" role="main">
                <div id="TopStories" />
                <div id="leftColumn">
                    <span>Welcome to the official Fairhope Flyers website. We are currently working to improve the site so come back soon...</span>
                </div>
                <div id="rightColumn">
                    <span>Welcome to the official Fairhope Flyers website. We are currently working to improve the site so come back soon...
                        <br>
                        <br>
                        Blah blah blah blah blah blah blah blah blah blah...<br>
                        <br>
                        Blah blah blah blah blah blah blah blah blah blah...
                    </span>
                </div>
            </div>
            <footer>
     
            </footer>
          </div>
        </body>
    </html>
    CSS

    HTML:
    body {
        background: url("http://i1211.photobucket.com/albums/cc426/mjwalker1988/Test/TestBackgroundV1.jpg");
    }
     
    header {
        background: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Banners/Fairhope%20Flyers%20Banner%20V3.png");
    }
     
    #Home {
        width: 170px;
        height: 30px;"
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Home%20Button%20V4.png");
    }
     
    #Roster {
        width: 170px;
        height: 30px;"
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Roster%20Button%20V4.png");
    }
     
    #Schedule {
        width: 170px;
        height: 30px;"
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Schedule%20Button%20V4.png");
    }
     
    #Multimedia {
        width: 170px;
        height: 30px;"
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Multimedia%20Button%20V4.png");
    }
     
    #Archives {
        width: 170px;
        height: 30px;"
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Buttons/Archives%20Button%20V4.png");
    }
     
    #TopStories {
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Banners/Top%20Story%20Banner.png");
    }
     
    #leftColumn {
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Top%20Story%20V1.png");
        position: relative;
    }
     
    #rightColumn {
        background-image: url("file:///C:/Users/Tyler2/Pictures/Graphic%20Design/Fairhope%20Flyers/Web%20Design/Top%20Story%20V1.png");
        position: relative;
        right: 350px;
    }
    
     
  12. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    I'm not sure I quite understand what you're saying still. I'm still pretty new when it comes to web design coding...
     
  13. IXI DECAY IXI

    IXI DECAY IXI Walk On

    Joined:
    Dec 19, 2009
    Messages:
    1,220
    Does anybody know of any web hosting sites that are free that will allow me to upload my own HTML? If not then what are the easiest to use/cheapest hosting sites?
     

Share This Page