Message [Page 1 of 1]
How to code PSD files to HTML Wed Jan 06, 2010 8:50 pm
Re: How to code PSD files to HTML Wed Jan 06, 2010 10:59 pm
Re: How to code PSD files to HTML Wed Jan 06, 2010 11:04 pm
Re: How to code PSD files to HTML Wed Jan 06, 2010 11:11 pm Re: How to code PSD files to HTML Sat Jan 09, 2010 7:32 pm
Home<!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></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style>
<!--
body {
margin: 0;
padding: 0;
background: #000;
background-repeat: repeat;
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
margin: 0;
}
h1, h2 {
font-weight: normal;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
p, ol, ul, dl {
margin-top: 0;
text-align: justify;
line-height: 2.2;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
strong {
color: #4A3E29;
}
a {
color: #506C00;
}
a:hover {
text-decoration: none;
}
a img {
border: 0;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
margin: 0 auto;
}
img.alignleft {
margin: 0 27px 0 0;
}
img.alignright {
margin: 0 0 0 27px;
}
img.border {
padding: 4px;
border: 1px solid #E9E4D8;
}
/* Wrapper */
#wrapper {
background: url('http://www4.slikomat.com/09/0106/73y-mwa2.png');
background-repeat: no-repeat;
align: center
width: 1004px;
height: 1284px;
background-position: center;
}
.container {
width: 1004px;
margin: 0 auto;
}
.clearfix {
clear: both;
}
/* Header */
#header {
float: center;
width: 1004px;
height: 271px;
background: url('http://www4.slikomat.com/09/0106/zyq-header.png');
}
/* Menu */
#menu {
height: 62px;
background: url('http://www4.slikomat.com/09/0106/wpx-nav.png') no-repeat;
align: center
}
#menu ul {
height: 67px;
margin: 0 25px;
padding: 2px 0 0 14px;
background: url('');
list-style: none;
line-height: 1
}
#menu li {
float: left;
height: 67px;
padding: 15px 20px 0 20px;
}
#menu li.active {
url('');
}
#menu a {
text-transform: lowercase;
text-decoration: none;
letter-spacing: -1px;
font-size: 24px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/* Content */
#content {
float: right;
width: 524px;
padding: 0 70px 0 25px;
}
/* Post */
.post {
}
.post .title, .post .date {
padding: 0 25px;
}
.post .title {
margin: 20;
padding-top: 30px;
line-height: normal;
font-size: 20px;
color: #31100f;
}
.post .title a {
text-decoration: none;
color: #31100f;
}
.post .title a:hover {
text-decoration: underline;
}
.post .date {
line-height: normal;
color: #000;
text-decoration: strong;
}
.post .entry {
margin: 0 25px;
padding: 20px 0;
border-top: 1px solid #30100a;
}
.post .meta {
height: 53px;
background: #transp;
border-bottom: 1px solid #transp;
}
.post .meta p {
line-height: normal;
}
.post .meta .tags {
float: left;
padding: 20px 0 0 25px;
}
.post .meta .links {
float: right;
padding: 20px 25px 0 0;
}
.post .meta .comments {
margin-right: 30px;
padding-left: 22px;
background: url(images/img04.gif) no-repeat 0 50%;
}
.post .meta .more {
padding-left: 17px;
background: url(images/img05.gif) no-repeat 0 50%;
}
/* Sidebar */
#sidebar {
float: right;
width: 295px;
padding: 0px 40px 0px;
background: url(images/bg04.jpg) no-repeat 100% -335px;
}
#sidebar ul {
margin: 45px;
padding: 10px 0px 0px;
list-style: none;
line-height: normal;
border-left: 1px solid #transp;
}
#sidebar li {
}
#sidebar li ul {
padding: 0;
line-height: 3.5;
border: none;
}
#sidebar li li {
}
#sidebar h2 {
margin: 0px;
padding: 140px 0 5px 0px;
border-bottom: 1px solid #transp;
}
/* Footer */
#footer {
background: url('http://www4.slikomat.com/09/0106/wj2-footer.png') no-repeat;
padding: -100px 0;
}
#footer p {
text-align: center;
color: #8F8B83;
margin-top: -333px;
}
#footer a {
color: #8F8B83;
}}-->
</style>
</head>
<body><div id="wrapper">
<div id="header" class="container">
</div>
<div id="menu" class="container">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="top-bar" class="container">
</div>
<div id="page" class="container">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">TerraFirma2 by NodeThirtyThree + FCT</a></h2>
<p class="date">Posted on October 1, 2009</p>
<div class="entry">
<p><strong>This is a Lady Gaga Layout made by Veljko Designs. All images are self made and are copyrighted. Please do not abuse the images for your personal gain. The forum LadyGagaBalkan.com will use this template for it's homepage, info page etc. </strong> </p>
</div>
<div class="meta">
<p class="tags">Tags: <a href="#">Internet</a>, <a href="#">Free Templates</a>, <a href="#">Web Design</a></p>
<p class="links"><a href="#" class="comments">Comments (64)</a> <a href="#" class="more">More</a></p>
</div>
</div>
<div class="meta">
</div>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<p><font size="4">Link<br>Link<br>Link<br>Link</font></p>
</li>
<li>
<h2>Nulla aliquam</h2>
<p><b>Zabranjeno kopiranje template-a... All rights reserved by VeljkoDesigns.</b>
</p>
</div>
<div class="clearfix"> </div>
<div id="footer-bar" class="two-cols">
<div class="clearfix"> </div>
</div>
</div>
</div><div id="footer" class="container">
<p>(c) 2009 ladygagabalkan.com. Design by VeljkoDesigns </p>
</div>
</body>
</html> Re: How to code PSD files to HTML Sat Jan 09, 2010 8:46 pm
Re: How to code PSD files to HTML Sat Jan 09, 2010 9:02 pm
Re: How to code PSD files to HTML Sat Jan 09, 2010 9:10 pm
Re: How to code PSD files to HTML Sat Jan 09, 2010 10:32 pm
Re: How to code PSD files to HTML Sat Jan 09, 2010 10:48 pmJochiKhan wrote:Looks very good.
The text for your copyright is hard to see. Perhaps need bold text?
The images do take a long time to load.
I will be happy when I am able to create a webpage this way.
I am enjoying reading the tutorials and experimenting.
Making it as a whole background is not a actually a good idea. But I liked the template a lot because of superb graphics 
Re: How to code PSD files to HTML Sat Jan 09, 2010 11:11 pm
Re: How to code PSD files to HTML Sat Jan 09, 2010 11:14 pm Is it made from the same template? Re: How to code PSD files to HTML Sat Jan 09, 2010 11:19 pm Message [Page 1 of 1]
WebArtz - The Web Design Forum » Web Designing & Coding » Web Design Talk » How to code PSD files to HTML
Similar topics
Permissions in this forum:
You cannot reply to topics in this forum
