Головоломка CSS: как добавить фоновое изображение и установить высоту/ширину для пустого промежутка?

Я установил background-image для пары элементов span, но они не отображаются, я думаю, потому что мои настройки height и width игнорируются.

HTML-источник:

<div class="textwidget">
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a> 
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a> 
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a>
</div>

CSS:

span.sidebar-poster {
    margin-bottom: 10px;
    background-repeat: no-repeat;
    width: 160px;
}
span#starthere { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#starthere:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#primarydocs { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#primarydocs:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#donate { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
    height: 285px;
} 
span#donate:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}

Ни одно из фоновых изображений на самом деле не видно.

В инструментах разработчика Chrome в разделе «Вычисляемый стиль» эти два диапазона имеют фоновое изображение. Если я скопирую и вставлю URL-адрес этого изображения, я увижу изображение. Но на самом деле ничего не рендерится.

[ОБНОВЛЕНИЕ – эта часть решена, спасибо] В инструментах разработчика Chrome в разделе Matched Rules только диапазоны #starthere и #donate фактически получают атрибут background-image. Диапазон #primarydocs — нет. Почему нет?


html css
person AP257    schedule 17.01.2011    source источник
comment
Таким образом, элементы span имеют высоту 0 пикселей и ширину 0 пикселей, может быть, это все. Почему? Почему у них нет той высоты, которую я дал им в #id, и ширины в классе sidebar-poster?   -  person AP257    schedule 17.01.2011
comment
span id="#primarydocs", вероятно, должно быть span id="primarydocs".   -  person    schedule 17.01.2011
comment
ДА. Спасибо, не знаю, как я это не заметил! Теперь просто есть ширина, чтобы выяснить.   -  person AP257    schedule 17.01.2011
comment
Более широкий вопрос: как я мог заметить это, не публикуя на SO? Есть ли аналог Firebug для ошибок CSS? Firebug выдавал загадочную ошибку Неожиданный токен в селекторе атрибутов!, но я даже не уверен, что это связано с этой ошибкой.   -  person AP257    schedule 17.01.2011
comment
@ AP257: firebug перечисляет все правила, соответствующие элементу, поэтому, если вы не видите ожидаемого правила, вы обычно ошиблись в написании класса / идентификатора или пропустили запятую в правиле селектора. (По крайней мере, я так делаю.)   -  person Ulrich Schwarz    schedule 17.01.2011
comment
НЕ по теме: вы должны использовать ul для семантически правильного списка ссылок.   -  person zzzzBov    schedule 17.01.2011

Ответы (4)


arrow_upward
8
arrow_downward

SPAN — встроенный элемент. Который действительно будет игнорировать такие вещи. Попробуйте установить режим отображения в CSS примерно так: display: block;

person Marnix    schedule 17.01.2011

arrow_upward
4
arrow_downward

Я думаю, что ваши span должны иметь display:inline-block, обычный диапазон всегда будет иметь «естественную» ширину и высоту.

person Ulrich Schwarz    schedule 17.01.2011
comment
Обратите внимание, что встроенный блок не поддерживается, я думаю, по крайней мере, IE6, а может и 7. Честно говоря, я просто помню, что он плохо поддерживается, я не помню его степени. - person crimson_penguin; 17.01.2011
comment
Мое оправдание состоит в том, что IE6 настолько ааааааааааааентен, что мне просто наплевать, и все платформы, на которых был IE7, также получили IE8. К счастью, я работаю в занудном месте, и мне это может сойти с рук. ;) - person Ulrich Schwarz; 17.01.2011

arrow_upward
2
arrow_downward

Поскольку a автоматически является display: inline;, он не может принимать атрибуты width и height из CSS.

Если вы хотите использовать характеристику inline, но без внутреннего содержания (т.е.: <span>content</span>) и вместо этого иметь фоновое изображение, используйте вместо этого padding.

ie:

span { padding: 10px; }

но введите количество пикселей, которое вам нужно, чтобы показать изображение.

person Adrian    schedule 10.04.2012

arrow_upward
0
arrow_downward

Решено - вы не можете установить height и width на span, потому что это встроенный элемент. Переключение на div решило это.

Фу.

Если кто-то знает, как отлаживать CSS с помощью более эффективных инструментов, чем догадки, надежды, поиски в гугле и ругань, пожалуйста, дайте мне знать!

person AP257    schedule 17.01.2011
comment
Используйте Chrome и его встроенные инструменты разработчика, они великолепны! Или, если вы фанат Firefox, используйте надстройку FireBug. Оба они являются потрясающими инструментами отладки. - person Baer; 25.07.2011