Hi
I want to show you an entire website programmed by me just in code without image.
(The site is more beautiful with InternetExplorer, this is the disadvantage)
Here you can see the website.
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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
scrollbar-highlight-color:#3e7438;
scrollbar-shadow-color:#3e7438;
scrollbar-3dlight-color:#3e7438;
scrollbar-arrow-color:#c1c1c1;
scrollbar-track-color:#3e7438;
scrollbar-darkshadow-color:#3e7438;
scrollbar-base-color:#ffffff;
}
-->
</style>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page"> <!-- Start -->
<div class="Active" id="header">
<div id="header_minibar">
</div>
<div id="h_text"><strong>Your WebSite</strong></div>
<p>
<ul id="Tabnav">
<li class="Active"><a href="#">Home</a></li>
<li><a href="#">Us</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div id="left_part">
<div id="n_text">
<p>Welcome to Your Website !</p>
<p>News :</p>
<div id="news">NEWS!</div>
<p>Content : </p>
<div id="content">TEXT!</div>
</div>
</div>
</div> <!-- End -->
</body>
</html>
CSS :
/* CSS Document */
#page
{
width:100%;
height:700px;
background-color:#34622f;
}
#header
{
width:100$;
height:125px;
background-color:#4d8347;
border-bottom:3px solid #6fac69;
text-align:left;
}
#header_minibar
{
width:100%;
height:32px;
background-color:#3e7438;
}
#n_text
{
text-decoration:none;
font-family:Courier New, Courier, monospace;
font-size:14px;
}
#h_text
{
text-decoration:none;
font-family:Courier New, Courier, monospace;
font-size:45px;
padding:0 0 0 5%;
border-top:2px dashed #34622f;
border-bottom:2px dashed #34622f;
}
#left_part
{
position:absolute;
margin:0 0 0 10%;
width:80%;
height:559px;
background-color:#2c5328;
}
#news
{
width:100%;
height:100px;
overflow:
auto;
background-color:#3e7438;
border-top:2px solid #34622f;
border-bottom:2px solid #34622f;
}
#content
{
width:100%;
height:250px;
overflow:
auto;
background-color:#3e7438;
border-top:2px solid #34622f;
border-bottom:2px solid #34622f;
}
ul#Tabnav
{
list-style-type:none;
padding-bottom:24px;
border-bottom:5px solid #6fac69;
margin:0;
}
ul#Tabnav li
{
float:left;
height:24px;
background:#b8e597;
margin:2px 2px 0 2px;
border:1px solid #7ed63d;
}
ul#Tabnav li.Active
{
background-color:#34622f;
}
#Tabnav a
{
float:left;
display:block;
color:#666;
text-decoration:none;
padding:4px;
}
#Tabnav a:hover
{
background-color:#dbffc1;
}
