HTML/CSS question

Discussion in 'Web Design & Coding' started by Glaanieboy, Sep 30, 2003.

  1. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    OK, here is what I want to do. I am redisigning my website for school (Can only be accessed locally, it runs on the internal network). I used frames for the last page, but I want to get rid of them.
    Now I want to put it into one file, but with a left side bar for the menu. This side bar must have a different color than the rest of the page.
    Here is what I have atm (the code is till a little rough):
    index.php
    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
    <html>
    <head>
           <link href="style.css" rel="stylesheet" type="text/css">
           <title>Title here!</title>
    </head>
    <body>
    <table>
    <tr>
    <td class="side">
    <a href="?page=main">Mainpage</a><br />
    <a href="?page=drv">Drivers and Service Packs</a>
    </td>
    <td>
    Mainpage bladieblabla
    </td>
    </tr>
    
    </table>
    </body>
    </html>
    and here is the CSS file:
    style.css
    Code:
    body {
      font-family: Arial;
      font-size: 80%;
      color: #000000;
    }
    
    table {
      width : 100%;
      height : 100%;
    }
    
    td.side {
      border-style : none solid none none;
      border-right-width : thin;
      width : 50%; (only as a test, my final page won't have a 50% wide sidebar of course)
      height : 100%;
      background-color : yellow;
    }
    The problem is that somehow my <table> and <td> aren't 100% high, it is only as high as the text I typed in it, but the width is correctly parsed (as 50% wide). This happens both in Internet Explorer and Mozilla Firebird. Can someone explain why this happens and how I can do it correctly?
     
  2. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    it is because height is relative when set in percents, try using pixels, ie height:400px;

    I can t see that background color, you shouldn't use generic color tems, try #FFFF00

    (Also you have <br /> which is for XHTML)
     
  3. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    ok, check these out;

    and

     
  4. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Do note, that if you use pixels, and you go over the set limit, and anything else is after that page like shown at http://spooged.net/blog.php it wont be all nice, and it will walk over the other stuff.

    Causing the page to look pretty bad. I never use height personally, i just add more content to push it further down the page =).
     
  5. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Thanks. I already solved it by doing this:
    Code:
    body {
      font-family: Arial;
      font-size: 80%;
      background-image: url(images/01001011.jpg);
      background-repeat: repeat;
      color: #FFFFFF;
      background-attachment: fixed;}
    
    table {
      width : 100%;
      height : 100%;
    }
    
    td.side {
      background-image: url(images/10110100.jpg);
      background-repeat: repeat;
      color: #FFFFFF;
      background-attachment: fixed;
    }
    
    
    and
    Code:
    <html>
    <head>
        <title>Nieuwe pagina 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<table><tr><td style="width : 20%;" class="side">
    [...The rest...]
    
    Now I have a dark image for the main document, but the menu has a light image (the same as the dark image, but with inverted colors). Thanks for trying. :thumbsup:
     
  6. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Its the least we could try.