How do change an HTML/CSS from a blog into a personal website?

I downloaded a CSS template to make a section of my website, but the CSS/HTML is for a blog, rather than for a personal website. I'm wondering how to change all that so that it still looks the same, but without the characteristics of a blog?

Here's the CSS:

Expand|Select|Wrap|Line Numbers

 
/*

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License

*/
 
* {

    margin: 0;

    padding: 0;

}
 
body {

    background: #FBE8E8 url(images/img01.jpg);

    text-align: justify;

}
 
body, input, textarea, select {

    font: normal small Georgia, "Times New Roman", Times, serif;

    color: #662C14;

}
 
h1, h2, h3 {

    margin-bottom: 1em;

    font-weight: normal;

}
 
h1 {

    font-size: 2.2em;

}
 
h2 {

    font-size: 1.7em;

}
 
h3 {

    font-size: 1.3em;

}
 
p, blockquote, ul, ol, form {

    margin-bottom: 1.5em;

}
 
blockquote, ul, ol {

    margin-left: 3em;

}
 
blockquote {

    margin-right: 3em;

    font-style: italic;

}
 
ul {

    list-style-type: square;

}
 
a {

    color: #662C14;

}
 
a:hover {

    text-decoration: none;

}
 
hr {

    display: none;

}
 
.hr {

}
 
img.left {

    float: left;

    margin: 0 15px 15px 0;

}
 
img.right {

    float: right;

    margin: 0 0 15px 15px;

}
 
/* Wrapper */
 
#wrapper {

    padding: 20px 0;

    background: url(images/img02.jpg) repeat-x;

}
 
/* Header */
 
#header {

    width: 700px;

    height: 160px;

    margin: 0 auto;

    background: url(images/img03.gif) no-repeat;

}
 
#header h1, #header h2 {

    margin: 0;

}
 
#header h1 {

    padding-top: 40px;

    text-align: center;

    font-size: 4em;

}
 
#header h2 {

    text-align: center;

    font-size: 1em;

    font-style: italic;

}
 
#header a {

    text-decoration: none;

}
 
/* Content */
 
#content {

    width: 700px;

    margin: 0 auto;

    background: #FBE8E8 url(images/img04.gif) repeat-y;

}
 
/* Blog */
 
#blog {

    float: right;

    width: 424px;

    padding: 50px 20px 0px 16px;

    background: url(images/img06.gif) no-repeat;

}
 
/* Post */
 
.post {

    margin-bottom: 20px;

    padding-bottom: 20px;

    background: url(images/img08.gif) no-repeat center bottom;

}
 
.post .title {

    margin-bottom: 15px;

    padding-left: 15px;

    border-bottom: 1px solid #D3B6AF;

    text-transform: uppercase;

    font-size: small;

    font-weight: bold;

}
 
.post .title a {

    text-decoration: none;

}
 
.post .title a:hover {

    text-decoration: underline;

}
 
.post .date {

    margin-top: -30px;

    padding-right: 15px;

    text-align: right;

    font-size: x-small;

}
 
.post .entry {

    padding: 20px 15px 10px 15px;

    line-height: 1.8em;

}
 
.post .meta {

    margin-bottom: 2em;

    padding: 0 15px;

    text-align: right;

    font-size: x-small;

}
 
/* Sidebar */
 
#sidebar {

    float: left;

    width: 204px;

    padding: 50px 16px 0px 20px;

    background: url(images/img05.gif) no-repeat;

}
 
#sidebar ul {

    margin: 0;

    list-style: none;

}
 
#sidebar li {

    margin-bottom: 20px;

}
 
#sidebar li ul {

    padding-left: 5px;

    line-height: 1.4em;

}
 
#sidebar li li {

    margin: 0;

    padding-left: 12px;

    background: url(images/img07.gif) no-repeat left center;

}
 
#sidebar h2 {

    margin-bottom: 15px;

    padding-left: 5px;

    border-bottom: 1px solid #D3B6AF;

    text-transform: uppercase;

    font-size: small;

    font-weight: bold;

}
 
#sidebar a {

    text-decoration: none;

}
 
#sidebar a:hover {

    text-decoration: underline;

}
 
/* Search */
 
#search {

}
 
#search h2 {

}
 
#search form {

}
 
#search #inputtext1 {

}
 
#search #inputsubmit1 {

}
 
/* Archives */
 
#archives {

}
 
/* Categories */
 
#categories {

}
 
/* Blogroll */
 
#blogroll {

}
 
/* Meta */
 
#meta {

}
 
/* Footer */
 
#footer {

    width: 700px;

    margin: 0 auto;

    padding-top: 43px;

    background: url(images/img09.gif) no-repeat;

}
 
#footer p {

    margin: 0;

    padding: 20px 0;

    text-align: center;

    font-size: x-small;

    color: #FFFFFF;

}
 
#footer a {

    color: #FFFFFF;

}

And, here's the HTML:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License
 
Title      : The Manor

Version    : 1.0

Released   : 20070331

Description: A two-column fixed-width template. Suitable for blogs and small business websites.
 
-->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>The Manor by Free Css Templates</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

    <div id="header">

        <h1><a href="/">The Manor</a></h1>

        <h2><a href="http://www.freecsstemplates.org/">by Free CSS Templates</a></h2>

        <hr />

    </div>

    <div id="content">

        <div id="blog">

            <div id="post-1" class="post">

                <h2 class="title"><a href="#">Welcome to The Manor!</a></h2>

                <h3 class="date">March 26, 2007</h3>

                <div class="entry">

                    <p><strong>The Manor</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 Licens</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>

                </div>

                <p class="meta">Posted in <a href="http://www.pdphoto.org/">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>

                <div class="hr">

                    <hr />

                </div>

            </div>

            <!-- end #post-1 -->

            <div id="post-2" class="post">

                <h2 class="title"><a href="#">Sample Tags</a></h2>

                <h3 class="date">January 31, 2007</h3>

                <div class="entry">

                    <p>A one-sentence paragraph followed by a blockquoted paragraph.</p>

                    <blockquote>

                        <p>&ldquo;Nam et orci et leo iaculis tempor. Duis ante ante, pretium sit amet, feugiat ut, semper ac, nisl. Praesent eget mauris. Duis in pede. Vestibulum nec libero.&rdquo;</p>

                    </blockquote>

                    <h3>Heading Level Three</h3>

                    <ul>

                        <li>Proin eu ligula ut est congue malesuada.</li>

                        <li>Nunc eleifend felis nec purus.</li>

                        <li>Duis sodales urna sit amet nulla.</li>

                    </ul>

                    <h3>Ordered List</h3>

                    <ol>

                        <li>Donec fringilla leo eget erat.</li>

                        <li>Nunc condimentum cursus lorem.</li>

                        <li>Cras sodales venenatis metus.</li>

                    </ol>

                </div>

                <p class="meta">Posted in <a href="http://www.pdphoto.org/">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>

                <div class="hr">

                    <hr />

                </div>

            </div>

            <!-- end #post-2 -->

        </div>

        <!-- end #blog -->

        <div id="sidebar">

            <ul>

                <li id="search">

                    <h2>Search</h2>

                    <form id="form1" method="get" action="#">

                        <div>

                            <input id="inputtext1" type="text" name="inputtext1" value="" />

                            <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Search" />

                        </div>

                    </form>

                </li>

                <!-- end #search -->

                <li id="archives">

                    <h2>Archives</h2>

                    <ul>

                        <li><a href="#">March 2007</a></li>

                        <li><a href="#">February 2007</a></li>

                        <li><a href="#">January 2007</a></li>

                        <li><a href="#">December 2006</a></li>

                        <li><a href="#">November 2006</a></li>

                    </ul>

                </li>

                <!-- end #archives -->

                <li id="categories">

                    <h2>Categories</h2>

                    <ul>

                        <li><a href="#">Uncategorized</a> <small>(6)</small></li>

                        <li><a href="#">Condimentum Cursus</a> <small>(28)</small></li>

                        <li><a href="#">Praesent Sit Mauris</a> <small>(14)</small></li>

                        <li><a href="#">Leo Iaculis Tempor</a> <small>(23)</small></li>

                        <li><a href="#">Dignissimos Ducimus</a> <small>(19)</small></li>

                    </ul>

                </li>

                <!-- end #categories -->

                <li id="blogroll">

                    <h2>Blogroll</h2>

                    <ul>

                        <li><a href="#">Lorem Ipsum Dolor</a></li>

                        <li><a href="#">Tempor Leo Iaculis</a></li>

                        <li><a href="#">Cursus Dignissimos</a></li>

                        <li><a href="#">Ducimus Condimentum</a></li>

                        <li><a href="#">Praesent Sit Mauris</a></li>

                    </ul>

                </li>

                <!-- end #blogroll -->

                <li id="meta">

                    <h2>Meta</h2>

                    <ul>

                        <li><a href="#">Site Admin</a></li>

                        <li><a href="#">Logout</a></li>

                        <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>

                        <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>

                        <li><a href="http://www.freecsstemplates.org/" title="Designed by Free CSS Templates.">Free CSS Templates</a></li>

                    </ul>

                </li>

                <!-- end #meta -->

            </ul>

        </div>

        <!-- end #sidebar -->

        <div style="clear: both; height: 1px;"></div>

    </div>

    <!-- end #content -->

    <div id="footer">

        <p>Copyright &copy; 2007 The Manor. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>

    </div>

</div>

<!-- end #wrapper -->

</body>

</html>

So, just to be clear, I'd like to know how to change the Archives/Categories/Blogroll/Meta menus into working navigation menus on the left side of the main body. Also, I only need the first section of the 'blog;' not three. Thank you so much to anyone who can help. <3

Oct 3 '10 #1

Subscribe Post Reply

✓ answered by Death Slaught

@Lady Gray
As you seem to have figured out, you only need to edit a few minor things to make the change. It would be very beneficial for you to learn a little more about HTML and CSS though. For your needs W3school's tutorials would be a great place to start.

Thanks, Death

2214

JKing

1,206

Expert 1GB

Have you made any attempt to do this for yourself(aside from downloading a free template)? Or are you just looking for free work?

Oct 4 '10 #2

Lady Gray

I don't know anything about CSS and am basically fumbling my way through the HTML bit of it. It's a trial and error process for me, where I change something small, save it, then look at it as a local file to see if I managed to change what I wanted to.

I did manage to figure out a way to make the layout work for me; I just changed the title of "Archives" to "Navigation" and the "Blogroll" to "Links." It wasn't exactly what I wanted, but the links work and it looks the way I wanted it to, so I suppose it's a temporary fix for now.

Oct 4 '10 #3

Death Slaught

1,137

1GB

Oct 4 '10 #4

Lady Gray

@ Death-

I have gone over quite a few of the tutorials on W3school already, which is probably why I've managed to not mangle things too terribly badly.

I suppose I'll just have to take a weekend and go into everything in-depth so I have a better idea of what I'm doing.

Thank you so much for your help!

Oct 4 '10 #5

by: H | last post by:

Ok, heres the deal ; I have my script code like this var v = "place"; for (var i = 0 ; i < 5 ; i++) { v = v + i; // or v = "place" +i; // Here I want to access the resource in the HTML doc,...

Javascript

change HTML label on the fly

by: Matt | last post by:

I want to change the label on the fly (when the user click the checkbox), but my attempt InputForm.lataLbl.value = "LATA * "; didn't work. Here's my code, any ideas? thanks !!! <html>...

Javascript

Change print orientation by website

by: Nevets Steprock | last post by:

I have a webpage that prints nicely when the layout is switched from portrait to landscape. Many of my site users have mistakenly printed it without making the change to their settings and end up...

ASP.NET

ASP.NET 2.0 Personal Website problem

by: Bendik Engebretsen | last post by:

I have made an ASP.NET 2.0 site using the Personal Website Starter Kit. I did this on an XP machine and it the site runs fine on this machine. I have then tried to publish it to our Windows 2003...

ASP.NET

Change HTML

by: WhatsPHP | last post by:

Can PHP be used to change my clients static HTML pages? By themselves? Instead of having to download the HTML from the server, then use dreamweaver and upload the file back? Thanks Rohan

PHP

Creating Comcast Personal Website with VS2005

by: Paul Lennon | last post by:

Hi, I hope I have selected the right group for this question, I am looking for assistance with using VS2005 to create a simple website on my ISP. Using VS2005 I have created a Website project...

ASP.NET

How to change HTML file extension as .mht using HTML code ?

by: VishalK | last post by:

Friends.. I have a HTML file. Using HTML Code, I want to change its file extension from .html to .mht. eg : TestFile.html to be converted to TestFile.mht Anybody has any idea about this ? Please...

HTML / CSS

How to form a method to change HTML TD Attributes when passed element ID?

by: Shannon | last post by:

Hello, thank you for taking the time to read this. I am totally stumped on this one. I have a ton of TD attributes that have to be changed based on the data in the DB. All TD elements are ID...

ASP / Active Server Pages

change default "New Website" location

by: wheretheicegrows | last post by:

Is there some way to change the default location for new websites in Visual Studio 2008. It seems one can change the "Visual Studio projects location", the "Visual Studio user project templates...

ASP.NET

Troubleshooting Personal Website Starter Kit

by: Jonathan Wood | last post by:

Okay, I've spent considerable time trying to figure out why I get random problems when browsing the images in the Personal Website Starter Kit. (Note: I found a number of these sites on the Web,...

ASP.NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

How do change an HTML/CSS from a blog into a personal website?

✓ answered by Death Slaught

Similar topics