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

Discussion in 'HTML' started by Gordon Levi, Mar 24, 2012.

  1. Gordon Levi

    Gordon Levi Guest

    I have a web site of "notes" <http://gordonlevi.host22.com/> 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.
     
    Gordon Levi, Mar 24, 2012
    #1
    1. Advertising

  2. Gordon Levi

    dorayme Guest

    In article <>,
    Gordon Levi <> wrote:

    > I have a web site of "notes" <http://gordonlevi.host22.com/> 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.


    A nice challenge!

    Ages ago, I made

    <http://dorayme.netweaver.com.au/indexCards.html>

    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:

    <http://dorayme.netweaver.com.au/ruledLines.html>

    Maybe more on this later.

    --
    dorayme
     
    dorayme, Mar 24, 2012
    #2
    1. Advertising

  3. Gordon Levi wrote:
    > I have a web site of "notes"<http://gordonlevi.host22.com/> 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.



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

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Simpler</title>

    <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;
    }
    ul.menu {
    list-style: none;
    border-bottom: #f77 solid 1px;
    margin: 0;
    padding: 1em 1em 2em 1em;
    }

    ul.menu li { display: inline; padding: 1em; }

    ul.menu a { text-decoration: none; }

    ul.menu a:hover { text-decoration: underline; }

    ul.menu a.current { color: #f77; }

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


    </style>

    <title>Profectus Notes</title>
    </head>
    <body>
    <ul class="menu">
    <li><a href="http://gordonlevi.host22.com/index.html"
    class="current">Home</a></li>
    <li><a href="http://gordonlevi.host22.com/notes.html">Notes</a></li>
    <li><a
    href="http://gordonlevi.host22.com/credits.html">Credits</a></li>
    <li><a
    href="http://gordonlevi.host22.com/contact.html">Contact</a></li>
    </ul>

    <div id="notepad">

    <!-- Content, each post in a 'note' class DIV -->
    <div class="note">
    <p>
    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.
    </p>
    </div>

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

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


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 24, 2012
    #3
  4. Gordon Levi

    richard Guest

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

    > In article <>,
    > Gordon Levi <> wrote:
    >
    >> I have a web site of "notes" <http://gordonlevi.host22.com/> 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.

    >
    > A nice challenge!
    >
    > Ages ago, I made
    >
    > <http://dorayme.netweaver.com.au/indexCards.html>
    >
    > 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:
    >
    > <http://dorayme.netweaver.com.au/ruledLines.html>
    >
    > Maybe more on this later.


    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.
     
    richard, Mar 24, 2012
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Hugo
    Replies:
    10
    Views:
    1,368
    Matt Humphrey
    Oct 18, 2004
  2. kaushikshome
    Replies:
    4
    Views:
    806
    kaushikshome
    Sep 10, 2006
  3. scad
    Replies:
    23
    Views:
    1,205
    Alf P. Steinbach
    May 17, 2009
  4. Marek Stepanek
    Replies:
    12
    Views:
    432
    Peter J. Holzer
    Sep 2, 2006
  5. Replies:
    2
    Views:
    155
Loading...

Share This Page