...

View Full Version : Simple blog style layout with divs - how?



sitruuna
04-13-2009, 11:40 AM
I would like to create a simple blog style layout like wordpress kubrick theme.
http://img134.imageshack.us/img134/9523/blog.png
here's html:


<html>
<body>

<div id="page">
<div id="header">
<h1>Title</h1>
</div>
<div id="left">
<h2>Blog post</h2>
<p>Hello world!</p>
</div>
<div id="right">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
<a href="#">Link 4</a><br>
and so on...
</div>
<div id="footer">
Footer here
</div>
</div>

</body>
</html>


Could someone do a simple css example for me? And correct if there's something wrong in the HTML

nick1988
04-13-2009, 11:54 AM
Check out this:

http://www.bonrouge.com/2c-hf-fullyfluid.php

Excavator
04-13-2009, 06:28 PM
Hello sitruuna,
A very basic one here. Might get you started -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#page {
width: 600px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
background: #F69;
border-bottom: 2px solid #f00;
}
#right {
width: 150px;
float: right;
}
ul#menu {
width: 147px;
list-style-type: none;
}
#menu li a {
display: block;
color: #000;
text-decoration: none;
width: 147px;
height: 30px;
line-height: 30px;
text-align: center;
}
#menu li a:hover {
color: #fff;
background: #Ff0000;
}
.post {
margin: 0 155px 10px 5px;
text-align: justify;
}
.post h2, .post h3 {
text-align: left;
margin: 0 0 0 25px;
}
hr {
width: 80%;
height: 1px;
margin: 10px auto 25px;
background: #0f0;
}
#footer {
height: 25px;
line-height: 25px;
background: #F69;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>Title</h1>
</div>
<div id="right">
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
<!--end right--></div>
<div class="post">
<h2>Blog post</h2>
<h3>Hello world!</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<hr />
<!--end post--></div>
<div class="post">
<h2>Blog post</h2>
<h3>Hello world!</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<hr />
<!--end post--></div>
<div id="footer">
Footer here
<!--end footer--></div>
<!--end page--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum