Tribute Page - Build a Tribute Page

Tell us what’s happening:
I get the error:
" Failed:Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main."

Isn’t my figure a descendant of main in the code below ?

Code exceeded maximum so I just pasted a portion of it.

Your code so far

<body>
  <main id="main">
    <div class="hdr">
      <h1>Les Paul</h1>
      <p>Inventor, award-winning musician, innovator and creative genius</p>
      <figure class= "hdr-fig" id="img-div">
        <img class= "hdr-img" id="image" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Les_Paul_live_3.jpg" />
        <figcaption id="img-caption">Paul playing a Gibson Les Paul at the Iridium Jazz Club in New York, 2008</figcaption>
    </div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hello. It seems, from the snippet of code you’ve provided, that you’ve forgotten the closing tag of your main element. To fulfil the test requirements, you should place it so that it includes your #img-div, #image, #img-caption, #tribute-info and #tribute-link elements.

No, the code exceeded the maximum, so I just posted a portion of it. There’s a lot of code underneath that snippet. The closing tag for main is 100 lines down further in the code. The only issue I have is that it says those elements should be descendants of .

Maybe the issue lies in your div element. Try removing only your opening and closing div tags and keeping the rest of the code intact.

Yes, the div is causing the issue. Although the elements, as they are, are descendants of main, the error checking wants them as direct children of main. That is not what the instructions or the error message state.

It would have been nice to know this BEFORE I built and styled the page.

Yeah, that sucks. A tip for future projects, which is something that I did:

Try to get the barebones code that will pass the test done, and once it says your code passes, you can build on top of that without worry.

So, submit an ugly web page, and then go fix it up.

Is that the solution ?

Will that even work?

That just goes against my very nature.

the code exceeded the maximum for authomatic compilation, you can write all of your code in the post

no, just descendants, not direct children

check your code for syntax errors, like unclosed elements, wrong nesting, etc

Ilenia,

Thanks for the response. Below is the code that fails. I could be wrong, but from everything I’ve learned so far, my elements are descendants of main. If I remove the div containers and effectively make them direct children of #main it passes. Maybe you can take a look and tell me differently?

Here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title id="title">Les Paul</title>
</head>
<body>
  <main id="main">
    <div class="hdr">
      <h1>Les Paul</h1>
      <p>Inventor, award-winning musician, innovator and creative genius</p>
      <figure class= "hdr-fig" id="img-div">
        <img class= "hdr-img" id="image" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Les_Paul_live_3.jpg" />
        <figcaption id="img-caption">Paul playing a Gibson Les Paul at the Iridium Jazz Club in New York, 2008</figcaption>
    </div>
    
      <h2>A timeline of the life of Les Paul</h2>
      <div class="trib-container">
      <div id="tribute-info">
      <p><strong>1915</strong><br />
Lester William Polfuss is born June 9 in Waukesha, Wisconsin, to parents George and Evelyn Polfuss.</p>
<p><strong>1923-6</strong><br />
Punches new holes into his mother&#8217;s player piano rolls, achieving a crude multi-track effect; learns harmonica from an itinerant ditch-digger; builds a crystal radio set and begins weekend studies of sound electronics with WTMJ radio engineer.</p>
<p><strong>1927-8</strong><br />
Receives first guitar &#8211; a Sears, Roebuck Troubadour; performs in Waukesha as &#8220;Red Hot Red;&#8221; meets idols Gene Autry and Pie Plant Pete touring with Chicago&#8217;s WLS Barn Dance shows; experiments with amplification and electrified guitar at Beekman&#8217;s Bar-B-Q; builds first disc-cutting lathe with Cadillac flywheel and dental belts; attempts first &#8220;solid-body&#8221; guitar, using a railroad track strung with wire and a telephone amplifier as the pickup.</p>
<p><strong>1929</strong><br />
Joins Rube Tronson and his Texas Cowboys for a summer gig in Escanaba, Michigan, and befriends his mentor and guitar tutor, &#8220;Sunny Joe&#8221; Wolverton.</p>
<p><strong>1932</strong><br />
Drops out of high school and teams up with Wolverton as &#8220;Sunny Joe&#8221; and &#8220;Rhubarb Red,&#8221; performing for &#8220;hillbilly&#8221; radio stations in Springfield and St. Louis, Missouri.</p>
<p><strong>1933</strong><br />
Rhubarb Red and Sunny Joe move on to Chicago to perform at the World&#8217;s Fair and then with WBBM, until Paul decides to pursue jazz &#8211; living a dual identity as Rhubarb Red on daytime radio and as Les Paul at night, jamming with the jazz greats.</p>
<p><strong>1934-6</strong><br />
Forms the Les Paul Trio with Ernie Newton and Jimmie Atkins; makes Decca blues recordings with Georgia White; and begins the first of many solid-body guitar experiments, paying the Larson Brothers $15 to build a single cutaway half-inch maple top, with no f-holes and two pickups.</p>
<p><strong>1937</strong><br />
Joins Fred Waring and the Pennsylvanians on NBC radio, bringing the sound of the electric guitar to millions of listeners coast to coast.</p>
<p><strong>1939</strong><br />
Performs in a White House concert for President Franklin D. Roosevelt.</p>
<p><strong>1941</strong><br />
Working weekends at the Epiphone factory in New York City, builds &#8220;The Log&#8221; by attaching a standard Epiphone neck, strings and wings to a 4&#215;4 board with a pickup. When M. H. Berlin, president of Gibson Guitar&#8217;s parent company, takes little interest in this &#8220;solid-body,&#8221; Paul braces an Epiphone hollow body with a 3/8-inch steel bar, winds his own super-hot pickups and, for a decade or more, uses &#8220;The Klunker&#8221; as his primary electrified guitar for performing and recording.</p>
<p><strong>1942</strong><br />
Moves to Los Angeles with the dream of teaming up with Bing Crosby and replacing the late Eddie Lang, Paul&#8217;s guitar idol.</p>
<p><strong>1944</strong><br />
Drafted into Armed Forces Radio Service, where he creates V-Disc recordings and AFRS radio shows. Tangles with Nat Cole during the first &#8220;Jazz at the Philharmonic&#8221; concert in Los Angeles, one of history&#8217;s most famous jams.</p>
<p><strong>1945</strong><br />
Provides brilliant accompaniment for Bing Crosby&#8217;s post-war record hit &#8220;It&#8217;s Been a Long, Long Time.&#8221; Impressed with Paul&#8217;s technical wizardry, Crosby urges him to build a studio. Paul soundproofs his garage in Hollywood, where he records the Andrews Sisters, Art Tatum, Jo Stafford, Andy Williams, Kay Starr, Pee Wee Hunt, Andre Previn, Tex Williams, and W.C. Fields.</p>
<p><strong>1945</strong><br />
Gene Autry introduces Colleen Summers (Mary Ford) to Paul, who returns to his &#8220;Rhubarb Red&#8221; persona to perform &#8220;hillbilly&#8221; radio shows with Ford on NBC.</p>
<p><strong>1946</strong><br />
Paul&#8217;s mother complains that every guitar player on the radio sounds just like him. Paul leaves tour with the Andrews Sisters and returns to his garage studio in Hollywood for two years of research into echo, overdubbing, phasing, and other recording effects.</p>
<p><strong>1948</strong><br />
Emerges from studio with 22 &#8220;New Sound&#8221; recordings of multiple overdubbed guitars; Capitol Records releases Paul&#8217;s first solo hit single &#8211; &#8220;Lover&#8221; backed by &#8220;Brazil.&#8221; Paul and Ford inaugurate their musical act in Waukesha; en route back to California, their convertible careens off Route 66 during a winter storm. Paul&#8217;s right arm is badly damaged and doctors recommend amputation, but Paul persuades them to re-set arm in a crook so that he can continue to play.</p>
<p><strong>1949</strong><br />
Bing Crosby commissions Ampex Corporation to produce the first tape recorder, based on the wartime German prototype. Bing gives first Ampex model to Paul, who promptly orders an additional recording head and invents the &#8220;sound-on-sound&#8221; tape machine. Paul marries Mary Ford and hosts a radio show, &#8220;The Les Paul Show,&#8221; which airs for 23 weeks.</p>
<p><strong>1950</strong><br />
Gibson Guitar Corp. begins work on a solid-body electric guitar and seeks endorsement of the most prominent guitarist of the day.</p>
<p><strong>1951</strong><br />
&#8220;How High the Moon&#8221; and &#8220;Walkin&#8217; &amp; Whistlin&#8217; Blues&#8221; are chart-busters; Paul and Ford play the London Palladium.</p>
<p><strong>1951-6:</strong><br />
Paul and Ford create a string of 14 consecutive pop hits, including &#8220;Mocking Bird Hill,&#8221; &#8220;Tennessee Waltz,&#8221; &#8220;Bye, Bye, Blues,&#8221; &#8220;Tiger Rag,&#8221; &#8220;Waiting for the Sunrise,&#8221; and &#8220;I&#8217;m Sitting on Top of the World.&#8221;</p>
<p><strong>1952</strong><br />
Moves to Mahwah, New Jersey, to produce &#8220;Les Paul &amp; Mary Ford At Home,&#8221; a series of 5-minute television shows (170 episodes) sponsored by Listerine. Release of the Gibson &#8220;Gold Top,&#8221; the first commercial &#8220;Les Paul model&#8221; solid-body electric guitar.</p>
<p><strong>1953</strong><br />
Conceives of 8-track tape recorder and works with Ampex to refine and manufacture the equipment. Release of Paul and Ford&#8217;s biggest hit, &#8220;Vaya Con Dios.&#8221;</p>
<p><strong>1955</strong><br />
As guest speaker at Audio Engineers Society convention, Paul proposes the &#8220;use of light for recording sound.&#8221;</p>
<p><strong>1956</strong><br />
Invents the &#8220;Les Paulverizer,&#8221; a remote-control device he attaches below the tailpiece of his guitar to manipulate the taped accompaniment he and Ford used during their White House concert for President Dwight D. Eisenhower.</p>
<p><strong>1957</strong><br />
Ampex delivers first operational 8-track recorder to Paul. Capitol Records contract ends as rock and roll pushes Paul and Ford off the charts. They sign with Mitch Miller at Columbia Records.</p>
<p><strong>1963</strong><br />
Paul and Ford separate.</p>
<p><strong>1964</strong><br />
Retires from performing, but not from tinkering with pickup designs and other electronics.</p>
<p><strong>1964</strong><br />
Divorced from Mary Ford.</p>
<p><strong>1975</strong><br />
Carnegie Hall concert with Bucky Pizzarelli, George Benson and Laurindo Almeida.</p>
<p><strong>1976</strong><br />
Emerges from retirement to record &#8220;Chester &amp; Lester&#8221; with Chet Atkins, and a 1978 follow-up, &#8220;Guitar Monsters.&#8221; The former receives a 1977 Grammy for &#8220;Best Country Instrumental Performance.&#8221;</p>
<p><strong>1977</strong><br />
Mary Ford dies in Los Angeles after lapsing into diabetic coma.</p>
<p><strong>1979</strong><br />
Receives Recording Academy&#8217;s Grammy Hall of Fame Award for &#8220;How High the Moon.&#8221;</p>
<p><strong>1980</strong><br />
Quintuple by-pass heart surgery at the Cleveland Clinic.</p>
<p><strong>1983</strong><br />
Receives prestigious Trustees Award from the Recording Academy.</p>
<p><strong>1984</strong><br />
Launches a regular Monday night gig with his trio in New York City, first at Fat Tuesdays and then at the Iridium Jazz Club.</p>
<p><strong>1985</strong><br />
Induction into Hollywood Guitar Center&#8217;s &#8220;Rock Walk of Fame.&#8221;</p>
<p><strong>1988</strong><br />
Lauded in a Cinemax tribute, Les Paul: He Changed the Music, with B.B. King, Eddie Van Halen and others.</p>
<p><strong>1988</strong><br />
Induction into the Rock and Roll Hall of Fame as &#8220;Architect of Rock &#8216;n&#8217; Roll.&#8221;</p>
<p><strong>1996</strong><br />
Induction into New Jersey Inventors Hall of Fame; presented The John Smithson Bicentennial Medal by the Smithsonian Institution.</p>
<p><strong>1997</strong><br />
Featured in a celebrated Coors &#8220;Original&#8221; beer commercial: Young rocker: &#8220;What&#8217;s your name?&#8221; Les Paul: &#8220;It&#8217;s on your guitar.&#8221;</p>
<p><strong>2001</strong><br />
Awarded a Technical Grammy by the Recording Academy.</p>
<p><strong>2005</strong><br />
Celebrates his 90th birthday with a tribute concert at Carnegie Hall; inducted into National Inventors Hall of Fame; receives Sammy Cahn Lifetime Achievement Award from the Songwriters Hall of Fame.</p>
<p><strong>2006</strong><br />
Two 2005 Grammy awards &#8211; Best Pop Instrumental Performance (&#8220;Caravan&#8221;) and Best Rock Instrumental Performance (&#8220;69 Freedom Special&#8221;) &#8211; for Les Paul</p>
      </div>
    </div>
    </main>
    <footer>
      <p>See more detail of Les Paul's life on <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Les_Paul">Wikipedia</a></p>

    </footer>
</body>
</html>

Here is my css :

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  box-sizing: border-box;
}

.hdr {
  width:100%;
  text-align: center;
  background-color: #f2f3f4;
}

h1 {
  margin: 0;
  padding: 20px 0 0 0;
  font-family: 'Merriweather', serif;
  font-size: 3.5em;
  font-weight: 700;
  
}

.hdr p {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-size: .9em;
  font-weight:400;
  margin: 0;
}

.hdr-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;  
}

figure {
  background: linear-gradient(90deg,#ffffff 0%, #000000 20%, #000000 80%, #ffffff 100%);
}

#img-caption {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-size: .8em;
  font-weight:400;
  margin-top: 5px;
  padding: 10px 0;
  background: #f2f3f4;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  font-weight:700;
  text-align: center;
  margin: 30px 0;
}

.trib-container {
  width:100%;
  display:flex;
  justify-content: center;
}

#tribute-info {
  width: 90%;
  background-color: #f2f3f4;
  font-family:'Lato', sans-serif;
  font-size: 1em;
  font-weight:400;
  padding: 10px;   
}

footer p {
  font-family:'Lato', sans-serif;
  font-size: 0.8em;;
  font-weight:400;
  text-align: center;
}

Tribute link is outside, and figure is not closed, this last one can make the browser best guess on where it should close completely wrong

I would need to use an html validator to check if everything is ok, but that’s a start to see that it’s not ok

and by trial and error, this is actually the only thing that makes it not pass

Thank you Ilenia. It’s good to know my thinking on descendants wasn’t off, but in my frustration I missed the tribute-link position completely.

I moved the tribute-link up into main and it did indeed pass, and the page still looks great.

Thank you for your help.