⤿ html vertical overlap

Sep. 23rd, 2023 01:21 pm
[personal profile] svnsettia



this time i'm gonna
experiment some more with
boxes
while practicing
things i already
know, such as:




hm. it's strange that last time i made boxes, they stretched to accomodate
text, but this time, it didn't. i wonder if it's because i defined dimensions
for the text. let me see if that's the case:



woah. this isn't what i thought would happen.

i learned something just now though!
when i defined the length and width for the first div, i also defined where
the next div would start. that's why there was overlap!

now i want to figure out how to do it on purpose. i originally wanted to learn how to use images as backgrounds in this post,
but it's good that i ran into this problem so i can deepen my understanding of
html and how it works.



woaahh!!! i did it! so basically what i did was i made the div above this one 15px tall, and then i typed a lot to make the text taller than 15 pixels.





this just looks like a big disaster, but it was very educational for me. in the next post, i'll try to make boxes with images as the backgrounds.

<!DOCTYPE html>

<html>

<body>

<div style="width:200px; height:50px; padding:5px;background-color:#f1f1f1">

  <p style="width:500px;font-size:8px;font-family:times new roman">

    this time i'm gonna

    <span style="font-family:georgia;color:gray">experiment some more with </span>

    <span style="font=family:garamond;color:brown">boxes </span>

    <span style="font-family:arial;color:red">while practicing </span>

    <span style="font-family:verdana;color:orange">things i already </span>

    <span style="font-family:helvetica;color:yellow">know, such as:</span>

  </p>

  <ul style="font-size:10px">

    <li style="font-family:courier new;color:green">fonts and colours</li>

    <li style="font-family:lucida console;color:blue">lists</li>

    <li style="font-family:monaco; color:purple"><a href=https://www.dreamwidth.org/circle/svnsettia/edit?action=subscribe target=_blank>hyperlinks</a></li>

  </ul>

  <p style="font-size:8px;color:gray">

    <span style="font-family:lucida handwriting;color:pink">hm. it's strange that last time i made boxes, they stretched to accomodate </span>

    <span style="font-family:arial; color:orange">text, but this time, it didn't. i wonder if it's because i defined dimensions</span>

  for the text. let me see if that's the case:</p>

</div>

<div style="font-size:10px;font-family:papyrus;width:100px;height:10px;background-color:gray">

  <p>woah. this isn't what i thought would happen.</p>

</div>

  <p>i learned something just now though!</p>

<div>

  <p style="font-size:9px;font-family:helvetica">;when i defined the length and width for the first <div>, i also defined where
the next div would start. that's why there was overlap!</</p>

</div>

<div style="height:15px;width:180px">

  <p style="font-size:10px">now i want to figure out how to do it on purpose. i originally wanted to learn how to use images as backgrounds in this post,

  but it's good that i ran into this problem so i can deepen my understanding of 

  html and how it works.</p>

</div>

<div>

  <p style="font-family:arial;font-size:13px;color:#d4afeb">woaahh!!! i did it! so basically what i did was i made the div above this one 15px tall, and then i typed a lot to make the text taller than 15 pixels. </p>

</div>

<div>in the next post, i'll try to make boxes with images as the backgrounds.</div>

</body>

</html>

tags: