...

View Full Version : some help please



Decker
08-23-2010, 07: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, 08:30 PM
post your code and i will, but i don't download things... sorry.

Decker
08-23-2010, 08: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">&nbsp;</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, 11: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, 03:03 PM
Thanks coothead. I appreciate it man.

coothead
08-24-2010, 06:50 PM
No problem, you're very welcome. ;)

Decker
08-24-2010, 08: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, 09: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum