Tribute Page Assistance/Critique

1

Couple of questions, firstly I have been creating my tribute page within a normal code editor, so when I do get round to putting it in CodePen, do I have to link the relevant images or is there a way to upload them? Secondly, I just wanted to know if there is any way to have the background color of, say, a heading and a paragraph, both line up at each side? It’s hard to explain, so here’s an example (ignore the lorem!): example

I don’t know if this is going to be tl;dr, but here is the code thus far (can remove and host elsewhere if necessary!)

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>A Tribute to Sir Terry Pratchett</title>
		<meta content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
	</head>
	<body>
		<main id-"main">
			<div class="container">
				<h1 id="title">A Tribute to Sir Terry Pratchett</h1>
			</div>
			<img id="bee" src="bee.png" alt="Mind How You Go" title="GNU Terry Pratchett">
			<div id="img-div">
				<img id="image" src="PTerry.png" alt="A photo of Sir Terry Pratchett" title="A photo of Sir Terry Pratchett">
				<figcaption id="img-caption"><i>Terry Pratchett, in his trademark black fedora.</i>
				</figcaption>
			</div>
			<section id="tribute-info">
				<h3 id="para1">Sir Terry Pratchett, OBE</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada orci a enim aliquam dictum. Duis rhoncus sit amet libero tristique auctor. Pellentesque at tortor sit amet ex vehicula aliquam sit amet ac est. Mauris sollicitudin, diam vitae mattis vestibulum, magna eros dignissim diam, sed venenatis libero tellus ut ipsum. Aenean aliquet diam in arcu condimentum, eu porta nisi suscipit. Cras massa tortor, congue ut ex non, convallis congue dui. Suspendisse rhoncus a turpis commodo tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies quis metus sed pulvinar. Morbi elementum diam aliquam lacus hendrerit, sed bibendum augue tristique. Integer cursus sem sit amet elit interdum, ac porta nisi dictum. Aenean efficitur porttitor nulla, eu volutpat velit sodales sollicitudin. Curabitur posuere eros vel ornare venenatis. Donec bibendum sollicitudin fringilla. Donec turpis eros, consequat id faucibus sed, vulputate nec dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus.
				</p>
				<h3 id="para2">The Discworld Series</h3>
				<p>
					In non mattis lorem. Aliquam dolor velit, porttitor in neque ac, laoreet convallis dui. Cras vehicula laoreet leo, a placerat mi interdum sit amet. Aenean vulputate tempor erat a scelerisque. Quisque blandit varius ex in vehicula. Nunc aliquam neque nisl, a elementum leo dapibus non. Donec scelerisque quis leo at porttitor. Sed in ante pretium, fermentum dui eu, interdum elit. Nulla facilisi. Curabitur ut eros erat.
				</p>
			</section>
			<section id="further-info">
				<h3 id="para3">Further Information</h3>
				<p>
					If you would like to learn more, then visit <a id="tribute-link" href="https://www.terrypratchettbooks.com/about-sir-terry/" target="_blank">this link.</a>
				</p>
			</section>
		</main>
	</body>
</html>

CSS

body {
  background-color: rgb(145, 168, 190);
}

h1 {
  color: #FAFAFA;
  background-color: rgba(0, 0, 0, 0.25);
  text-align: center;
  padding: 10px;
  margin-left: 5px;
  font-family: 'Raleway', sans-serif;
  }

  #bee {
  position:absolute;
  left:0;
  top:0;
  max-width: 10%;
  border-radius: 50%;
  }

#image {
  border: 3px solid #FAFAFA;
  border-radius: 50%;
  padding: 10px;
  position: relative;
  background-color: rgba(200, 162, 200, 0.5);
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  max-width: 30%;
  height: auto;
  }

#img-caption {
  color: #FAFAFA;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
margin: auto;
}

h3 {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: 'Raleway', sans-serif;
}

#tribute-info {
  color: #FAFAFA;
  text-align: justify;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 10px;
  padding-top: 0px;
}

#further-info {
  color: #FAFAFA;
  background-color: rgba(0, 0, 0, 0.25);
  padding: 10px;
  padding-top: 0px;
  text-align: center;
}

a:link {
  color: rgb(200, 162, 200);
}

a:visited {
  color: rgba(200, 162, 200, 0.5)
}

a:hover {
  color: rgba(200, 162, 200, 0.5)
}

a:active {
  color: rgb(200, 162, 200);
}

Sorry for the mess, I’ll be really grateful if someone can help! A lot of it I’ve picked up from cobbling together code from half a dozen sources, like some sort of web-development Frankenstein. Any superfluous or offensive code, please tell me! :sweat_smile:

2

I was able to close the gap by adding a negative margin to your h3 selector:

h3 {
  text-align: center;
  background-color: black;
  padding: 5px 0px 5px 0px;
  margin: 0 -10px 0 -10px;
  font-family: 'Raleway', sans-serif;
}

And if you wanted the entire box completely stretch across the whole page, you can change the body margin to 0px because by default it is set to 8px:

body {
  background-color: rgb(145, 168, 190);
  margin: 0;
}

A couple different selectors have some default values that need to be changed if you want stuff to look a certian way. Which you can check out here.

Hopefully this helps! margin and padding can be quite finecky.

1 Like
3

mindaVaria is right.
You could also try to just transfer your padding from tribute-info and further-info unto padding on the p element.
Like this:

#tribute-info {
  color: #FAFAFA;
  text-align: justify;
  background-color: rgba(0, 0, 0, 0.25);
  padding-top: 0px;
}

#further-info {
  color: #FAFAFA;
  background-color: rgba(0, 0, 0, 0.25);
  padding-top: 0px;
  text-align: center;
}

p{
  padding:10px;
}
1 Like
4

Thanks guys, they both really helped! Everything fits to the page properly now, except I also applied the padding and margin as described by midnaVaria to my h1 tag, which sort of worked:

  color: #FAFAFA;
  background-color: rgba(0, 0, 0, 0.25);
  text-align: center;
  padding: 5px 0px 5px 0px;
  margin: 20px -10px 0 -10px;
  font-family: 'Raleway', sans-serif;

For some reason, the page itself is slightly wider than it needs to be, which appears to be caused by the h1 styling which is, like, extending the page a little to the right?

5

You can change your margin to

margin: 0px 5px;

which will make the left and right margin 5px while keeping the top and bottom 0px. That would even the page out.

1 Like
6

That fixed it, thanks!

Figured I may as well just add to this post instead of making a new one; I’m currently attempting to have an image become enlarged when it is hovered over, with a darkened border around the edge of the image. I know there are ways of doing it in Javascript, but I’m not there yet, and so far I have this workaround:

#dworder {
  padding: 10px;
  position: relative;
  display: block;
  max-width: 40%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  transition:transform 0.5s ease;
}

#dworder:hover {
    -webkit-transform:scale(2); /* or some other value */
    transform:scale(2);
    background-color: rgba(0, 0, 0, 0.75);
    display: block;
    padding: 10em;
}

I pinched this from the depths of Google, with some additional mucking about by yours truly. I’ve basically been fiddling with the padding options to have the dark border fill the page, but I have realised that the image will not shrink again unless the cursor completely leaves the page, and that when I add additional padding to the top it just pushes the image down the page. Any help would be great!

1 Like