How do I confine a line to the window or the text?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a web site of "notes" < so I am
trying to rule it up like a notebook. I would appreciate your help in
making the red lines exactly fill the height and width of the visitors
window without creating unnecessary scroll bars. An exception would
occur if the text height is more than the height of the window in
which case the vertical line and the end of the text should coincide.

Re: How do I confine a line to the window or the text?

Quoted text here. Click to load it

A nice challenge!

Ages ago, I made


which may give you some ideas.

To fill the width and height of a viewport with ruled red lines is
easy enough, you make a background image for BODY and leave it to
repeat. You fashion the background to include at least one red line
and whatever space underneath you deem sufficient, it is best to just
make it 2000px long (ie. horiz width) to avoid a little imperfection
in the repeat algorithm of some browsers, 2000px will easily cover all
situations and will be almost zero bytes anyway as a transparent gif
or png.

The problem of course, the challenge, is to make it fluid so that text
remains on top of the lines! The bg way will make it at fixed pixel
steps and while it will look great at a particular text size setting,
at many other user settings the type will straddle the lines and may
not be what you want (though some people write and type on ruled paper
without too much regard for the lines!)  

At my settings, this looks the part:


Maybe more on this later.


Re: How do I confine a line to the window or the text?

On Sat, 24 Mar 2012 23:33:42 +1100, dorayme wrote:

Quoted text here. Click to load it

Nice try.
This is the age old problem of how to mimick a notebook look on a screen
and not have the over running of the text on the lines.

Had I written that same code, I'd be shot down for daring to use inches!
Not to mention trying to resize a header tag, which defeats the purpose.
A header tag is designed so you don't need to use css.
If I wanted some other text size, I'd just put the words in a division and
css the division accordingly.

And I would not use "<p>" for the text. As that also has certain properties
which will play havoc with your desired look.

Re: How do I confine a line to the window or the text?

Gordon Levi wrote:
Quoted text here. Click to load it

Well to don't need all that floats and extra DIVs. Less is more:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   " ">
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <meta http-equiv="content-language" content="en-us">


   <style type="text/css">

   html {
     /* why a percentage? I think a static EM value would be better */
     margin-left: 3%; border-left: #f77 solid 1px; height: 100%;

   body {
     font-family: verdana, sans-serif; margin-left: 0;
   } {
     list-style: none;
     border-bottom: #f77 solid 1px;
     margin: 0;
     padding: 1em 1em 2em 1em;
   } li { display: inline; padding: 1em; } a { text-decoration: none; } a:hover { text-decoration: underline; } a.current { color: #f77; }

   div.note { padding-left: 1em; border-bottom: #f77 solid 1px; }


   <title>Profectus Notes</title>
   <ul class="menu">
     <li><a href=" "
     <li><a href=" ">Notes</a></li>
href=" ">Credits</a></li>
href=" ">Contact</a></li>

   <div id="notepad">

   <!-- Content, each post in a 'note' class DIV -->
     <div class="note">
         This site is only used to test web pages and to store
         some notes. Unless you have been referred here it is
         unlikely to contain anything that interests you.

     <div class="note">
       <p>The next note...</p>

     <div class="note">
       <p>And another note...</p>

Take care,


Site Timeline