I’m getting a bit lost in this book... but I have another question to tackle.
One of the challenges I’m facing is trying to align text properly next to an image. The goal is to have centered text that transitions into left-aligned text once it reaches the end of the page, flowing naturally under the image instead of staying centered.
Issue 1: While I know how to center an image, I’m struggling with ensuring the text after it aligns correctly. Ideally, it should look something like this image: https://i.sstatic.net/kgB3A.jpg
I suspect the problem lies within my wrapper, though I’m not entirely certain of the exact issue.
The CSS file controlling most visual aspects below:
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
The problematic html page I’m working on is a "music" page. Unfortunately, I can’t share all necessary items for you to recreate the page accurately, so I’ll do my best to explain verbally.
This is how the music.html page is structured:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="javajam.css">
<header>
<title> JavaJam Coffee House Music</title>
<meta charset="utf-8">
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="menu.html">Menu</a>
<a href="music.html">Music</a>
<a href="jobs.html">Jobs</a>
</nav>
<body>
<div id="wrapper">
<p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p>
<h2> January </h2>
<p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
<h2> February </h2>
<p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</body>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a200502040b1e0205042a2506031c0b1944090507">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13597c7b7d72677b7c7d535c7f7a6572603d707c7c">[email protected]</a></a>
</footer>
</html>
In essence, I’m seeking a solution to display the picture while having the text flow seamlessly underneath it, wrapping back to the beginning after reaching the end of the page. It’s vital that the transition from centered to left-aligned text happens smoothly, creating a visually appealing layout.
If further details are required, feel free to ask. Unfortunately, sharing the actual images may not be feasible for this assignment.