0

For a class project, I'm currently constructing a personal website as a project from scratch in an attempt to learn HTML and CSS. My site is coming along just fine, until I get to adding text.

Below is a screenshot of my homepage. As you can see in my first image my h3 text is scrunched up on the bottom of the page, and the h3 elements are overlapping/stacked on top of one another. I have no idea why this is happening. I wanted to make the text underneath the h1 tags and nicely spaced out to make a landing page, see the mockup.

img1 img2

The HTML and CSS code can be found below: img4 img5

I am having a similar issue is evident in my other pages as well. For example, on my About page, I envisioned it having a red gradient background with white text on it spaced throughout. Instead, I get this scrunched up text in the center of the page:

img3

The CSS for this section can be found on the CSS image above, but this is what some of my HTML looks like img6

I'm sure my text overlapping issue is a quick fix, but I have no idea what it's doing or why. If anyone could help me out that would be great. Thanks

danielschnoll
  • 3,045
  • 5
  • 23
  • 34
  • Please post a [mcve], not images. – Kosh Feb 23 '18 at 02:28
  • @Kosh-Very But to make the whole thing work I'd have to put my entire site architecture on here – danielschnoll Feb 23 '18 at 02:30
  • 1
    I don't think that anybody else wanted to make the whole thing for you from your images. BTW, your overlapping is caused by `position:absolute` on `.bodyText`. – Kosh Feb 23 '18 at 02:35

2 Answers2

1

the overlapping is caused by either position:absolute, margin-top or top element in your bodyText class. Just remove the top and margin-top from bodyText class and put them in another class. use different padding for different paragraphs. here you are using same padding for all of your paragraphs so they ended up coming in the same place.

     .bodyText{ margin:auto}// put other elements except top and margin-top and position:absolute
      .paddingtop50{ top:50%}
      .paddingtop70{top:70%} // don't use this if not required

      <p class="bodyText paddingTop50">Loren ipsum dolor sit amet<\p>
      <p class="bodyText">Loren ipsum dolor sit amet<\p>
Rajon Tanducar
  • 308
  • 4
  • 8
0

You are seeing the overlap of text because of the position: absolute set on your h1, h3 and .bodyText.
Both your h3 elements have top set to 100%. This means both will try to position themselves at 100% (of the height of the containing block) down from the closest relatively positioned element, which I'm guessing is the body element in your case.
This is the same for your two p elements as well with the class of bodyText. Both have top:50% set, which will make the elements appear in the same position, causing the overlap.
If you are looking to vertically center your text in the screen, there are better ways to do that.

Rocks
  • 1,145
  • 9
  • 13