...

View Full Version : Line align



Dietrevers
06-02-2010, 03:55 AM
Well I'm doing this notebook template, the template takes 2 backgrounds, first a notebook margin paper image that repeats itself verically, then the notebook paper line image that repeats all over.

The problem is that the line alignment screws evry like 5 lines, I don't know whether fix it with css or re adjust image.

index.htm

<html dir="ltr">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="main">
<div class="main2">
<p>[text here]
</p></div>
</div>
</body>
</html>

style.css

/* Modify from here */

body /* This is the main class (use with <body> html tags) */
{
background-image:url('/images/bg.jpg'); /* Main background */
background-repeat:repeat;
color:000000;
font-size:10px;
font-family:Arial;
A:link
{
color: #000000;
}
A:visited
{
color: #660066;
}
A:active
{
color: #FF0000;
}
A:hover
{
color: #000000;
}
list-style-type:circle;
}
.main
{
width:80%;
margin:0px;
border:0px hidden; /* Make a hidden border outline */
background-image:url('/images/lines.png'); /* Notebook lines */
background-repeat:repeat;
}
.main2
{
background-image:url('/images/margin.png'); /* Notebook margin */
background-repeat:repeat-y;
border:0px hidden;
}
p
{
margin-left:5%;
margin-right:1%
color:000000;
font-size:12px;
font-family:"Times New Roman", Times, serif;
list-style-type:disc;
A:visited
{
color: #000000;
}
A:active
{
color: #000000;
}
}

For those who don't understand what I'm talking about, here is a screnie:
http://i46.tinypic.com/dot9nq.jpg

optimus203
06-02-2010, 04:02 AM
Have you tried adding a line-height: 20px; declaration on the css for <p> tag? You might have to try and fudge the appropriate line height to fit the lines of your background image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum