Here is the code of the html page:
[html]<body>
<div id="main_block">
<div id="banner"></div>
<div id="menu_top">
<ul id="menu_list_top">
<li> <script language=javascript>dispDate(0)</script>
</li>
</ul>
</div>
<div id="main">
<form method="get" action="http://www.google.com/search">
<div id="search">
<input tpe="text" name="q" size="25" maxlength="255" value="" /><input type="submit" value="Search" /><br />
<input type="checkbox" name="sitesearch" value="xx.co.uk" checked /> Only search xx.co.uk
</div>
</form>
<br />
<br />
<br />
<h3>Welcome</h3>
<p>Welcome.<br />
Text.<br />
Text<br />
<br />
<br />
For more information <a href="xx.php">Contact Us</a> here.
</p>
</div>
<div id="column">
<br />
<p><a href="#"><img src="x.gif" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="x.com" target="_blank"><img src="x1.jpg" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="#"><img src="x3.jpg" alt="x" border="0" /><br />
Text.</a></p>
<p><a href="x.com" target="_blank"><img src="x3.jpg" alt="x" border="0" /><br />
text.</a></p>
<br />
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
</div>
<div id="copyright">© xxx. </div>
<div id="copyright"> </div>
</body>[/html]
and the CSS file :
Expand|Select|Wrap|Line Numbers
- html, body {
- margin:0;
- padding:0;
- text-align:center;
- }
- body {
- background-color:#EAEAEA;
- }
- #main_block {
- text-align:left;
- margin:0 auto;
- padding:10px 15px;
- width:706px;
- height:auto;
- background:url("../x2.gif") repeat-y;
- font:12px Verdana,Arial,Helvetica,sans-serif;
- color:#666;
- }
- #banner {
- font:6px Desyrel,BordeauxMedium;
- margin:5px;
- background:url("../x4.jpg") no-repeat;
- width:662px;
- height:105px;
- padding:10px 0 0 10px;
- }
- #content {
- width:676px;
- }
- #main {
- width:465px;
- height:auto;
- float:left;
- padding:10px;
- }
- #main a {
- text-decoration:none;
- font-weight:bold;
- color:#000000;
- }
- #main a:hover {
- background-color:#ADD8E6;
- color:#000000;
- }
- #mail_error {
- color:#FF0000;
- text-align:left;
- }
- #main p{
- color:#181818;
- }
- #box {
- width:156px;
- height:auto;
- padding:0 10px;
- border:1px dotted #FC6;
- }
- #menu {
- list-style:none;
- margin:4px;
- text-align:center;
- width:670px;
- height:15px;
- background-color:#ADD8E6;
- font:11px Verdana,Arial,Helvetica,sans-serif;
- text-decoration:none;
- }
- #menu a {
- font-weight:bold;
- text-decoration:none;
- color:#666;
- }
- #menu a:hover {
- font-weight:bold;
- background-color:#99CCFF;
- color:#000000;
- }
- #menu_top {
- margin:5px;
- width:662px;
- background-color:#ADD8E6;
- padding:0 0 0 5px;
- }
- #menu_list_top {
- font-weight:bold;
- list-style:none;
- margin:5px 0;
- padding:0 0 2px 0;
- }
- #column {
- float:none;
- list-style:none;
- margin:5px 0;
- padding:0;
- width:170px;
- text-align:center;
- }
- #column a {
- text-decoration:none;
- padding:5px;
- width:170px;
- display:block;
- color:#666;
- }
- #column a:hover {
- color:#666;
- }
- #noLine a {
- border-bottom:0;
- }
- h1 {
- font-size:28px;
- margin:0;
- color:#000000;
- }
- h2 {
- font-size:12px;
- margin:0 0 0 5px;
- color:#FFF;
- }
- h3 {
- font-size:28px;
- margin:0;
- }
- #clear {
- clear:both;
- }
- p {
- line-height:1.5em;
- color:#585858;
- }
- #copyright, #copyright a {
- padding-top:5px;
- text-decoration:none;
- text-align:center;
- font:10px Verdana,Arial,Helvetica,sans-serif;
- color:#666;
- }
- #copyright a:hover {
- color:#369;
- }
- #footer {
- margin:0 auto;
- height:10px;
- width:736px;
- background:url("../xc.gif") no-repeat;
- }
- #search {
- font:9px Verdana,Arial,Helvetica,sans-serif;
- }
Many thanks.