Układanka CSS: Jak dodać obraz tła i ustawić wysokość/szerokość na pustym obszarze?

Ustawiłem na kilku elementach span, ale one się nie pojawiają, myślę, że moje ustawienia height i width są ignorowane.Układanka CSS: Jak dodać obraz tła i ustawić wysokość/szerokość na pustym obszarze?

źródło 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); 
}

Żaden z obrazów tła są rzeczywiście widoczne.

W narzędziach dla programistów Chrome, w stylu obliczeniowym, te dwa zakresy wydają się mieć obraz tła. Jeśli skopiuję i wkleję adres URL tego obrazu, widzę obraz. Jednak nic nie jest renderowane.

[AKTUALIZACJA - ta część jest rozwiązany dzięki] w Chrome Developer Tools, pod dopasowaną regulaminu, jedynie #starthere i #donate przęsła są faktycznie podniesienie atrybut background-image. Odstęp #primarydocs nie jest. Dlaczego nie?

Źródło

2011-01-17 AP257

Tak więc elementy zakresu mają wysokość 0 pikseli i szerokość 0 pikseli, może to wszystko. Czemu? Dlaczego nie mają takiej wysokości, jaką im dałem w klasie #id i szerokości na pasku bocznym? – AP257

'span id =" # primarydocs "' prawdopodobnie powinien być 'span id =" primarydocs "'. –

TAK. Dziękuję, nie wiem, jak tego nie zauważyłem! Teraz wystarczy szerokości, aby dowiedzieć się. – AP257

SPAN jest elementem śródliniowym. Który naprawdę zignoruje takie rzeczy. Spróbuj ustawić tryb wyświetlania w swoim CSS do czegoś podobnego: display: block;

Źródło

2011-01-17 19:20:09 Marnix

Myślę, że twoje span muszą mieć display:inline-block, zwykła rozpiętość zawsze będzie miała "naturalną" szerokość i wysokość.

Źródło

2011-01-17 19:19:24

Zauważ, że blok inline nie jest obsługiwany przez I think przynajmniej IE6, może nie 7 albo. Szczerze mówiąc, po prostu pamiętam, że nie jest "dobrze wspierany", nie pamiętam jego zasięgu. –

Moja wymówka jest taka, że IE6 jest tak aaaaaancient Po prostu nie daję s, a wszystkie platformy, które mają IE7 również mają IE8. Na szczęście pracuję w nerdowym miejscu i mogę uciec. ;) –

Rozwiązany - nie można ustawić height i width na span, ponieważ jest to element wstawiany. Przejście na div rozwiązało to.

Uff.

Jeśli ktoś wie, jak debugować CSS za pomocą lepszych narzędzi niż zgadywanie, nadzieja, wyszukiwania w Google i przekleństwa, proszę dać mi znać!

Źródło

2011-01-17 19:20:05 AP257

Używaj Chrome i jego wbudowanych narzędzi programistycznych, są świetne! Lub jeśli jesteś ćpunem Firefox, użyj dodatku FireBug. Oba są znakomitymi narzędziami do debugowania. – Baer

Ponieważ jest display: inline; automatycznie nie może wziąć width i height atrybuty z CSS.

Jeśli chcesz użyć inline charakterystyczny ale bez zawartości wewnętrzna (tj <span> zawartości </span>) i zamiast mieć obraz tła, zamiast używać padding.

tj:

span { padding: 10px; }

ale wejście liczba pikseli trzeba by pokazać obraz.

Źródło

2012-04-10 21:51:00 Adrian

Układanka CSS: Jak dodać obraz tła i ustawić wysokość/szerokość na pustym obszarze?

Odpowiedz

Powiązane problemy