CODEWITHSUNDEEP
htmlcsscss-float
danielschnoll
danielschnoll

Reputation: 3604

Paragraph elements overlapping in HTML

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

Upvotes: 0

Views: 7364

Answers (2)

Rocks
Rocks

Reputation: 1155

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.

Upvotes: 0

Rajon Tanducar
Rajon Tanducar

Reputation: 378

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>

Upvotes: 1

Related Questions