0
私はHTMLとCSSでかなり新しいです。そして私はMagentoのウェブサイトにいくつかの変更を加えています。いくつかのトラブルに会った... ここにウェブサイトがあります。 website with problemフッター内のスペースを削除するには
フッタ領域には大きな空白があります。なぜ空白があるのか全く分かりません。私はすべての関連コードをここに入れるよう全力を尽くします。しかし、基本的には
<div class="footer-container<?php if($footerCssClasses) echo $footerCssClasses; ?>">
<div class="footer-container2">
<div class="footer">
<?php //Columns ---------------------------------------------------------------------------------- ?>
<?php
//Set minimum height of both footer columns ("footer-item")
$linksColumnHeight = trim($themeHelper->getCfgDesign('footer/links_column_wrapper_height'));
$colHeightStyle = ''; //CSS specifying main footer column height
if (is_numeric($linksColumnHeight)) {
$linksColumnHeight = (int) $linksColumnHeight;
if ($linksColumnHeight > 0)
//echo '<style>.footer-item { min-height:' . $linksColumnHeight . 'px; }</style>';
$colHeightStyle = 'style="min-height:' . $linksColumnHeight . 'px;"';
}
?>
<?php
//Get 5 static CMS blocks "i_block_footer_links_column<X>", where <X> is a number from 1 to 5
$colCount = 0; //Number of existing column blocks
$colHtml = array(); //Columns' content
for ($i = 1; $i < 6; $i++)
{
if ($tmp_html = $this->getChildHtml('i_block_footer_links_column' . $i))
{
//$colHtml .= '<div class="footer-links-column-wrapper">' . $tmp_html . '</div>';
$colHtml[] = $tmp_html;
$colCount++;
}
}
?>
<?php
//Check if company info block exists
$blockFooterCompanyHtml = $this->getChildHtml('i_block_footer_company');
?>
<?php //If columns or company info block exist ?>
<?php if ($colHtml || $blockFooterCompanyHtml != ''): ?>
<div class="footer-main-bottom clearer">
<?php //If any of the 5 blocks exist, display HTML output inside a wrapper block ?>
<?php if ($colHtml): ?>
<div class="footer-item wide" <?php if($colHeightStyle) echo $colHeightStyle; ?>>
<?php
//Set column styles, if automatic width calculation is enabled
$colAuto = $themeHelper->getCfg('footer/links_column_auto_width');
$colWidthStyle = ''; //CSS specifying single column width and margin
$colWidthStyleLastCol = ''; //CSS specifying single column width and margin for the last column
if ($colAuto && $colCount > 0)
{
//Calculate column and right margin width (percentage): 90% of space for column, 10% for margin
//If there is only 1 column: width equals 100%, right margin is 0
//IMPORTANT: Calculate margin only if there is more than 1 column (to avoid division by zero)
if ($colCount > 1) {
$colWidth = 90/$colCount;
$marginWidth = 10/($colCount - 1); //Subtract 1 because the last block has no right margin
} else {
$colWidth = 100;
$marginWidth = 0;
}
$colWidthStyle = 'style="width:' .$colWidth. '%; margin-right:' .$marginWidth. '%;"';
$colWidthStyleLastCol = 'style="width:' .$colWidth. '%; margin-right:0;"';
}
?>
<?php for ($i = 0; $i < $colCount; $i++): ?>
<?php //If the last column: replace the width style with the width style for the last column
if ($i+1 == $colCount)
$colWidthStyle = $colWidthStyleLastCol;
?>
<div class="footer-links-column-wrapper" <?php if($colWidthStyle) echo $colWidthStyle; ?>>
<?php echo $colHtml[$i]; ?>
</div>
<?php endfor; ?>
<script type="text/javascript">decorateGeneric($$('.footer-links-column-wrapper'), ['last'])</script>
</div>
<?php endif; ?>
ページのソースに見ることができますこれは、フッターのコードの一部です。 コードの全体の一部は非常に非常に長いです...この部分の
CSS：
.footer-container {
background:url(../images/img/footer-gray.png) center 0 repeat;
}
.footer-container2 {
background:url(../images/img/footer-bg-top-line.png) center 0 repeat-x;
}
.footer {
width:960px;
margin:0 auto;
padding:0;
text-align:left;
background:url(../images/img/footer-bg-plus.png) center 50px no-repeat;
color:#555; /* DESIGN: footer text color */
}
.footer a {
color:#555; /* DESIGN: footer link color */
}
.footer a:hover {
color:#a60404; /* DESIGN: footer link color hover */
}
.footer .heading {
color:#333;
} /* DESIGN: footer heading color */
.mclear { clear:both; } /* my: additional simple clearing */
..だから任意の提案ですか？ 背景イメージが小さすぎると思っていましたか？実際には繰り返しています。だからこの推測は間違っている。
.footer {
background:url(../images/img/footer-bg-plus.png) center 50px no-repeat;
}
がそれを削除し、あなたは問題ないはずです。
それが原因であなたのフッター項目の広いクラスに設定MIN-heightプロパティ、である '.footer-container2'と' .footer'クラス –
から削除背景。あなたはそれを削除して所望の出力を得ることができます – Shrikant
こんにちは、お返事をいただきありがとうございます。既に固定されています。どうもありがとう！ – maggie3003