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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    First attempt at HTML/CSS Questions

    Hi. I am required to learn coldfusion, javascript, and SQL for my new employer (a federal agency) and I have only before programmed in C, C++, JAVA, MATLAB, VB/VBA, and LINGO. There's not many people around here that can sit down with me and give me one on one attention and it will be months before they will be able to put me into classes and I want o be aof some use before then so I'm trying to learn what I can before then.

    Currently I'm trying to get the basics down of HTML and CSS. I created a few bs pages playing around with things but there are things I can't get them to do what I want. Here is the code for the page and the css file that I'm working on now

    basicforcss.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="basicforcss.css" />
    <title >Test page</title>
    <base target="_blank" />
    <meta name="description" content="Test page" />
    <meta name="keywords" content="test" /> 
    </head>
    <body>
    <table align="center" width="1000" border="0" class="title" c>
    <tr >
    <td  colspan="2" >
    <h2 class="frame" style="text-align:center">Title</h2 >
    <td>
    </tr>
    <tr >
    <td class="menu">
    <h3 >Menu</h3>
    </td>
    <td>
    <h3>Content</h3>
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque 
    
    laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto 
    
    beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur 
    
    aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi 
    
    nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, 
    
    adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et 
    
    dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
    
    ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel 
    
    eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel 
    
    illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? <p>
    
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium 
    
    voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati 
    
    cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est 
    
    laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero 
    
    tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime 
    
    placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus 
    
    autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates 
    
    repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente 
    
    delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus 
    
    asperiores repellat... </p>
    
    <h3>Lists</h3>
    
    <h4  style="text-align:left">Unordered list </h4>
    <ul class="a">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange Juice</li>
    <li>Coffee</li>
    <li>Energy Drinks</li>
    </ul>
    
    <h4 style="text-align:left">Ordered List </h4>
    <ol class="b">
    <li>Coffee</li>
    <li>Milk</li>
    <li>Orange Juice</li>
    <li>Coffee</li>
    <li>Energy Drinks</li>
    </ol>
    
    
    <h4 style="text-align:left">Definition list </h4>
    <dl>
    <dt class="c">Iaido</dt>
    <dd>Art of drawing the sword</dd>
    <dt class="c";>Kenjutsu</dt>
    <dd>Japanese swordsmanship</dd>
    </dl>
    
    <h3>Forms<h3>
    <form name="input" action="somesubdomain.ssa.gov/somescript.cfm" method="get">
    <label for="firstname"> First name:</label> <input type="text" id="firstname"/><br />
    <label for="lastname"> Last name:</label> <input type="text" id="lastname" /><br />
    
    
    
    <label for="password"> Password:</label><input type="password" id="pwd" /><br />
    
    <p>Select your sex</p>
    <input type="radio" name="sex" value="male" />Male<br />
    <input type="radio" name="sex" value="female" />Female <br />
    
    <p>Select your dessert</p>
    <input type="checkbox" name="dessert" value="icecream" />Icecream<br />
    <input type="checkbox" name="dessert" value="applepie" />Apple Pie<br />
    
    <p>Comments</p>
    <textarea cols="40" rows="5" id="comments">Enter comments here</textarea><br/>
    
    
    <input type="submit" value="Submit" />
    
    </form>
    
    <h3>Code</h3>
    <p class="code"> print "Hello, World!" <p>
     
    </td>
    </tr>
    
    </table>
    
    
    </body>
    </html>
    basicforcss.css
    Code:
    p 
    {margin-left:20px; text-align:justify}
    
    body 
    {background-image:url("untitled.bmp");background-repeat:repeat-x;}
    
    table
    {background-color:#306EFF;}
    
    h2
    {font:ariel}
    
    .frame {background-image: url(test.svg);-o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%}
    
    .code {background-color:gray; font-family:"courier new", courier, monospace;}
    
    
    ul.a {list-style-type:circle;}
    
    ol.b {list-style-type:upper-roman;}
    
    dt.c {background-image: url(bullet-point.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px;}
    
    td.menu {vertical-align:bottom;}

    Now the problems with these are the following.

    The Menu cell in the table does not want to be aligned at the top which I thought I could do with a class td.menu {vertical-align:bottom;} and <td class="menu">.

    Also, I wanted an svg image to be streached behind the title in a frame class .frame {background-image: url(test.svg);-o-background-size: 100% 100%; -webkit-background-size: 100% 100%} and used on the entire table [ICLASS]<table align="center" width="1000" border="0" class="frame" >[/ICLASS]

    In addition I know there must be some very poor coding practices here and I would like you to point them out to me. Thank you.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    From where are you learning these basics? The reason I ask is because tables for layouts are very outdated and discouraged for modern webdesign, so before myself or anyone might take a stab at answering your problem, you might want to rethink the way and means by which you are learning the basics.

    Read here about the downfalls of tables for layouts.

    Also, I'm a CF developer too....so welcome! You'll probably love CF!
    Teed


  •  

    Posting Permissions

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