Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    some help please

    i was wondering if someone could add 2 side boxes to the lef side of this page, inside the content area, thanks.

    Download Here

  • #2
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    post your code and i will, but i don't download things... sorry.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    index.html
    Code:
    <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
    Code:
    /* --------------------------------
       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;
    }

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Decker,

    and a warm welcome to these forums.

    Check out...

    ...which contains a reworking of the document.

    coothead

  • Users who have thanked coothead for this post:

    Decker (08-24-2010)

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Thanks coothead. I appreciate it man.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    No problem, you're very welcome.

  • Users who have thanked coothead for this post:

    Decker (08-24-2010)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @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

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    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...

    ...which, if it does not help, should certainly amuse you.

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •