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

G

Gordon Levi

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.
 
D

dorayme

Gordon Levi said:
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.
Click to expand...

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.
 
J

Jonathan N. Little

Gordon said:
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.
Click to expand...


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>
 
R

richard

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.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to Create a random password generator in a separate window 4
How Do I Set text on an Image and use the image as a border? 7
WIN32 - Update Text in a Window in order to show its size in Pixels and coordinates 0
How do I call the exact function on page load? 6
How do I hide the modal after 5 seconds? 4
How do I limit the for loop count? 3
How to use PDF-lib and how to center each line of texts on the page? 1
How to make the tip of a QSlider in PySide2 look like a triangle? 1

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 104

Forum statistics

Threads
473,754
Messages
2,569,521
Members
44,995
Latest member
PinupduzSap

Latest Threads

Top