Я строю сайт фиксированной ширины, 970 пикселей по центру, с градиентом в качестве окружающего.Первоначально участок фиксированной ширины был белым с несколькими горизонтальными областями (меню, область поиска, область выбора продукта), имеющими различный фон.Это было достигнуто просто с помощью белого цвета фона для div, который является следующим потомком тела, который содержал все содержимое страницы, и при необходимости переопределением для цвета фона.Это сработало нормально.
Можно ли сделать так, чтобы у этих горизонтальных областей был тот же фон, что и у градиента, который, очевидно, будет отличаться в разных местах на странице?Я думал, что просто оставлю фоновый цвет прозрачным (по умолчанию) на всех уровнях, пока не достигну родительского содержимого, которое я хочу белого, сделав фоновый цвет этого родителя #FFFFFF.Это работает, если я указываю высоту области.Тем не менее, основная часть сайта будет иметь неопределенную высоту и должна быть белой (или что-то отличное от градиента!).Существуют ли методы, с помощью которых я могу заставить элемент и его содержимое переместиться на белый фон, не указывая высоту для этого элемента?
Спасибо.
Спасибо за ответ.Я должен уточнить с кодом, чтобы вопрос был понятен.Извините за это.
Вот пример HTML, который иллюстрирует проблему:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li><a href="#">Menu Item One</a></li>
<li><a href="#">Menu Item Two</a></li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
Во-первых, вот CSS, который работает, используя белый цвет фона уровня страницы и другой фон уровня раздела.цвет (желтый для иллюстрации).Это работает по всему моему коду.Я не показываю никаких перезагрузок или основных настроек.Обратите внимание, что закомментированный CSS для #HeaderBannerSection не нужен (он появляется в неработающем коде, который показан после этого кода).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Вот изменения этого CSSэта попытка сделать цвет фона html-уровня (а именно градиент) по умолчанию, через прозрачность, за исключением случаев, когда она специально переопределяется там, где это необходимо (в этом примере для #HeaderBannerSection (с кодом сверху, закомментированным при необходимости)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
.,.
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
.,.
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
Этот код не работает.Цвет фона для раздела, который должен быть белым, вместо этого остается градиентом.Это верно, если я не укажу высоту для раздела, тогда все будет работать.Но я не смогу указать высоту для основного раздела (не показано), если я не сделаю jQuery для определения визуализированной высоты, а затем не выполню настройку высоты jQuery css (не идеально, и даже не попробовал ее, чтобы увидетьесли он работает).Между прочим, этот код работает в IE6 и IE7 (по крайней мере, как в Expression Web 4 SuperPreview).
Еще раз спасибо за любую помощь, которую вы можете мне дать.