Can anyone help solve issues in my tribute page?

Web Development Bootcamp
1

Hi,

I just drafted one tribute page, https://codepen.io/Chienhan/pen/QWgjayw

However, I have some issues to solve, pls. help me out:

  1. any better way to display the title under id=title ? I do not think using h1 and p is a good idea in my page;
  2. how to center the dot symbol in the unordered list? In my page only texts are centered, the dots are still on the left side of the page;
  3. how to adjust the position of tribute info? I want to place it near the bottom.

Thanks!

BR
Chien

2

Hey, Chien! As you probably already know by now, there’s not only way to achieve what you want, so these are some suggestions.

  1. Imo, the H1 and the deckline are parte of a header, so I think you could use a <header> b4 <main> instead of an id attribute. At the same time, though, if you think about interactivity, having an id might be useful – further down the line, I mean, as you add more features to the website.

  2. I couldn’t really figure out, but I’d try using text-align in the <ul> or in the <li> tags directly, instead of applying it to the div. I suppose this would bring the bullets to center w the text (but I havent tried it)

  3. I didn’t understand what you mean by ‘neat the bottom’, you mean inside the div?

Hope this helps =] cheers

3 Likes
3

Hey Mentor

Thanks for quick help!

  1. you are right, it should be more readable to use a before . I use id to meet the requirement of the task.
  2. It does not seem to work when putting text-align in the ul > or li >. I found that if I add
    list-style-position: inside;
    the bullets will go center.

3.Sorry for ambiguity. I don’t mean to put the tribute info, the last text inside the div. I want to put it to the bottom of the whole page, something above a footer. I also want to adjust its distance to the bottom.

BR
Chien

4

Hey Chien,

  1. Try to use more semantic elements, rather than div. Generally your page will look like this:
<header></header>
<main></main>
<footer></footer>
  2. Right now your main element has 100px padding in each direction, which is why your content isn’t closer to the bottom.
    If you want to create space between your image and the text content below it, try adding margins on either.

One more point that I’d like to make. You generally don’t want to be using the id attribute to style your elements - reserve id for functionality like buttons and inputs.
Instead use classes on all of your elements that need styling.

3 Likes
5

hmm list-style-position is something I wasnt familiar with, so cool!
as for the size of the divs, I believe you could use min-height, I think this will appear in a future lesson. if I remember correclty, by default a div will be just the exact size of its content. I like Matthew’s solution of working w padding/margin, it very neat, just mind that it might not adjust automatically as you’d expect when you insert more content.

1 Like
6

Hello Matthew and Deborah

Thank you for your advice. I will rewrite the code with more semantic elements and replace id attributes with classes.

BR
Chien

2 Likes