Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Line align

  1. #1
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    14
    Thanks
    3
    Thanked 1 Time in 1 Post

    Line align

    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
    Code:
    <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
    Code:
    /* 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

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •