Tribute page help with the css

HTML-CSS
1

https://codepen.io/iamalan1/pen/LajGyo

Hi, I am brand new, and I am stuck on two questions (there will be many more as I go along, lol).
The ul (5 time champion, 2 time champion), how do I get that, bulleted like it is, to the center of the page? I can move the words to the center, but the bullets stay on the side, and the words become uneven, but I want it moved like it is but to the center
and 2), right below that, where it says owen, etc, is supposed to be a paragraph break, with the “If you’d like to read more” part underneath that, so you read it reading down the page. How do I get p3 to be over p4? It’s supposed to be p3 and p4, separate paragraphs, but it’s writing them together.

Thank you for any help you can give me

2

Hi @alan2, welcome to the community.

Before we dive into your questions, there are several issues with your markup that I would take care of first:

  • In HTML, every tag, must also have a closing tag associated with it that starts with /

  • An HTML page has a specific structure and does not start with a div. Also the title tag should be inside the head tag

  • I think you have gotten confused with the tags for paragraphs and headers. While there are different tags for headers (ranging from h1 to h6), paragraphs tags are just <p>

Now, to address your two questions:

  1. Once you sort out all the issues with markup, aligning the unordered list to the center can be achieved in multiple ways, with margin: auto auto or by wrapping it in a div that has a CSS rule of text-align:center

  2. To get a line break, you can use the <br> tag

I hope that helps and if you have anymore questions, feel free to reply.

3

Hi @alan2. Let’s start by getting your HTML to use the correct elements, then you can move on to styling it with CSS.
You have tags that are not valid HTML tags. For instance, the tag is <p>. You cannot put in numbers.

codepen provides you with a validator for HTML, CSS and JS. Click on the arrow in the upper right corner of each section and then click on the ‘Analyze’ link. This will help you clean up your errors and get you started in the direction you’re going.

4

Thanks for the replies and help. From your responses, I figured out/fixed the paragraphs, but I’m having trouble moving the unordered list. The bulletpoints stay on the left, the words move to the center, but become uneven.

edit: I made an ordered (numbered) list, and that works the same way. How do I move them to the center with the bulletpoints and numbers all together. I can only get the words to move, and they center themselves instead of staying in a line, and the bulletpoints and numbers stay on the side… I want them to go to the center together

5

I added a navigation bar at the top, but that destroyed my lists further down. How do I fix the lists so they are back to normal? I had the lists perfect, I figured it out earlier from googling for it, but when I added a nav bar at the top, it destroyed the lists down at the bottom. I want both the nav bar and the lists, is that possible?

edit:https://codepen.io/iamalan1/pen/MZMdNv
https://codepen.io/iamalan1/pen/LajGyo

here is what I have so far, the pre and post nav bar versions. On the nav bar one, how do I fix the lists, and how do I make the entire bottom part pink, not just where the type is?

Any other help or opinions would be greatly appreciated, thank you

6

In the pen that has the navbar you didn’t close a nav tag.

7

On which line is the problem on?

8

Here is what you have…

<nav id="navbar">

  <nav class="nav-div">
    <ul class="nav-ul">
      <li class="nav-li"><a href="#Information">Information</a></li>
      <li class="nav-li"><a href="#How to contact or read more">How to contact or read more</a></li>
    </ul>
  </nav>

Notice that you don’t have a closing nav tag?

1 Like
9

I honestly don’t know, I’m brand new trying to figure this out. Is the bottom </ nav > not the closing tag?

10

You have two opening nav tags. The bottom one only closes the nav with class=“nav-id”. You haven’t closed the opening nav with id=“navbar”

11

And now the lists are back to normal. Thank you. I thought that the nav was the whole big thing, and not broken up into separate pieces

Any advice on filling the bottom part in with pink? I want it to the bottom of the page and up to the bar, not just where the type is.

You’ve been a big help today

12

If you get all of the tests to pass for this tribute page you’ll have an element that you can then style and make it pink if you’d like.

A quick Google search brought up this and many other links that you can read up on to familiarize yourself more with navbar;

One thing I would suggest. Before you get caught up in styling your page, go through and build each of the HTML elements to get your page to pass the user stories. Then style it.