Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]wykaz inline - znikające "kropki"
sazian
post
Post #1





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----

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 )
(IMG:http://img199.imageshack.us/img199/8420/zrzutekranu42.png)
postanowiłem je przerobić na wykaz 
[HTML] pobierz, plaintext 
  1. <ul style="color:white;list-style-image: url(Obrazki/www_14.gif)">
  2. <li>o mnie</li>
  3. <li>firma</li>
  4. <li>galeria</li>
  5. </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 
  1. <ul style="color:white;list-style-image: url(Obrazki/www_14.gif)">
  2. <li style="display:inline">o mnie</li>
  3. <li style="display:inline">firma</li>
  4. <li style="display:inline">galeria</li>
  5. </ul>
[HTML] pobierz, plaintext


oczywiście napisy zostały wyświetlone w linij ale "kropki" zniknęły (IMG:style_emoticons/default/sad.gif)
wiecie może dlaczego tak się dzieje (IMG:style_emoticons/default/questionmark.gif) i jak przywrócić wypunktowanie
Go to the top of the page
+Quote Post
neverever
post
Post #2





Grupa: Zarejestrowani
Postów: 278
Pomógł: 44
Dołączył: 17.02.2004
Skąd: Wieliczka

Ostrzeżenie: (10%)
X----

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

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

może być
[HTML] pobierz, plaintext 
  1. <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 
  1. #nav { color:white; list-style-image: url(obrazki/www_14.gif); }
  2. #nav li { display:inline; }
[HTML] pobierz, plaintext


A potem już tylko
[HTML] pobierz, plaintext 
  1. <ul id="nav">
  2. <li>o mnie</li>
  3. <li>firma</li>
  4. <li>galeria</li>
  5. </ul>
[HTML] pobierz, plaintext


Ten post edytował neverever 21.01.2010, 11:34:48
Go to the top of the page
+Quote Post
sadistic_son
post
Post #3





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

I wszystko to nic nie da bo przy parametrze inline dla list kropki po prostu znikaja. Mozesz je dorobic pozycjonowaniem absolutnym.
Go to the top of the page
+Quote Post
sazian
post
Post #4





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
phpion
post
Post #5





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
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.
Go to the top of the page
+Quote Post
sazian
post
Post #6





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----

niestety dalej znikają
Go to the top of the page
+Quote Post
AdIoS_Neo
post
Post #7





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

Ostrzeżenie: (0%)
-----

Witam (IMG:style_emoticons/default/smile.gif) Tak na szybko ale pewnie się połapiesz o co chodzi:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title>UL LI</title>
  4. 	<style>
  5. 	li{
  6. 		list-style-image: none;;
  7. 		list-style-type: none;
  8. 		list-style-position: inside;
  9. 		display: inline;
  10. 		background:transparent url(li.png) no-repeat;
  11. 		padding-left:16px;
  12. 	}
  13. 	</style>
  14. </head>
  15. <body>
  16.  
  17. <ul>
  18. 	<li>A</li>
  19. 	<li>B</li>
  20. 	<li>C</li>
  21. </ul>
  22.  
  23. </body>
  24. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
sazian
post
Post #8





Grupa: Zarejestrowani
Postów: 1 045
Pomógł: 141
Dołączył: 19.09.2006
Skąd: B-tów

Ostrzeżenie: (0%)
-----

heh o tym nie pomyślałem (IMG:style_emoticons/default/smile.gif) dzięki
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 11:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn