deniskoo blog - C#, HTML, XHTML, CSS, Javascript, Project Management - WEB 2.0: DIV

Showing posts with label DIV. Show all posts

Showing posts with label DIV. Show all posts

Wednesday, March 25, 2009

Have Your Say!

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/>
          Email
          <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;
}

Friday, March 20, 2009

Using DIVs

Divs tags are used to separate contents in blocks, or more specifically, divides sections in the html file (content).

When you have your contents divided in a number of divs, you can apply whatever fancy styles to your divs for formatting, presentation, design etc (CSS).

Below are the CSS tag styles (tested and optimised on IE 7 only, but works fine in Firefox/Safari)
Just add it in an external css file, and link to it in your html using the <link> tag in the <head> section.

Note: I added a Header (H3) in the HTML file for HTML and CSS in the boxes to the right, so that the whole line is gray.

html{
font-family:"Times New Roman";
color:black;
margin: 0 auto; /* Centred Page */
width:800px;
margin-left:100px;
font-size:14px;
}
#heading{
font-size:20px;
font-weight:bold;
margin:10px 0px 0px 0px;
}

#navigation,#footer{
color:orange;
text-transform:uppercase;
font-weight:bold;
margin:0px 10px 0px 0px;
}

#content{
width:790px;
}

#text{
float:left;
width:500px;
}

#summary{
float:left;
width:250px;
}

#html,#css{
width:300px;
border:thin;
border-style:solid;
border-color:gray;
margin: 0px 20px 10px 20px;
}

h3{
background:gray;
font-size:14px;
color:white;
}

.cssgraybackground{
background:gray;
}
a{
color:orange;
}
ul{
margin-left:0px;
margin-top:30px;
margin-bottom:30px;
margin-right:10px;
}

li{
list-style-type:none;
display:inline;
border-style:solid;
border-color:white gray white white;
border-width:2px;
margin: 0px 0px 0px 0px;
}

Subscribe to: Posts (Atom)