View Full Version : First attempt at HTML/CSS Questions

08-05-2011, 12:44 PM
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<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" />
<table align="center" width="1000" border="0" class="title" c>
<tr >
<td colspan="2" >
<h2 class="frame" style="text-align:center">Title</h2 >
<tr >
<td class="menu">
<h3 >Menu</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>


<h4 style="text-align:left">Unordered list </h4>
<ul class="a">
<li>Orange Juice</li>
<li>Energy Drinks</li>

<h4 style="text-align:left">Ordered List </h4>
<ol class="b">
<li>Orange Juice</li>
<li>Energy Drinks</li>

<h4 style="text-align:left">Definition list </h4>
<dt class="c">Iaido</dt>
<dd>Art of drawing the sword</dd>
<dt class="c";>Kenjutsu</dt>
<dd>Japanese swordsmanship</dd>

<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 />

<textarea cols="40" rows="5" id="comments">Enter comments here</textarea><br/>

<input type="submit" value="Submit" />


<p class="code"> print "Hello, World!" <p>





{margin-left:20px; text-align:justify}




.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 <table align="center" width="1000" border="0" class="frame" >

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.

08-05-2011, 02:55 PM
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 (http://www.hotdesign.com/seybold/)about the downfalls of tables for layouts.

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