PDA

Zobacz pełną wersję : Obrazek w menu zamiast tekstu


pan_przemo
02-09-2009, 23:16
Witam,

przeszukałem już cały internet + forum i choć znalazłem podpowiedzi to rozwiązania niestety nie.

Chcę w górnym menu strony zamienić tekst na obrazek (zamiast napisu 'wersja angielska' chciałbym mieć flagę). Z tego co się poorientowałem to da się to zrobić jedynie edytując CSS'a. I z tym mam problem. Nic nie działa.

Element, który chciałbym podmienić w kodzie strony wygląda tak:

<li class="item56"><a href="/index.php?option=com_content&amp;view=category&amp;layout= blog&amp;id=38&amp;Itemid=56"><span>Angielski</span>

W CSS'ie napisałem coś takiego, ale niestety zero reakcji

li.item56 {
margin:0; padding:0
position:relative;
width:50px; height:50px;
overflow:hidden;
}

li.item56 {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:50px; height:50px;
margin:0; padding:0;
background:url("../images/eng.png") top left no-repeat;
}

Tu na forum było podawane inne rozwiązanie, ale ono również nie działa:

li.item56 {
width: 50px;
height: 50px;
background-image: url(image.gif);
font-size: 100%;
}

li.item56 span
{
display: block;
position: relative;
z-index: 1;
margin-bottom: -41px;
}

li.item56 {
overflow: hidden;
}

Bardzo proszę o pomoc,

pozdr
PP
zwiastun
03-09-2009, 02:25
1. adres w url () podaje się bez apostrofów czy innych cudzysłowów
2. ogólnie to mniej więcej tak, w szczegółach to chyba sam nie wiesz, co robisz i po co:

li.item56 {
margin:0; padding:0
position:relative;
width:50px; height:50px;
overflow:hidden;
}

li.item56 {
display:block;
position:absolute;
left:0; top:0; z-index:1;
width:50px; height:50px;
margin:0; padding:0;
background:url("../images/eng.png") top left no-repeat;
}
To jak ma być pozycjonowane: względnie, bezwzględnie? Oczywiście, reguła pierwsza jest nadpisywana, ale jeśli u Cię taka konsekwencja w myśleniu, to trudno dociekać, coś jeszcze nawymyślał nie tak!
pan_przemo
03-09-2009, 08:55
dzięki za zainteresowanie, rzeczywiście brak konsekwencji, ale to chyba zmęczenie, w każdym bądź razie te rozwiązania nic nie dają, po prostu obrazek się wciąż nie wyświetla

poszperałem więc dalej, pozmieniałem trochę i obrazek w końcu się pokazał, ale nie chce schować tekstu - tekst jest nad obrazkiem. Kod wygląda tak:

li.item56 { overflow: hidden; }
li.item56, li.item56 span {
width: 50px;
height: 33px;
background-image: url(image.gif);
font-size: 100%;
}
li.item56 span {
display: block;
position: relative;
z-index: 1;
margin-bottom: -41px;

Dzięki za pomoc.
yogi009
03-09-2009, 10:21
a nie lepiej użyć komponentu językowego, który te rzeczy według uznania wyświetla sam ?
pan_przemo
03-09-2009, 10:46
@yogi009

to nie chodzi tylko o język, to jest jedynie przykład, ale dzięki
pan_przemo
03-09-2009, 15:39
udało się, przekazuję więc dla potomnych

li.item56 { overflow: hidden; }
li.item56, li.item56 span {
width: 50px;
height: 33px;
background-image: url(image.gif);
font-size: 0px;
}
li.item56 span {
display: block;
position: relative;
z-index: 1;
margin-bottom: -41px;

pozdr!