1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make the margins of my table appear to keep going in height of the page.

Discussion in 'CSS' started by JayMorrow, Jan 16, 2013.

  1. #1
    So I have a Photoshop image of what I'm trying to do here: http://i.imgur.com/LP3Wq.jpg

    I have everything done, including the border shadow, but I'm not sure how to make that table run off the page in height like I've set out in Photoshop.

    I'm actually not even sure if that would be a CSS thing, I'd really appreciate being pointed in the right direction here, I learn fast (so you won't need to dumb things down for me) but I've never had to make a table do this before.

    Thanks,

    Jay Morrow.
     
    JayMorrow, Jan 16, 2013 IP
  2. sadamsam

    sadamsam Greenhorn

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    13
    #2
    Hai,

    You should use following code.

    /* --- html here --- */

    <html><body>

    <img class="decoded" style="cursor: -moz-zoom-out" alt="http://i.imgur.com/LP3Wq.jpg" src="http://i.imgur.com/LP3Wq.jpg">


    <tabel><tr>
    <td>Book Name</td><td>Author</td>
    </tr>
    <tr><td>Java</td><td>James Gossline</td></tr>
    <tr><td>C</td><td>Balagurusamy</td></tr>
    </tabel>
    </body>
    </html>

    /* --- css here --- */

    img.decoded {
    background: url("chrome://global/skin/media/imagedoc-lightnoise.png") repeat scroll 0 0 #E5E5E5;
    color: #222222;
    position: absolute;
    }

    tabel
    {
    width:500px;
    height:auto;
    margin:350px 0px 0px 500px;
    position:absolute;
    background:none;
    }

    tabel tr
    {
    width:500px;
    height:auto;
    float:left;
    }

    tabel tr td
    {
    width:auto;
    height:auto;
    float:left;
    font-size:12px;
    text-align:center;
    }


    All the best.....
     
    Last edited: Jan 17, 2013
    sadamsam, Jan 17, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    1) what makes it a table?

    2) what makes it a table?

    Now, I realize this is in fact only one thing, but it's such a colossal point I felt it needed to be asked twice.

    What you are probably looking for is called 100% min-height -- which is typically achieved by setting HTML and BODY to height:100%; and an inner DIV to min-height:100%;

    Of course what sadamsam's example code has to do with anything is beyond me -- not only failed to understand the question, presented code that to be frank, means they need to back away from the keyboard.

    Though without seeing the code you are trying to work with or something remotely resembling content it's hard to weigh in on what markup you should be using or the style to apply to it -- it SOUNDS like you're working from the back-assward approach to site development of drawing pretty pictures in photoshop before you even have semantic markup of content (or a reasonable facsimile) and a working CSS layout -- meaning you're likely going to end up stuck shoe-horning your content into a layout it's not designed for.
     
    deathshadow, Jan 23, 2013 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    As deathshadow said, both the OP and sadamsam missed the point of tables and their use. Tables are, by NO means, made to style layouts. The tables are supposed to be used only for tabular data presentation.

    Again, not only the tables, but the code presented doesn't make any sense, applying an absolute position on every element is hilariously wrong, not even to mention that a tag such as <tabel> doesn't even exist. The omnipresent and non semantic misuse of <tr> as well as fixed width amplify the errors pointed above.

    Anyways, I didn't really understand what you need done here, but whatever it is, it won't take more that a kb or two of both css and html, along with a repeated image for the background and another one for the logo.

    By the way, I'm not going to comment flaws of the design itself, but believe me, there's more than one.

    Here's how I see it : two floated borders on either side of of the main content, whom you hide the overflow. The logo is an image, eventually, but not necessarily, anchored. It's liquid - it's good.

    Hope it helps
     
    wiicker95, Jan 23, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Thanks for the bump wiicker95, I was going to come back and write how I'd approach this anyways, then promptly forgot about this thread. :(

    I just tossed together a quick example of how i'd do that, which I put up live on my server here:
    http://www.cutcodedown.com/for_others/JayMorrow/

    Since it was already going to have 100% min-height, I gave it a "sticky footer" too... and made it a semi-fluid layout. Naturally the CSS3 doesn't fly in IE8/earlier, and IE6/earlier can't handle semi-fluid, but apart from that it should be functional/working all the way back to IE 5.5

    I also added images off graceful degradation.
     
    Last edited: Feb 2, 2013
    deathshadow, Feb 2, 2013 IP