If you are copying-pasting, the file organisation is as follows:- .myHTML.html
- .mysay.css
- /images/bg.png
- /images/textbg.gif
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="yoursay.css" />
<title>Have your Say!</title>
</head>
<body>
<div id="wrapper">
<div id="formcontrols">
<form action="" method="post">
Name
<br/>
<input type="text" name="myname" size="30" id="eachcontrol" />
<br/><br/>
<br/>
<input type="text" name="myemail" size="30" id="eachcontrol" />
<br/><br/>
http://
<br/>
<input type="text" name="myhttp" size="30" id="eachcontrol" />
<br/><br/>
Comments
<br/>
<textarea name="myComments" rows="2" cols="23" id="eachcontrol" >
</textarea>
<br/><br/>
<input type="button" name="preview" value="PREVIEW" class=
"previewbtn"/>
<br/><br/>
Remember details?<br/>
<input type="checkbox" name="chkremember" />
<br/><br/>
</form>
</div>
<div id="myColumn">
<h3>HAVE YOUR SAY</h3>
<div id="content">
<p>Feel free top publish your thoughts but please be judicious
when communicating I am.</p>
<p>Gravatars are enabled. Go get yourself one.</p>
<p>All the cool kids use Textile.</p>
<p>Email address is required but will not be posted or
distributed.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
font-family:Verdana;
font-size:16px;
color:#ffffff;
margin:0 auto;
}
h3{
width:350px;
border-width: 0px 0px 3px 0px;
border-style:dashed;
font-size:30px;
padding:12px;
text-align:center;
background-color:orange;
margin:10px 0px 10px 0px;
padding:2px 2px 5px 2px;
}
#wrapper
{
margin:50px;
float:left;
background-image:url('images/bg.png');
background-repeat:repeat;
width:700px;
}
#formcontrols
{
width:280px;
float:left;
padding:10px;
}
#myColumn{
width:380px;
float:left;
}
#content{
margin-left:30px;
width:300px;
float:left;
}
#eachcontrol
{
background-image:url('images/textbg.gif');
background-repeat:repeat;
}
.previewbtn
{
border:3px solid;
border-color: #ffffff #000000 #000000 #ffffff;
color:#ffffff;
background-image:url('images/bg.png');
background-repeat:repeat;
padding:7px 20px 7px 20px;
}
No comments:
Post a Comment