Help with Tribute Page

Good afternoon everyone!

I’ve been working on my tribute page for some time now but I have a few things that I just don’t know how to fix. Here is my codepen :
I would appreciate any help, ideally with how you made it work :slight_smile:

  1. I’m trying to put the story header and paragraph over the big dog picture. I tried to do this with position relative,absolute, with div, the same way I did image over image and a couple of other things. I made it once go over the image but at the same time everything else moved up messing up the whole page.

  2. I have grey bars between li elements in my navigation bar and I have no idea how to get rid of them.

  3. I wanted to make images in links centered. I tried to do this with margin left and right auto and with text align but both ways didn’t work for me unless I did it wrong.

  4. If you look on my page on the phone the logo in navigation bar is on the left while all li elements are centered (on the computer the logo is centered); how can I make the logo move to the same position as li elements?

If you see anything else that could be done easier way I will be happy to hear about it.
I basically drew how I want my page to look like and then googled every single thing. I had to give up on some ideas as they had Java or other things I still haven’t learnt but the rest is just trials and errors.

Thank you very much guys!

Hi Yedolte,
First, have you considered bootstrap, it makes page layout easier. And it doesn’t really require javascript

  1. To put the header and text above the image, place the H1 and P tags before the IMG tag.
  2. The grey bar is caused by the margin, you can use margin: -5px to remove it, but I think it is a quick fix solution.
    I hope this helps.

Hi thanks :slight_smile: I can’t believe the grey bar was so easy to fix :smiley:
Sorry probably wrong wording I wanted the header and text over an image not above i.e image is a background for the text.