Decker
08-23-2010, 06:37 PM
i was wondering if someone could add 2 side boxes to the lef side of this page, inside the content area, thanks.
Download Here (http://www.mediafire.com/?zm73jsx7pq785tm)
jdswebservice
08-23-2010, 07:30 PM
post your code and i will, but i don't download things... sorry.
Decker
08-23-2010, 07:37 PM
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content=""/>
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="reset.html" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>Website</title>
</head>
<body>
<div id="paper_left">
<div id="paper_right">
<div id="layout_wrapper">
<div id="layout_container">
<div id="layout_content">
<div id="header_image"></div>
<div class="navigation">
<ul>
<li><a href="#"><font color="#f6ff00" face="System">Home</font></a></li>
<li><a href="#"><font color="#f6ff00" face="System">Register</font></a></li>
<li><a href="#"><font color="#f6ff00" face="System">Downloads</font></a></li>
<li><a href="#"><font color="#f6ff00" face="System">Vote</font></a></li>
<li><a href="#"><font color="#f6ff00" face="System>Contact</font></a></li>
<li><a href="#"><font color="#f6ff00" face="System">Donate</font></a></li>
</ul>
<div class="clearer"> </div>
</div>
<div id="main">
<div class="post">
<div class="post_top"></div>
<div class="post_body">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="post_metadata"></div>
</div>
<div class="post"></div>
</div>
<div id="footer">
<div align="center"><font color="#f6ff00" face="System">Copyright © 2010 Lost Conquer</font></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
/* --------------------------------
General
----------------------------------- */
html {
font-size: 62.5%; /* reset 1em to 10px */
height: 100%;
}
body {
background: #444 url('img/body.html');
color: #444;
font: normal 1.2em Verdana,Arial,sans-serif;
height: 100%;
padding-bottom: 1px; /* force scrollbars */
padding-top: 35px;
}
small,.small {font-size: 0.9em;}
a {
color: #EEC;
text-decoration: none;
}
a:hover {
color: #FFA;
text-decoration: underline;
}
p {padding: 0.2em 0 1.2em;}
blockquote, code {
background: #4A4A4A;
border: 1px solid #333;
color: #BBB;
display: block;
margin-bottom: 12px;
}
code {
font: normal 0.9em Verdana,sans-serif;
line-height: 1.5em;
padding: 8px 14px;
}
blockquote {
background: #4A4A4A url('img/quote.html') no-repeat left top;
padding: 6px 14px 6px 44px;
}
blockquote p {padding: 0.5em 0;}
/* --------------------------------
Headings, titles
----------------------------------- */
h1 {font: normal 2em Georgia,sans-serif;}
h2 {font: normal 1.6em Georgia,sans-serif;}
h3 {font: normal 1.4em Georgia,sans-serif;}
h4 {font: bold 1em Georgia,sans-serif;}
h1, h2, h3, h4 {margin-bottom: 5px;}
/* --------------------------------
Main layout
----------------------------------- */
#paper_left {
background: url('img/paper_left.html') no-repeat left top;
margin: 0 auto;
padding-bottom: 34px;
width: 778px;
}
#paper_right {
background: url('img/paper_right.html') no-repeat right bottom;
}
#layout_wrapper {
background: #50504A url('img/grain_dark.html');
margin: 0 auto;
width: 736px;
}
#layout_container {padding: 8px;}
#layout_content {border: 1px solid #333;}
#header_image {
height: 160px;
background: #222 url('img/header.jpg') no-repeat;
border-bottom: 1px solid #222;
border-top: 1px solid #111;
}
/* --------------------------------
Site title
----------------------------------- */
#site_title {
background: #222;
padding: 12px 20px;
}
#site_title h1 {
color: #EED;
font: normal 2em Georgia,sans-serif;
margin: 0 0 5px;
}
#site_title h2 {
color: #BFBFB6;
font: normal 1.1em sans-serif;
margin: 0;
}
/* --------------------------------
Navigation
----------------------------------- */
.navigation {
background: #353535 url('img/navigation.jpg') repeat-x;
border-bottom: 1px solid #222;
border-top: 1px solid #555;
}
.navigation ul {display: inline; margin: 0;}
.navigation ul li {
border-right: 1px solid #303030;
float: left;
list-style: none;
}
.navigation a {
color: #AAA;
display: block;
font: bold 1em Verdana,sans-serif;
padding: 12px 14px;
text-decoration: none;
}
.navigation a:hover {
background: #484848;
color: #E5E5D5;
text-decoration: none;
}
.navigation li.current_page_item a {
background: none;
color: #EEE;
}
/* Sub navigation */
#subnav a {
padding: 10px;
font-size: 0.9em;
}
/* --------------------------------
Main
----------------------------------- */
#main {
background: #4A4A4A;
color: #CCC;
}
#sidebar {
float:right;
width:250px;
background:#99c;
}
/* --------------------------------
Bottom
----------------------------------- */
#bottom {
background: #222;
border-bottom: 1px solid #1A1A1A;
border-top: 1px solid #2A2A2A;
color: #AAA;
padding: 16px;
}
#bottom ul li {
border-bottom: 1px solid #303030;
}
#bottom ul li a {
color: #777;
display: block;
padding: 4px 6px;
}
#bottom ul li a:hover {
background: #2A2A2A;
color: #FFC;
text-decoration: none;
}
/* Tag cloud */
#tag_cloud a {color: #777;}
#tag_cloud a:hover {color: #FFC;}
/* --------------------------------
Footer
----------------------------------- */
#footer {
background: #2A2A2A;
border-bottom: 1px solid #1A1A1A;
border-top: 1px solid #333;
color: #888;
font-size: 0.9em;
padding: 10px 12px;
}
#footer a {color: #AAA;}
#footer .right,#footer .right a {color: #555;}
#footer a:hover {color: #BBB;}
/* --------------------------------
Floats
----------------------------------- */
.left {float: left;}
.right {float: right;}
.clear,.clearer {clear: both;}
.clearer,.block {
display: block;
line-height: 0;
font-size: 0;
}
.clearer {height: 0;}
/* --------------------------------
Misc
----------------------------------- */
/* Columns */
.col3, .col3last {width: 31%; margin-right: 3%;}
.col3last {margin-right: 0;}
/* Images */
img.bordered {padding: 3px; background: #666;}
/* Text */
.tleft {text-align: left;}
.tcenter {text-align: center;}
.tright {text-align: right;}
.vtop {vertical-align: top;}
/* Label */
.label {
background: #222 url('img/post_top.gif') repeat-x left top;
border-bottom: 2px solid #555;
color: #BBB;
margin: 0;
padding: 0.5em 0.8em 0.6em;
}
/* Margin, padding, width, height */
.ptb10 {padding: 10px 0;}
/* --------------------------------
Posts
----------------------------------- */
.post {
background: #363636;
border-bottom: 1px solid #111;
}
.post_title h2 {
font-size: 2em;
margin: 0;
padding: 0;
}
.post_body {
background: url('img/post_body.jpg') no-repeat left top;
border-top: 1px solid #333;
padding: 16px 16px 0;
}
.post_metadata {padding: 10px;}
.post_metadata .content {
background: #424242;
color: #999;
font-size: 0.9em;
padding: 10px 12px;
}
.post_metadata a {color: #BBB;}
.post_metadata a:hover {color: #DDD;}
.post_body ul, .post_body ol {margin: 0 0 1em 1.5em;}
.post_body ul {list-style: disc;}
.post_body ol {list-style: decimal;}
/* ----------------------------------------
Forms
------------------------------------------- */
form {margin: 0; padding: 0;}
/* Inputs */
input#s, textarea, input.styled {
background: #DDD;
border: 3px solid #555;
font: normal 1em Verdana,sans-serif;
padding: 3px;
width: 160px;
}
textarea {width: 440px;}
/* Seachform */
table.search {
border-collapse: collapse;
width: 250px;
}
table.search td {vertical-align: top;}
/* ----------------------------------------
Comments
------------------------------------------- */
.comment_gravatar {width: 48px;}
.comment_gravatar img {
background: #666;
border: 1px solid #444;
padding: 2px;
}
.comment_author {
color: #EEE;
padding-top: 2px;
}
/* ----------------------------------------
Lists
------------------------------------------- */
.nicelist {padding: 0;}
.nicelist ol {margin: 0;}
.nicelist ol li {
border-bottom: 1px solid #333;
border-top: 1px solid #505050;
list-style: none;
padding: 8px 10px 1px;
}
.nicelist ol li:first-child {border-top: none;}
.nicelist li.alt {background: #444;}
.nicelist .body {padding-top: 5px;}
.nicelist .date {
color: #999;
font-size: 0.9em;
padding-top: 4px;
}
.nicelist .date a {
color: #BBB;
text-decoration: none;
}
.nicelist .date a:hover {text-decoration: underline;}
/* ----------------------------------------
Archives
------------------------------------------- */
.archive_title {font: normal 1.4em sans-serif;}
.archive_title a {text-decoration: none;}
.archive_title a:hover {text-decoration: underline;}
.archive_postinfo {padding-bottom: 6px;}
/* ----------------------------------------
Pagination
------------------------------------------- */
.pagenavigation {
background: #555;
border-top: 1px solid #444;
font-size: 0.9em;
padding: 7px 8px 9px;
}
.pagenavigation a {
color: #CCC;
text-decoration: none;
}
.pagenavigation a:hover {
color: #FFF;
text-decoration: underline;
}
coothead
08-23-2010, 10:57 PM
Hi there Decker,
and a warm welcome to these forums. ;)
Check out...
Decker.zip (http://www.megaupload.com/?d=JDAM6PPG)
...which contains a reworking of the document.
coothead
Decker
08-24-2010, 02:03 PM
Thanks coothead. I appreciate it man.
coothead
08-24-2010, 05:50 PM
No problem, you're very welcome. ;)
Decker
08-24-2010, 07:48 PM
@coothead,
If you don't mind me asking, where did you learn your CSS/HTML? I know some of HTML but none of CSS. I really wanna learn CSS. If you could tell me where you learned at that would be great. I have watched like youtube videos lol. They haven't really tought me anything. But if you know any links that will teach me CSS, I would greatly appreciate it. Thank you.
Decker
coothead
08-24-2010, 08:10 PM
Hi there Decker,
I learned CSS methodology here at CodingForums.com and similar forums. ;)
For me, trying to solve real problems was the best way. ;)
But if you know any links that will teach me CSS, I would greatly appreciate it
I can help you with that, try this...
possible helpful link (http://lmgtfy.com/?q=CSS+tutorials)
...which, if it does not help, should certainly amuse you. :D
coothead