2009-01-17, 04:49 PM
When I put the following codes together, the result is as follows: Sucu
<html>
<head>
<title>Ruby Language</title>
<meta name="keywords" content="Language, Ruby, Sucu, Totality Works" />
<meta name="description" content="Ruby is the langaage created by Elegant Totality in Totality Works for all of us. />
<link href="sucu.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>The Wonderful Language of Ruby</h1>
<h2>The Language of Wonder</h2>
</div>
<div id="navigation">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="/gosuna">Forums</a></li>
<li><a href="/learm">Learn Ruby</a></li>
<li><a href="/downloads">Downloads</a></li>
<li><a href="/dictionary">Dictionary</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<h2>Welcome</h2>
<p>To Ruby Language.ext!<br /><br />
[More welcoming text here]</p>
<h2>About</h2>
<p>How we began this journey<br /><br />
Ruby began as a code that I could write my secrets with no fear of them being discovered. But I found that as I wrote, I understood. The repeating words became etched into my mind, I soon began translating text that I had read daily: my Bible, my work, newspapers. So I decided to translate language files of MyBB, LiteBulletin, and phpBB. This language is not hard to learn, nor is it easy to forget. Just as Spanish is Español and French is Français, Ruby is Sucu.</p>
</div>
<div id="right">
<h2>Right Header 1</h2>
<h3>A sub-Header in this section.</h3>
<p>A paragraph that will explain this section</p>
<h2>Sucu</h2>
<p>To see this page translated in Ruby, click here: <a href="/sucu">Translate</a>.
</div>
</div>
<div id="footer">
<p>Copyright © 2009 <a href="http://www.totalityworks.co.cc">Totality Works</a></p>
</div>
</body>
</html>
/************* GENERAL CSS ************/
body {
margin: 0px;
padding: 0px;
background: #666666 url(images/back.png) repeat-y center top;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #3399FF;
}
a {
font-weight: bold;
text-decoration: none;
color: #33CCFF;
}
a:hover {
text-decoration: underline;
color: #33CCFF;
}
/************* HEADER STUFF ************/
#header {
width: 770px;
height: 120px;
margin: 0px auto;
padding: 10px 0px;
background: #FFFBFD url(images/header.jpg);
}
#header h1 {
margin: 0px;
padding: 0px 0px 0px 10px;
text-align: left;
color: #3399FF;
font-size: 3em;
text-transform: uppercase;
}
#header h2 {
margin: 0px;
padding: 0px 0px 0px 20px;
text-align: left;
font-size: 1.5em;
text-transform: uppercase;
}
/************* MENU ************/
#menu {
width: 770px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background-color: #000000;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
padding: 5px 15px;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
background-color: #333333;
}
/************* CONTENT ************/
#content {
width: 770px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
}
#content h2, #content h3, #content h4, #content h5, #content h6 {
font-weight: normal;
}
#content p, #content ul, #content ol {
line-height: 150%;
}
#left {
float: left;
width: 480px;
padding: 0px 20px 40px 20px;
}
#right {
float: right;
width: 210px;
padding: 0px 20px 40px 20px;
color: #99CCFF;
}
/************* FOOTER ************/
#footer {
clear: both;
width: 771px;
margin: 0px auto;
border-top: 1px solid #666666;
background: url(images/back-footer.png) repeat-y center top;
font-size: 9px;
text-align: center;
padding: 2px;
color: #333333;
}