CODEWITHSUNDEEP
htmlcss
wajieraja
wajieraja

Reputation: 5

The caption inside the img element is not getting affected by the id

I am trying to align the caption differently to the image but it is stuck with the image and I am unable to alter its features even though it has a separate id inside its element. The id='img-caption' does not seem to affect the 'caption' element.

HTML

<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
  A tribute to Agha Sahib</h2>
  <div id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'></img><caption id='img-caption'>Picture of Agha Hassan Abedi</caption>
  </div>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>

CSS

#main {
  background-color: #eee;
}

#title {
  background-color: lightgray;
  text-align: center;
  width: 100%;
}
#img-div {
  background-color: lightblue;
  text-align:left;
}
#img-caption {
  background-color: gray;
}

#img {
  align: center;
  max-width: 100%;
  height: auto;
  #position: absolute;
  #center: 0px;
}

h1 {
  color: gray;
  font-family: Times New Roman;
  text-align: center;
}

https://codepen.io/wajieraja/pen/gOaeGvm

Upvotes: 0

Views: 525

Answers (2)

wajieraja
wajieraja

Reputation: 5

I changed the name of the element from caption to h3, perhaps the name was the issue but this change now allows me to write directions that now works. Thanks for the suggestions to use the figure element tag. Will try it out.

Upvotes: 0

Farouk M
Farouk M

Reputation: 1295

The caption element is used inside a table. If you want to use it with an image, I suggest you to wrap your image inside a figure element and to add a figcaption element. In your case it can't be something like this : 

#main {
  background-color: #eee;
  font: calibri;
}

#title {
  background-color: lightgray;
  text-align: center;
  width: 100%;
}
#img-div {
  background-color: lightblue;
  text-align:left;
}
#img-caption {
  background-color: gray;
}

#img {
  align: center;
  max-width: 100%;
  height: auto;
  #position: absolute;
  #center: 0px;
}

h1 {
  color: gray;
  font-family: Times New Roman;
  text-align: center;
}
<main id='main'>
<h1>Agha Hassan Abedi</h1>
<h2 id='title'>
  A tribute to Agha Sahib</h2>
  <figure id='img-div'><img id='img' src='https://www.pakpedia.pk/files/Image/jpg/2c6ccb0373586eefb0f441936770a47a.jpg'><figcaption id='img-caption'>Picture of Agha Hassan Abedi</figcaption>
  </figure>
<h3 id'tribute-info'>Agha Hasan Abedi, was a Pakistani banker and philanthropist. Abedi founded Bank of Credit and Commerce International in 1972. Abedi underwent a heart transplant operation in 1988, and died of a heart attack on 5 August 1995 in Karachi.</h3>
<a id-'tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Agha_Hasan_Abedi'>More Info</a>
</main>

Upvotes: 1

Related Questions