treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Attempting a simple tableless layout but having trouble with

  • Hi I'm attempting a simple tableless layout but having trouble with one transparent IMG that I need to stretch vertically. The code follows, and you can see a screenshot of what I'm trying to achieve HERE. Thanks for any help, this is just driving me crazy lol. :ugeek:

    semi

    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
    <html>
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
    <title>SEMICODIN&rsquo;S CSS MARKUP &loz;&loz;&loz;&loz;DRAFT&loz;&loz;&loz;&loz;</title>

    <style type=\"text/css\">

    body {margin: 0; background-image: url(http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg);}

    body,td,th {font-family: Arial; font-size: medium; color: #000000;}
    h1,h2,h3,h4,h5,h6 {font-family: Arial;}
    a:link {color: #009900; text-decoration: none;}
    a:visited {color: #009900; text-decoration: none; color: #000000;}
    a:hover {text-decoration: none;}
    a:active {text-decoration: none;}

    #BANNEROW {margin-top: 50px; margin-left: 10%; margin-right: 10%;}
    #BANNEROW div img {width: 66%;}

    #LOGO {float: LEFT; background-color: #FFFFFF; width: 80%; }

    #CURL {float: RIGHT; background-color: TRANSPARENT; width: 20%;}

    #CONTENT {float: LEFT; background-color: #FFFFFF; padding: 7%; border: 3px solid #000000; margin-left: 10%; margin-right: 10%;}
    #CONTENT div img {width: 80%;}

    </style>
    </head>

    <body>

    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BANNEROW \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <div id=\"BANNEROW\">

    <div id=\"LOGO\">
    <div style=\"border-left: 3px solid #000000; border-top: 3px solid #000000; padding: 2%;\">
    <a href=\"http://sites.google.com/site/semicodin/ohTHAT/bracket\" target=\"blank\">
    <img src=\"http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg\" style=\"border: 0px;\" title=\"CLICK ANY GRAPHIC\" alt=\"\"></a>
    </div>
    </div>


    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CURL \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <div id=\"CURL\">
    <img src=\"http://sites.google.com/site/semicodin/ohTHAT/bracket/CURLY.gif\" style=\"border: 0px; width: 100%; height: 100%;\" title=\"CLICK ANY GRAPHIC\" alt=\"\">
    </div>
    </div><!-- Closing BANNEROW -->


    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
    <div id=\"CONTENT\">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
    felis. Aliquam sit amet felis. Mauris semper,
    velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
    nisl in quam. Etiam augue pede, molestie eget,
    rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
    odio sagittis blandit. Maecenas at nisl. Nullam
    lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
    wisi. Ut ante dui, aliquet nec, congue non, accumsan
    sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
    venenatis. Suspendisse cursus velit vel ligula.
    Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
    suscipit. Aenean quis risus sit amet eros volutpat
    ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
    <br>
    <br>
    <div style=\"text-align: center;\">
    <a href=\"http://sites.google.com/site/semicodin/ohTHAT/bracket\" target=\"blank\">
    <img src=\"http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC2.jpg\" style=\"border: 0px solid #5FB7FC;\" title=\"CLICK ANY GRAPHIC\" alt=\"\"></a>
    </div>
    <br>
    <br>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
    felis. Aliquam sit amet felis. Mauris semper,
    velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
    nisl in quam. Etiam augue pede, molestie eget,
    rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
    odio sagittis blandit. Maecenas at nisl. Nullam
    lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
    wisi. Ut ante dui, aliquet nec, congue non, accumsan
    sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
    venenatis. Suspendisse cursus velit vel ligula.
    Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
    suscipit. Aenean quis risus sit amet eros volutpat
    ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>

    </div><!-- Closing CONTENT -->

    </body>
    </html>
  • I'm afraid I don't really understand what the problem is. Do you have a link to a live server where we can see the issue?
  • Sorry, I'm afraid not. There is a link on the page which works however.