Forum PHP.pl > [CSS]wykaz inline - znikające "kropki"

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]wykaz inline - znikające "kropki"

sazian

21.01.2010, 11:03:53

Witam,
znajomy dał mi do "ulepszenia" szablon strony (on po prostu pociął go w photoshopie i tak zostawił)
na stronie było poziome menu (oczywiście w całości z obrazków )

postanowiłem je przerobić na wykaz

[HTML] pobierz, plaintext 
<ul style="color:white;list-style-image: url(Obrazki/www_14.gif)">
<li>o mnie</li>
<li>firma</li>
<li>galeria</li>
</ul>
[HTML] pobierz, plaintext

to wyszło bardzo ładnie więc cały szczęśliwy że tak szybko poszło przerobiłem kod żeby wykaz był inline

[HTML] pobierz, plaintext 
<ul style="color:white;list-style-image: url(Obrazki/www_14.gif)">
<li style="display:inline">o mnie</li>
<li style="display:inline">firma</li>
<li style="display:inline">galeria</li>
</ul>
[HTML] pobierz, plaintext

oczywiście napisy zostały wyświetlone w linij ale "kropki" zniknęły

wiecie może dlaczego tak się dzieje

i jak przywrócić wypunktowanie

neverever

21.01.2010, 11:34:06

1 . sprawdź wielkość liter w ścieżce - jeżeli serwer unixowy to ma ona znaczenie

zamiast

[HTML] pobierz, plaintext 
<ul style="color:white;list-style-image: url(Obrazki/www_14.gif)">
[HTML] pobierz, plaintext

może być

[HTML] pobierz, plaintext 
<ul style="color:white;list-style-image: url(obrazki/www_14.gif)">
[HTML] pobierz, plaintext

2. takie formatowanie jest bardzo niewygodne.
łatwiej będzie zrobić tak:

[HTML] pobierz, plaintext 
#nav { color:white; list-style-image: url(obrazki/www_14.gif); }
#nav li { display:inline; }
[HTML] pobierz, plaintext

A potem już tylko

[HTML] pobierz, plaintext 
<ul id="nav">
<li>o mnie</li>
<li>firma</li>
<li>galeria</li>
</ul>
[HTML] pobierz, plaintext

sadistic_son

21.01.2010, 11:38:19

I wszystko to nic nie da bo przy parametrze inline dla list kropki po prostu znikaja. Mozesz je dorobic pozycjonowaniem absolutnym.

sazian

21.01.2010, 11:51:38

neverever:
1)ścieżka jest na pewno dobra ("w pionie" działa normalnie)
2)oczywiście wiem że taki zapis nie jest piękny ale pomyślałem że tak będzie czytelniej

sadistic_son:
niestety trochę trudno będzie to wypozycjonować absolutnie

poradziłem sobie z tym wstawiając te kropki znacznikiem img ale myślałem że jest na to jakiś bardziej elegancki sposób

phpion

21.01.2010, 11:56:53

Zamiast display: inline daj float: left. Może posypać Ci się dalsza część laya, ale wtedy z pomocą przyjdzie clear: left dla elementu po menu.

sazian

21.01.2010, 12:04:35

niestety dalej znikają

AdIoS_Neo

21.01.2010, 13:00:34

Witam

Tak na szybko ale pewnie się połapiesz o co chodzi:

[HTML] pobierz, plaintext 
<html>
<head>
	<title>UL LI</title>
	<style>
	li{
		list-style-image: none;;
		list-style-type: none;
		list-style-position: inside;
		display: inline;
		background:transparent url(li.png) no-repeat;
		padding-left:16px;
	}
	</style>
</head>
<body>
 
<ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
</ul>
 
</body>
</html>
[HTML] pobierz, plaintext

sazian

21.01.2010, 13:27:33

heh o tym nie pomyślałem

dzięki

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.