Website Design Help

[Mr_Mischif]

I'm trying to design a personal website, and I need some help on getting the design right.I want it to be like this site (http://thewondermidget.blogspot.com/), only have the "About Me section moved to the left, and add some space for some contact links. All I really need is the CSS code for it, and whoever helps me out would get credit.

[4dmin]

do you have the template already b/c most blog sites like that can already be downloaded... either look into the CSS file or inside of the index file for the CSS info. CSS is very easy to code i'm sure if your doing the rest you can figure this out.

example:


body {
background-image: url(../images/bg.gif);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
div{
margin: 0 ;
padding: 0 ;
}

#container {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto ;
margin-right: auto ;
/* opera does not like 'margin:20px auto' */
text-align:right;
/* part 2 of 2 centering hack */
width: 800; /*ie5win fudge begins */
height: 100%;
background-color: black ;
}
#header{
background-color: black ;
padding: 0px;
margin-bottom: 0px;
}
#headerlogo{
margin-left: auto ;
margin-right: auto ;
}

.BG { background-color: none;
background-image: url(/images/bg.gif);
background-repeat: repeat-x;
background-position: 0px 0px
}


.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
line-height: normal;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #666666;
}

[Mr_Mischif]

/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */


body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9ad;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}


/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}


/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
line-height:1.4em;
color:#ad9;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#333;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#777;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #222;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}


/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}


/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #222;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

[blare]

Change this part


#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

to this


#main {
width:410px;
float:right;
}
#sidebar {
width:220px;
float:left;
}

That should be it

[Mr_Mischif]

Change this part


#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

to this


#main {
width:410px;
float:right;
}
#sidebar {
width:220px;
float:left;
}

That should be it

Will this just change the About Me section or move the whole right side to the left?

[blare]

That will move the whole right bar to the left. You are looking at some work to get only the about me section to the left.

[w3bcod3r]

Just write the code of "About Me" before the code of "Saturday, March 31, 2007
Dooce Decisions" and like blare said change up the css a bit. gl

[Mr_Mischif]

OK, niw I got it working somewhat, it's at http://mischif.110mb.com/main.html but I still have some problems.

I want to move the links on the right side out from under the title block, I want to mave the center further toward the middle, and I want to move the left side closer to the middle.

[Mr_Mischif]

Oh right, the CSS is:


body {
background:#000;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9ad;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}


/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#ccc;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#sidebar {
width:220px;
float:left;
margin: 10px;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:*;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}


/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
line-height:1.4em;
text-align:center;
color:#ad9;
}
.post-body {
text-align:justify;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#333;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#777;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #222;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}


/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}


/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #222;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

[Mr_Mischif]

I need help bump

[Nemesis]

link doesnt work, lemme take a look at it.

[Mr_Mischif]

link doesnt work, lemme take a look at it.

O Rly? Double check, it should be up. But I'll get you the HTML code.

[Mr_Mischif]

OK, here's the HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Mischivous Life</title>


<link rel="stylesheet" type="text/css" href="layout.css" title="Default">

</head>


<body>

<div id="header">
<h1 id="blog-title">My Mischivous Life </h1>

<p id="description">"Welcome. Enjoy your time here. Avoid
the herpes."</p>

</div>

<div id="sidebar">
<div id="profile-container">
<h2 class="sidebar-title">About Me</h2>

<dl class="profile-datablock">

<dt class="profile-img"> <a href="http://www.blogger.com/profile/04453220272345079135"> <img alt=" My Photo" src="the%20wonder%20midget_files/98413109_df40ce3697_m.jpg" height="80" width="45"> </a> </dt>

<dd class="profile-data"> <strong>Name:</strong>
Jeremy Brown</dd>

<dd class="profile-data"> <strong>Location:</strong>

Atlanta, GA</dd>

</dl>

<p class="profile-textblock">If you've found here, you
deserve a cookie. This is the official homepage/blog of Jeremy Brown, a
computer geek/pro drifter hopeful/a whole lotta other shit I forget
now. And no, before you ask, there are no herpes here...unless Matt
shows up.</p>

<p class="profile-link"> <a href="http://mischif.110mb.com/aboutme.html">All you may
want to know</a> </p>

</div>

</div>

<div id="content">
<div id="main">
<div id="main2">
<h2 class="date-header">Saturday, March 31, 2007</h2>

<div class="post">
<h3 class="post-title"> Testicles One, Two... </h3>

<div class="post-body">
<div>
<div style="clear: both;"></div>

As of right now, this site is in Beta mode. For a while, I'll be
tweaking the design, adding things, and getting Joomla up and running.
But before my birthday, it <i>will</i> be up and running.
I hope.

<div style="clear: both; padding-bottom: 0.25em;"></div>

</div>

</div>

<p class="post-footer"> <em>posted by Mr_Mischif
</em></p>

</div>

</div>

</div>

</div>

<h2 class="sidebar-title">Mr_Mischif's Links:<br>

Click em,
dammit!</h2>

<li><a href="http://www.lost.eu/329a6">Lost: the
Game</a></li>

<li><a href="http://www.importatlanta.com/forums/forumdisplay.php?f=7">The
best place for e-drama ever.</a></li>

<h2 class="sidebar-title">My Folk:</h2>

<li>No folk yet. But give me a few.

</li>

</body>
</html>

[Mr_Mischif]

I really need help bump.

[Jecht]

OK, niw I got it working somewhat, it's at http://mischif.110mb.com/main.html but I still have some problems.

I want to move the links on the right side out from under the title block, I want to mave the center further toward the middle, and I want to move the left side closer to the middle.

Could you explain it again? You want the links left aligned rather than centered?

[an0therh22]

why don't you just go to blogspot.com and sign up. they have that layout you're wanting to use as one of the default layouts.

[Mr_Mischif]

why don't you just go to blogspot.com and sign up. they have that layout you're wanting to use as one of the default layouts.

I want my blog to be on my own website.


Could you explain it again? You want the links left aligned rather than centered?

I want to move the links on the rigt side out from under thetitle block at the top; I want the center text to be moved closer towards the middle; and I want the About Me section on the left to be moved more toward the right.