2013-03-20 3 views
0

나는 모든 것을 시도해 왔지만 블록 요소를 인라인 요소에 넣지 않으면 각 이미지 위에 마우스를 가져 가면 각 이미지 아래의 팝업이나 툴 팁이 나타나지 않습니다. 난 당신이 이것을 할 가정하고 w3 유효성 검사기를 통해 웹 사이트의 유효성을 검사해야하고 이것은 유효성이 때 팝업 오류입니다. 아무도 나를 도울 수 있습니까? 나는 그것이 받아 들여지지 않는 간단한 수정이어야한다는 것을 안다.인라인 요소 내에 블록 레벨 요소를 넣을 수 없습니까?

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Lab 7-3</title> 

<style type="text/css"> 
<!-- 

#links a:hover { font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px;} 
#links a:hover {border-right: double 5px; background-color: #ff1828; color:white} 

<span> 

    .tooltip-wrap {position: relative;} 

    .tooltip-wrap .tooltip-content { display: none; position: absolute; margin-top: 220px; margin-left: 550px width: 180px; background-color: #000000; color:#ffffff; padding: 5px; margin: 10px;} 

    a:hover .tooltip-content {display: block;} 

</span> 
--> 
</style>      

</head> 

<body> 

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" /> 
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 
<div id="links"> 
<div class="tooltip-wrap"> 
<table style="text-align: center"> 
    <tr> 

    <td> 
      <a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine" /> 
      <div class="tooltip-content"> 
      <p>Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron</p> 
      </div> </a> 
    </td> 

    <td> 
     <a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" /> 
     <div class="tooltip-content"> <p>Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium</p> 
      </div></a> 

    </td> 

    <td> <a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" /> 
     <div class="tooltip-content"> <p>Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium</p> 
     </div> </a> 

    </td> 


</table> 
</div> 



</body> 
</html> 
+0

<div> 당신이 스팬 클래스 툴팁-컨텐츠 사업부를 변경 시도 해 봤나 변경해야합니다 : 여기 내 코드는? –

+0

나는 스팬을 시험해 보았고 그것을 검증하려고 시도했는데 똑같은 일을 할 수 없다고 말했다. 나는 그것이 간단한 픽스 인 것을 안다. 그러나 나는 무엇이 확실하지 않다. – user2129596

+0

블록 요소이므로 p를 제거해야합니다. –

답변

관련 문제