私が作成しているこのWebページには、10個のdivクラスが2行にスタックされています(上に5つ、下に5つ)。それぞれの中に画像があります。ChromeとFirefoxは、ハイパーリンクとして表示されるべきではないときにハイパーリンクとして表示される1つの小さなテキストフレーズを除いて、すべてを正しくレンダリングしています(詳細については、この投稿の下部を参照してください)。これは、コード内の何かがオフになっていることを私に知らせますが、私は一生の間、何を理解することができません。FTPでライブサイトにアップロードするまで、すべてが正常に見えます。ヘルプは大歓迎です。
HTML:
<div id="text-brands">
<h2 class="blueheader">Learn More About Our Featured Brands</h2>
<br />
<div class="featuredBrands">
<a href="http://www.attvtedetails.com" target="_blank"><img src="images/Brand Logos/ATT.jpg" width="150" height="150" alt="AT&T" /> </a> </div>
<div class="featuredBrands"><a href="http://www.brotherdetails.com" target="_blank"><img src="images/Brand Logos/BROTHER.jpg" width="150" height="150" alt="Brother" /> </div>
<div class="featuredBrands"><a href="http://www.dymodetails.com" target="_blank"><img src="images/Brand Logos/DYMO.jpg" width="150" height="150" alt="Dymo" /></div>
<div class="featuredBrands"><a href="http://www.fujifilmdetails.com" target="_blank"><img src="images/Brand Logos/FUJI.jpg" width="150" height="150" alt="Fuji Film" /> </div>
<div class="featuredBrands"><a href="http://www.hpdetails.com" target="_blank"><img src="images/Brand Logos/HP.jpg" width="150" height="150" alt="HP" /> </div>
<div class="featuredBrands"><a href="http://www.imation-memorexdetails.com" target="_blank"><img src="images/Brand Logos/IMATION.jpg" width="150" height="150" alt="Imation" /> </div>
<div class="featuredBrands"><a href="http://www.kensingtondetails.com" target="_blank"><img src="images/Brand Logos/KENSINGTON.jpg" width="150" height="150" alt="Kensington" /> </div>
<div class="featuredBrands"><a href="http://www.logitechdetails.com" target="_blank"><img src="images/Brand Logos/LOGITECH.jpg" width="150" height="150" alt="Logitech" /> </div>
<div class="featuredBrands"><a href="http://www.verbatimdetails.com" target="_blank"><img src="images/Brand Logos/VERBATIM.jpg" width="150" height="150" alt="Verbatim" /> </div>
<div class="featuredBrands"><a href="http://www.lexmarkdetails.com" target="_blank"><img src="images/Brand Logos/LEXMARK.jpg" width="150" height="150" alt="Lexmark" /> </div>
<br />
<br />
<br />
</div>
CSS:
#text-brands {
width: 925px;
float: left;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
.featuredBrands {
margin: 0px;
padding: 10px;
float: left;
width: 150px;
border: 5px solid #EAEAEA;
clear: none;
height: 150px;
overflow: hidden;
}
これが私が問題を抱えているリンクです:http ://www.officesolutions.com/technology-products.html
最後の質問(誰かが助けてくれるなら、これは本当にボーナスだと思います)。「製品カテゴリ」ページの下部にある左端のカテゴリは、ハイパーリンク(具体的には、レックスマークのロゴが向けるリンク)としてレンダリングされています。 。そのフレーズの近くにはマークアップがまったくないので、私はそれを理解できません。ヘッダーになっているはずですが、どういうわけかリンクとして表示されています。
HTML:
<div id="content-bottom">
<div id="sitelinks">
<div class="column" style="border-left: none;">
<p><strong>Product Categories</strong></p>
<ul>
<li><a href="office-supplies.html">Office Supplies</a></li>
<li><a href="furniture-space-planning.html">Furniture & Space Planning</a></li>
<li><a href="facility-maintenance-supplies.html">Facility & Maintenance Supplies</a></li>
<li><a href="coffee-services.html">Coffee Services</a></li>
<li><a href="printing-promotional-products.html">Printing & Promotional Products</a></li>
<li><a href="technology.html">Technology</a></li>
</ul>
</div>
</div>
</div>