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

Tribute Page Questions, mainly about aligning text, images, and tidying it all up
0
#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.

#2

Firstly, welcome to the forum!

Currently, you have not supplied image urls for the src attribute for either of the img tags. You should do that first, so that you can communicate how you want each specific image and specific text to align on the page and with respect to each other. At this point, I am not entirely sure what you are trying to do with each image and text section. Be as detailed as you can or better yet, if you have a mock up image of your design layout you could upload to a reply, that would help tremendously.

#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 design.jpg2448×3264 1.13 MB

Edit: Updated code.

#4

Fantastic job of creating a mockup! Most people just start typing code without knowing what they want the layout to look like.

I am confused about what your mockup shows and what you are describing with the following:

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

In your drawing, the first image is centered with a caption below it. Which image do you want to go the right?

#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.