[HTML/CSS] My Personal Blog
Well, I've just started my personal blog coding and wondered if anyone would be able to tell me if there's a way to minimize my code that I've written so far.
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carter - The Personal Blog of Matthew Carter</title>
<link rel="stylesheet" type="text/css" href="_css/style.css" />
</head>
<body>
<div class="container">
<div class="about">
<div class="aboutimage">
<span>Image</span>
</div>
Matthew Carter is a 15-year-old who is passionate about creating content online for the world to enjoy. Whether it is his keen interest in web development or his rising talent in graphic design, he always tries to put himself out there for the world to see. He is currently involved in a number of various projects from development to video editing.
</div>
<div class="post">
<h3 class="post-title twitter-update border">Test Post</h3>
<div class="content">
Lorem ipsum blablabla
</div>
</div>
<div class="footer">
Copyright © 2011 Matthew Carter. All Rights Reserved.
</div>
</div>
</body>
</html>
CSS
Code:
body, h1, h2, h3 {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial;
font-size: 14px;
}
.aboutimage span {
display: none;
}
.container {
margin: 0 auto;
width: 600px;
}
.about {
margin: 50px 0 15px 0;
}
.aboutimage {
background-image:url('../_images/avatar.png');
height: 80px;
width: 80px;
float: left;
margin-right: 10px;
}
.post {
}
h3.post-title {
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #0C3;
}
h3.border {
padding-top: 5px;
border-bottom: 1px solid #eee;
}
h3.twitter-update {
background: url('../_images/social.media/twitter.png') left no-repeat;
}
.footer {
padding-top: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
Also, the text in h3.post-title doesn't align at the top of the div with the twitter image, any ideas how I can do this?
Thanks!
Re: [HTML/CSS] My Personal Blog
Ya i know how to fix it take a look at this :
CSS
Code:
h3.border {
padding-top: 5px;
border-bottom: 1px solid #eee;
}
HTML
Code:
<h3 class="post-title twitter-update border">Test Post</h3>
Change that part of CSS to :
Code:
h3.border {
border-bottom: 1px solid #eee;
}
- Aristonia
Re: [HTML/CSS] My Personal Blog
Well, I found an easy fix to it, and that was to increase the padding (not sure why I didn't think of that before) but thanks for the help!
