html - Code to create notebook paper look and feel

Here is the problem — my vertical line does not properly fill the page when I want to add text to page. I have created the vertical line and the horizontal line with <div>, and they gave me much flexibility. However, now, when I try to input text, everything moves and can't center without jacking up the lines. The view is supposed to look like a notebook sheet of paper. I am not sure if there is a way I can create an image or background and then add text over top. I prefer to have the text inline as if this is pencil on paper. Sorry if this is confusing.

The larger I make the font or top margin - then the lines move down.

HTML code
CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.container {
  min-width: 100%;
  width: 100%;
  min-height: 100%;
  height: 100%;
  position: relative; /* Needed for absolute positioning of lines */
}

.topheader {
    font-family: Patrick Hand, "cursive";
    display: flex;
    justify-content: center;
  align-items: center;
  font-size: larger;
  font-weight: 100;
  
}
    


.redline {
  min-height: 100vh;
  height: 100%;
  background: red;
  margin-left: 15%;
  width: 2px;
  position: relative;
}

.blackline1,
.blkline2,
.blkline3,
.blkline4,
.blkline5,
.blkline6,
.blkline7,
.blkline8,
.blkline9,
.blkline10,
.blkline11,
.blkline12,
.blkline13,
.blkline14,
.blkline15,
.blkline16,
.blkline17,
.blkline18,
.blkline19,
.blkline20,
.blkline21,
.blkline22,
.blkline23,
.blkline24,
.blkline25,
.blkline26,
.blkline27,
.blkline28,
.blkline29,
.blkline30 {
  height: 3px;
  min-width: 100vh;
  width: 100%;
  background: lightskyblue;
  position: absolute;
  /* following 2 code is excellent center  for second line. */
}

.blackline1 {
  top: 15%;
}

.blkline2 {
  top: 18%;
}

.blkline3 {
  top: 21%;
}

.blkline4 {
  top: 24%;
}

.blkline5 {
  top: 27%;
}

.blkline6 {
  top: 30%;
}

.blkline7 {
  top: 33%;
}

.blkline8 {
  top: 36%;
}

.blkline9 {
  top: 39%;
}

.blkline10 {
  top: 42%;
}

.blkline11 {
  top: 45%;
}

.blkline12 {
  top: 48%;
}

.blkline13 {
  top: 51%;
}

.blkline14 {
  top: 54%;
}

.blkline15 {
  top: 57%;
}

.blkline16 {
  top: 60%;
}

.blkline17 {
  top: 63%;
}

.blkline18 {
  top: 66%;
}

.blkline19 {
  top: 69%;
}

.blkline20 {
  top: 72%;
}

.blkline21 {
  top: 75%;
}

.blkline22 {
  top: 78%;
}

.blkline23 {
  top: 81%;
}

.blkline24 {
  top: 84%;
}

.blkline25 {
  top: 87%;
}

.blkline26 {
  top: 90%;
}

.blkline27 {
  top: 93%;
}

.blkline28 {
  top: 96%;
}

<body>

       <div class="container">
       <div class="topheader">
        <h1 class="header">DenardRaps</h1>
       </div>
      <div class="redline"></div>
      <div class="blackline1"></div>
      <div class="blkline2"></div>
      <div class="blkline3"></div>
      <div class="blkline4"></div>
      <div class="blkline5"></div>
      <div class="blkline6"></div>
      <div class="blkline7"></div>
      <div class="blkline8"></div>
      <div class="blkline9"></div>
      <div class="blkline10"></div>
      <div class="blkline11"></div>
      <div class="blkline12"></div>
      <div class="blkline13"></div>
      <div class="blkline14"></div>
      <div class="blkline15"></div>
      <div class="blkline16"></div>
      <div class="blkline17"></div>
      <div class="blkline18"></div>
      <div class="blkline19"></div>
      <div class="blkline20"></div>
      <div class="blkline21"></div>
      <div class="blkline22"></div>
      <div class="blkline23"></div>
      <div class="blkline24"></div>
      <div class="blkline25"></div>
      <div class="blkline26"></div>
      <div class="blkline27"></div>
      <div class="blkline28"></div>
      <div class="blkline29"></div>
      <div class="blkline30"></div>
      <div class="redline2"></div>
    </div>
  </body>

The larger I make the font or top margin - then the lines move down.

HTML code
CSS code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.container {
  min-width: 100%;
  width: 100%;
  min-height: 100%;
  height: 100%;
  position: relative; /* Needed for absolute positioning of lines */
}

.topheader {
    font-family: Patrick Hand, "cursive";
    display: flex;
    justify-content: center;
  align-items: center;
  font-size: larger;
  font-weight: 100;
  
}
    


.redline {
  min-height: 100vh;
  height: 100%;
  background: red;
  margin-left: 15%;
  width: 2px;
  position: relative;
}

.blackline1,
.blkline2,
.blkline3,
.blkline4,
.blkline5,
.blkline6,
.blkline7,
.blkline8,
.blkline9,
.blkline10,
.blkline11,
.blkline12,
.blkline13,
.blkline14,
.blkline15,
.blkline16,
.blkline17,
.blkline18,
.blkline19,
.blkline20,
.blkline21,
.blkline22,
.blkline23,
.blkline24,
.blkline25,
.blkline26,
.blkline27,
.blkline28,
.blkline29,
.blkline30 {
  height: 3px;
  min-width: 100vh;
  width: 100%;
  background: lightskyblue;
  position: absolute;
  /* following 2 code is excellent center  for second line. */
}

.blackline1 {
  top: 15%;
}

.blkline2 {
  top: 18%;
}

.blkline3 {
  top: 21%;
}

.blkline4 {
  top: 24%;
}

.blkline5 {
  top: 27%;
}

.blkline6 {
  top: 30%;
}

.blkline7 {
  top: 33%;
}

.blkline8 {
  top: 36%;
}

.blkline9 {
  top: 39%;
}

.blkline10 {
  top: 42%;
}

.blkline11 {
  top: 45%;
}

.blkline12 {
  top: 48%;
}

.blkline13 {
  top: 51%;
}

.blkline14 {
  top: 54%;
}

.blkline15 {
  top: 57%;
}

.blkline16 {
  top: 60%;
}

.blkline17 {
  top: 63%;
}

.blkline18 {
  top: 66%;
}

.blkline19 {
  top: 69%;
}

.blkline20 {
  top: 72%;
}

.blkline21 {
  top: 75%;
}

.blkline22 {
  top: 78%;
}

.blkline23 {
  top: 81%;
}

.blkline24 {
  top: 84%;
}

.blkline25 {
  top: 87%;
}

.blkline26 {
  top: 90%;
}

.blkline27 {
  top: 93%;
}

.blkline28 {
  top: 96%;
}

<body>

       <div class="container">
       <div class="topheader">
        <h1 class="header">DenardRaps</h1>
       </div>
      <div class="redline"></div>
      <div class="blackline1"></div>
      <div class="blkline2"></div>
      <div class="blkline3"></div>
      <div class="blkline4"></div>
      <div class="blkline5"></div>
      <div class="blkline6"></div>
      <div class="blkline7"></div>
      <div class="blkline8"></div>
      <div class="blkline9"></div>
      <div class="blkline10"></div>
      <div class="blkline11"></div>
      <div class="blkline12"></div>
      <div class="blkline13"></div>
      <div class="blkline14"></div>
      <div class="blkline15"></div>
      <div class="blkline16"></div>
      <div class="blkline17"></div>
      <div class="blkline18"></div>
      <div class="blkline19"></div>
      <div class="blkline20"></div>
      <div class="blkline21"></div>
      <div class="blkline22"></div>
      <div class="blkline23"></div>
      <div class="blkline24"></div>
      <div class="blkline25"></div>
      <div class="blkline26"></div>
      <div class="blkline27"></div>
      <div class="blkline28"></div>
      <div class="blkline29"></div>
      <div class="blkline30"></div>
      <div class="redline2"></div>
    </div>
  </body>

Share Improve this question edited Mar 13 at 23:35 Sergey A Kryukov 1,07012 silver badges36 bronze badges asked Mar 13 at 22:51 DenardRaps 211 silver badge4 bronze badges

Please don't post textual information in the form of pictures. Please see: Why should I not upload images of code/data/errors? If you still need an image, it can complement the textual information. It looks like you already provided the code; that is good. Better yet, create a code snippet (please see the menu at the top of the post editor). – Sergey A Kryukov Commented Mar 13 at 22:53
2 Thank you for the feedback. I understand now – DenardRaps Commented Mar 13 at 23:02
Okay, I tried to convert your code into the code snippet. Please review it after the approval. Now, everything can run the code on this page. Right now, it looks like a big abuse and over-complication, the violation of the D.R.Y. principle (Don't Repeat Yourself). Could you please explain your ultimate goals? What are all those lines for? – Sergey A Kryukov Commented Mar 13 at 23:03
I'm just learning the html/css so I tend to do things piece by piece until I can fully learn how to use all the functionality. My goal is for the theme/ background to look like a notebook sheet of paper. And still be able to put text, images and video links. Similar to a virtual/digital composition book, but it will be a website. – DenardRaps Commented Mar 13 at 23:27
Thank you for the clarification. I understand. What you do won't work because you need to write over those lines. As I can see, you already got a solution. – Sergey A Kryukov Commented Mar 14 at 0:19

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

You don't need multiple elements for the lines. Use gradients to draw the lines (see example from gallery) as background. Set the distance between the lines to 1lh (1 line height).

Because the lines are the background, and they are not affected by other child elements, the text you'll add won't move them. The text would appear between the lines as long as the child elements has the same font-size, and line height of the parent .notebook.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notebook {
  --red-line-start: 5ch;
  --red-line-end: calc(var(--red-line-start) + 2px);
  
  flex: 1;
  background-image: 
    linear-gradient(to right, 
      transparent var(--red-line-start), 
      red var(--red-line-start), 
      red var(--red-line-end), 
      transparent var(--red-line-end)
    ),
    linear-gradient(lightskyblue 1px, transparent 1px);
  background-size: 100% 1lh;
  padding-left: calc(var(--red-line-start) + 1ch);
}

.topheader {
  font-family: Patrick Hand, "cursive";
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: larger;
  font-weight: 100;
}

<div class="container">
  <div class="topheader">
    <h1 class="header">DenardRaps</h1>
  </div>

  <div class="notebook">
    <p>Some text</p>

    <p>More text</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet, dui vel dapibus feugiat, tortor enim placerat nisi, ut tincidunt velit dui sed tortor. Mauris posuere dictum purus, venenatis placerat sem accumsan non. Integer et nisl tempor, facilisis velit at, fermentum dolor. Donec semper non magna et fermentum. Etiam nec dolor in odio porta convallis. Cras ultricies nisi vitae massa accumsan feugiat. Suspendisse facilisis, eros nec tristique maximus, nisl lacus eleifend neque, non porttitor purus libero ac urna. In dictum dolor risus, vitae semper libero dapibus in.</p>
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Code to create notebook paper look and feel - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)