Tribute Page Questions, mainly about aligning text, images, and tidying it all up

1

Hiya,

I’m onto the Tribute Page challenge, and I’m covering Subrahmanyan Chandrasekhar for mine.

I keep having difficulty with aligning my images and text. The images I’ve worked out with stackoverflow's 5214893/right-align-an-image-using-css-html luckily.
But stackoverflow's 8865458/how-do-i-vertically-center-text-with-css solutions just do not work for my code pen.

(Also, I’m regularly saving to a .txt / .html file on my computer because I lost the first CodePen file, ffs -.-**** Lesson learned, of course.)

<body>
  <div id="#part1">
    <div id="#header">
      <div><h2 id="#title" style="float: right">Subrahmanyan Chandrasekhar</h2></div>
      <br><br>
      <div class="ctext"><h4 id="#subtitle" class="ctext">His Life and the Astronomical Limit He Discovered</h4></div>
    </div>
    <div id="#banner">
      <code missing because fCC's forums are irritating>
      <p style="text-center">Caption text here.</p>
    </div>
  </div>
  <div id="#part2">
    <div id="#diagram">
      <a href="#" target="_blank"><code missing because fCC's forums are irritating></a>
    </div>
  </div>
</body>

[https://codepen.io/collection/nYNoeO/] should link to it, I think? Maybe?
Just assume I have no idea what words mean if you do feel inclined to help. Coding pushes my buttons easily, so I need what might seem like ridiculously simple explanations.
If not:
[https://codepen.io/mxdozana/pen/xYZvdx/]
https://codepen.io/mxdozana

This challenge, by the way:
https://www.freecodecamp.org/challenges/build-a-tribute-page

Edit: Figured out how to make the code visible. Turns out it’s with ``s – not as a quote.

3

Hi, thanks for responding especially so quickly.

I don’t think I was clear in my explanation. I have the img URLs, as evidenced by the commented-out text.
And I totally know how to
<a href="http://www.whatever.com" target="_blank">
<img src="a different link" alt="some text in case it doesn't load.">
</a>.
My problem is instead how to make the image just go to the right. I want to align it to the right-hand side of the screen, and I won’t worry about the margin too much cuz I sorted that in the CSS bit (I think I went for 20px or something.)


<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
<!--
Above here is for CSS, not HTML. Should be minimal, but might jazz it up a bit later.

https://en.wikipedia.org/wiki/Subrahmanyan_Chandrasekhar

https://www.britannica.com/biography/Subrahmanyan-Chandrasekhar

https://en.wikipedia.org/wiki/Chandrasekhar_limit

https://www.nobelprize.org/nobel_prizes/physics/laureates/1983/chandrasekhar-bio.html

https://www.famousscientists.org/subrahmanyan-chandrasekhar/

https://www.barnesandnoble.com/w/mathematical-theory-of-black-holes-s-chandrasekhar/1100482007

https://prodimage.images-bn.com/pimages/9780198503705_p0_v1_s600x595.jpg

https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css was super useful

-->

<body>
  <div id="#part1">
    <div id="#header">
      <div><h2 id="#title" style="float: right" font-family="Ubuntu">Subrahmanyan Chandrasekhar</h2></div>
      <br><br>
      <div class="ctext"><h4 id="#subtitle" class="ctext">His Life and the Astronomical Limit He Discovered</h4></div>
    </div>
    <div id="#banner">
      <img src="#" alt="Alternative text here.">
      <p style="text-center">Caption text here.</p>
    </div>
  </div>
  <div id="#part2">
    <div id="#diagram">
      <a href="#" target="_blank"><img src="#" style="float: right" alt="Alternative text here."></a>
    </div>
  </div>
</body>

Luckily the forum’s showing me a preview message now. At least I can make the code show up properly! -_-

chandrasekhar tribute page design
chandrasekhar tribute page design2448×3264 1.13 MB

Edit: Updated code.

5

Ah, thanks! I’m a physicist and artist by training, and stuff just doesn’t make sense if I can’t draw it. And wow, flat stuff like webpage designs are way easier than EM concepts or realistic humanoids with real world type clothes.

…

To change: The diagram / second smaller one at the bottom-right. (I haven’t written that part yet, tbf)

I found style="float: right" on Stack overflow (unless is was class="float: right"?)
But that messes up the next line, whether for text - like h2 at the top -
or for pictures - the bottom-right diagram, or the banner picture under the titles.

I’d like to center-align the banner and subtitle. I think that might be my issue? Maybe?

TL;DR
I want to right-align the title,
center-align the subtitle,
then center-align the banner (wide picture), and a few lines later,
right-align the tall narrow diagram picture.