Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] lista ul i li
Forum PHP.pl > Forum > Przedszkole
Lejto
31.12.2008, 11:22:00
Mam prosty kod listy ul
[HTML] pobierz, plaintext 
  1. <ul style=" display:block;list-style:none;text-align:left">
  2.   	<li>aaaaaa</li>
  3.   </ul>
[HTML] pobierz, plaintext

wszystko jest ok tylko wyświetla tak

(przerwa) aaaaaa
a ja chce żeby wyświetlało tak

aaaaa

bawiłem się już ze stylami ale nic nie mogę zrobić, czy już taki głupi jestem czy zapomniałem już jako to się robi...
artur_dziocha
31.12.2008, 11:26:01
display:block; chyba powinno byc w <li>
Lejto
31.12.2008, 11:30:29
zrobiłem tak i nadaj jest przerwa
artur_dziocha
31.12.2008, 11:31:53
ul {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
display: block;
margin: 0px;
padding: 0px;
}
Lejto
31.12.2008, 11:33:04
też nic
Rudi1204
31.12.2008, 11:41:28
a wrzuć to sobie do div'a np i sprawdz :]
[HTML] pobierz, plaintext 
  1. <div style="width:50px; height:50px; background:red;>
  2. <ul style=" display:block;list-style:none;text-align:left">
  3. <li>aaaaaa</li>
  4. </ul>
  5. </div>
[HTML] pobierz, plaintext
Lejto
31.12.2008, 11:50:29
@Rudi1204 zadziałało ale muszę to jeszcze do menu dodać, zobaczę czy będzie tak jak powinno

ok działa jak powinno 
[HTML] pobierz, plaintext 
  1. <div style="width:190px;">
  2. 	<span class="le"></span> 
  3. 	<span class="sr"> <p style="margin-top:2px">&raquo; Menu </p></span>
  4. 	<span class="pr">&nbsp;</span>  
  5.  
  6. <div style="width:190px; height:50px;>
  7.  
  8. <ul style="display:block;list-style:none; background-color:#FFF; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  9. 	    	<li><a href="index.php" id="glowna"><img src="images/arrowbullet.png" border="0">Strona główna</a> </li>
  10. 	    	 //
  11. </ul>
  12.     <span class="le_d"></span>
  13. 	<span class="sr_d"></span>
  14. 	<span class="pr_d"></span>
  15. </div>
[HTML] pobierz, plaintext

dobry kod?
Rudi1204
31.12.2008, 11:51:26
biggrin.gif
Lejto
31.12.2008, 11:55:54
ale jeszcze chwila chwila tongue.gif
jeszcze nie działa tak jak powinno 
[HTML] pobierz, plaintext 
  1. <div style="width:190px;">
  2. <span class="le"></span>
  3. <span class="sr"> <p style="margin-top:2px">&raquo; Menu </p></span>
  4. <span class="pr">&nbsp;</span>
  5.  
  6. <div style="width:190px; height:50px;> <--------- tu nie ma na końcu " a jak dodam " to znów nie chodzi tak jak powinno 
  7.  
  8. <ul style="display:block;list-style:none; background-color:#FFF; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  9. <li><a href="index.php" id="glowna"><img src="images/arrowbullet.png" border="0">Strona główna</a> </li>
  10. //
  11. </ul>
  12. <span class="le_d"></span>
  13. <span class="sr_d"></span>
  14. <span class="pr_d"></span>
  15. </div>
[HTML] pobierz, plaintext

w tym divie nie mam na końcu " a jak dodam " to znów nie chodzi tak jak powinno sad.gif
Rudi1204
31.12.2008, 12:07:54 
[HTML] pobierz, plaintext 
  1. <div style="width:190px; background:red;">
  2.     <span class="le"></span>
  3.     <span class="sr">
  4.         <p style="margin-top:2px">&raquo; Menu</p>
  5.     </span>
  6.     <span class="pr">&nbsp;</span>
  7.  
  8.     <div style="width:190px; height:50px;>
  9.  
  10.         <ul style="display:block; list-style:none; background-color:#ffffff; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  11.             <li><a href="index.php" id="glowna">
  12.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  13.             </a></li>
  14.         </ul>
  15.  
  16.         <span class="le_d"></span>
  17.         <span class="sr_d"></span>
  18.         <span class="pr_d"></span>
  19.     </div>
  20. </div>
[HTML] pobierz, plaintext

nie bardzo wiem czy o to Tobie chodzi ale u mnie działa ok :]
Lejto
31.12.2008, 12:11:55
no działa tak jak wtedy ale chodzi o tego diva " <div style="width:190px; height:50px;> " nie ma na końcu style " a jak to się doda to znów lipa a bez tego jest ok. Rozumiesz?
Rudi1204
31.12.2008, 12:16:34
mistrzu mała uwaga nawet sam nie zauważyłem :/ zamiast 
[HTML] pobierz, plaintext 
  1. <div style="width:190px; height:50px;>
[HTML] pobierz, plaintext
powinno być 
[HTML] pobierz, plaintext 
  1. <div style="width:190px; height:50px;">
[HTML] pobierz, plaintext
widzisz różnice?? hehe pewnie nie więc napisze po 50px; nie miałeś apostrofa!! " ściągnij kod co ci wczesnieij napisałem dorzuć apostrof i będzie ok biggrin.gif
Lejto
31.12.2008, 12:20:57
nauczycielu smile.gif
o tym " cały czas pisze jak to dodam to włśnie nie działa tak jak powinno a bez tego działa winksmiley.jpg

[HTML] pobierz, plaintext 
  1. <div style="width:190px; height:50px;>
[HTML] pobierz, plaintext

działa

[HTML] pobierz, plaintext 
  1. <div style="width:190px; height:50px;">
[HTML] pobierz, plaintext


nie działa

div chyba nie pomoże chyba trzeba napisać jakiś styl do ul
Rudi1204
31.12.2008, 12:23:43
wklep sobie to i napisz co wyszło :]
[HTML] pobierz, plaintext 
  1. <div style="width:190px; background:red;">
  2.     <span class="le"></span>
  3.     <span class="sr">
  4.         <p style="margin-top:2px">&raquo; Menu</p>
  5.     </span>
  6.     <span class="pr">&nbsp;</span>
  7.  
  8.     <div style="width:190px; height:50px;">
  9.  
  10.         <ul style="display:block; list-style:none; background-color:#ffffff; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  11.             <li><a href="index.php" id="glowna">
  12.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  13.             </a></li>
  14.         </ul>
  15.  
  16.         <span class="le_d"></span>
  17.         <span class="sr_d"></span>
  18.         <span class="pr_d"></span>
  19.     </div>
  20. </div>
[HTML] pobierz, plaintext
Lejto
31.12.2008, 12:25:48
lipa tak jak na początku, jest przerwa
Rudi1204
31.12.2008, 12:32:36
i tak też działa ;pp
[HTML] pobierz, plaintext 
  1. <div style="width:190px; background:red;">
  2.     <span class="le"></span>
  3.     <span class="sr">
  4.         <p style="margin-top:2px">&raquo; Menu</p>
  5.     </span>
  6.     <span class="pr">&nbsp;</span>
  7.  
  8.  
  9.         <ul style="display:block; list-style:none; background-color:#ffffff; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  10.             <li><a href="index.php" id="glowna">
  11.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  12.             </a></li>
  13.         </ul>
  14.  
  15.         <span class="le_d"></span>
  16.         <span class="sr_d"></span>
  17.         <span class="pr_d"></span>
  18. </div>
[HTML] pobierz, plaintext


jakoś nie wiem dlaczego ale cieżko mi zrozumieć jaki chcesz uzyskać efekt ale może takie cos?? biggrin.gif:D
[HTML] pobierz, plaintext 
  1. <div style="width:190px; background:red;">
  2.         <p style="margin-top:2px; margin-bottom:0">&raquo; Menu</p>
  3.  
  4.         <ul style="margin:0; display:block; list-style:none; background-color:#ffffff; border: 2px solid #cc9933;" id="sidelinks" class="arrowlistmenu" >
  5.             <li><a href="index.php" id="glowna">
  6.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  7.             </a></li>
  8.             <li><a href="index.php" id="glowna">
  9.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  10.             </a></li>
  11.         </ul>
  12. </div>
[HTML] pobierz, plaintext
Lejto
31.12.2008, 12:34:39
a mi to nie działa tongue.gif jest przerwa daj screena bo nie wierze smile.gif
html jest normalnie trudniejszy od php... smile.gif
Rudi1204
31.12.2008, 12:46:04
Lejto
31.12.2008, 12:53:05
no tak ale ja właśnie nie chce mieć tej przerwy (pusto) Strona główna
tak nie


tak chce


kumasz?
Rudi1204
31.12.2008, 13:05:20
kumam kumam ale teraz qrde nie bardzo mam czas :/ ale nie bede taki i pozostawiam linka moze pomoze :]
http://css.maxdesign.com.au/index.htm

a to tak zanim znikne :]
[HTML] pobierz, plaintext 
  1. <div style="width:190px; background:red;">
  2.         <p style="margin-top:2px; margin-bottom:0">&raquo; Menu</p>
  3.  
  4.         <ul style="margin:0; display:inline; list-style:none;" id="sidelinks" class="arrowlistmenu" >
  5.             <li style="display:block;background-color:#ffffff; border: 2px solid #cc9933;"><a href="index.php" id="glowna">
  6.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;" alt="#" />Strona główna
  7.             </a></li>
  8.             <li style="display:block;background-color:#ffffff; border: 2px solid #cc9933;"><a href="index.php" id="nastepna">
  9.                     <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;" alt="#" />Strona główna
  10.             </a></li>
  11.         </ul>
  12. </div>
[HTML] pobierz, plaintext
Lion_87
31.12.2008, 13:06:59
a margin, padding??

[HTML] pobierz, plaintext 
  1. <style>
  2. ul, ul li {
  3. 	display: block;
  4. 	list-style: none;
  5. 	margin: 0;
  6. 	padding: 0;
  7. }
  8. </style>
  9.  
  10. <div style="width:190px; background:red;">
  11. <span class="le"></span>
  12. <span class="sr">
  13. <p style="margin-top:2px">&raquo; Menu</p>
  14. </span>
  15. <span class="pr">&nbsp;</span>
  16.  
  17. <div style="width:190px; height:50px;">
  18.  
  19. <ul id="sidelinks" class="arrowlistmenu" >
  20. <li><a href="index.php" id="glowna">
  21. <img src="http://forum.php.pl/style_emoticons/default/biggrin.gif" style="border:0; width:20px; height:20px;">Strona główna
  22. </a></li>
  23. </ul>
  24.  
  25. <span class="le_d"></span>
  26. <span class="sr_d"></span>
  27. <span class="pr_d"></span>
  28. </div>
  29. </div>
[HTML] pobierz, plaintext
piotrooo89
31.12.2008, 13:08:50
ja wyskrobałem coś takiego:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. ul
  3. {
  4. 	list-style: none;
  5. 	display: inline;
  6. }
  7. li
  8. {
  9. 	display: block;
  10. }
  11. </style>
  12. Menu
  13. <ul>
  14. 	<li>Memu1</li>
  15. 	<li>Memu1</li>
  16. </ul>
[HTML] pobierz, plaintext
Lejto
31.12.2008, 13:16:18
@Rudi1204, działa ale
powstała przerwa przez display:inline;

zobacze jeszcze twoje @piotrooo89 i @Lion_87
piotrooo89
31.12.2008, 13:18:43
pokaż jak to robisz... kod.
Lejto
31.12.2008, 13:28:01
całość + Rudi1204
[HTML] pobierz, plaintext 
  1. <style>
  2. .le{background: url('images/lewo.gif');background-repeat: no-repeat;width: 15px;height: 23px;float: left;}
  3. .sr{background: url('images/srodek.gif'); background-repeat:repeat; width:160px; height:23px; float:left;}
  4. .sr{font-size:12px; font-weight:bold; vertical-align:bottom;}
  5. .pr{background: url('images/prawo.gif'); background-repeat: no-repeat; width:15px; height:23px; float: right;}
  6.  
  7.  
  8. .le_d{background: url('images/border-l.gif');background-repeat: no-repeat; width: 12px; height: 10px;float: left;}
  9. .sr_d{background-image : url('images/border-c.gif');background-repeat:repeat; height:10px; width:163px; float: left;}
  10. .pr_d{background-image : url('images/border-r.gif');background-repeat: no-repeat; width:15px; height:23px; float: right;}
  11.  
  12. </style>
  13.  
  14. <div style="width:190px;">
  15. 	<span class="le"></span> 
  16. 	<span class="sr"> <p style="margin-top:2px">&raquo; Menu </p></span>
  17. 	<span class="pr">&nbsp;</span>  
  18.  
  19.  
  20. <ul style="margin:0; display:inline; list-style:none;" id="sidelinks" class="arrowlistmenu" >
  21. 	    	<li><a href="index.php" id="glowna"><img src="images/arrowbullet.png" border="0">Strona główna</a> </li>
  22. 	    	 <li><a href='?co=ksiegaw' id="ksiega"><img src="images/arrowbullet.png" border="0">  Księga gości</a>   </li>
  23.  
  24. </ul>
  25.      <span class="le_d"></span>
  26. 	<span class="sr_d"></span>
  27. 	<span class="pr_d"></span>
  28. </div>
[HTML] pobierz, plaintext
kazag
31.12.2008, 13:47:09
aaa widzisz, a daj linkom w <li> margin-left:0px;
miałem ten sam problem.

btw. list-style:none; daje się do ul czy li?
erix
31.12.2008, 14:57:44
Kod
<span class="sr"> <p style="margin-top:2px">&raquo; Menu </p></span>

Daj dla .sr styl overflow: hidden.
Lejto
31.12.2008, 16:08:54
to w końcu co z tego kodu wywalić a co dodać? bo już sam nie wiem margines ustawiłem na 0px....
erix
31.12.2008, 16:50:23
Przecież podałem, co zmienić, aby nie robiło przerwy.
Lejto
31.12.2008, 17:07:29
nic nie pomogło
erix
31.12.2008, 17:22:23
Pokaż, co zmieniłeś.
Lejto
2.01.2009, 10:49:42
mam tak:
[HTML] pobierz, plaintext 
  1. <style>
  2. .le{background: url('images/lewo.gif');background-repeat: no-repeat;width: 15px;height: 23px;float: left;overflow:hidden;}
  3. .sr{background: url('images/srodek.gif'); background-repeat:repeat;overflow:hidden; width:160px; height:23px; float:left;overflow:hidden;}
  4. .sr{font-size:12px; font-weight:bold; vertical-align:bottom; overflow:hidden;}
  5. .pr{background: url('images/prawo.gif'); background-repeat: no-repeat; width:15px; height:23px; float: right;overflow:hidden;}
  6.  
  7.  
  8. .le_d{background: url('images/border-l.gif');background-repeat: no-repeat; width: 12px; height: 10px;float: left;}
  9. .sr_d{background-image : url('images/border-c.gif');background-repeat:repeat; height:10px; width:163px; float: left;}
  10. .pr_d{background-image : url('images/border-r.gif');background-repeat: no-repeat; width:15px; height:23px; float: right;}
  11.  
  12. </style>
  13.  
  14.  
  15. <div style="width:190px;">
  16. 	<span class="le"></span> 
  17. 	<span class="sr"> <p style="margin-top:2px">&raquo; Menu </p></span>
  18. 	<span class="pr">&nbsp;</span>  
  19.  
  20.  
  21. <ul style="margin-left:0px;  display: inline; list-style:none;" id="sidelinks" class="arrowlistmenu" >
  22. 	    	<li><a href="index.php" id="glowna"><img src="images/arrowbullet.png" border="0">Strona główna</a> </li>
  23. 	    	 <li><a href='?co=ksiegaw' id="ksiega"><img src="images/arrowbullet.png" border="0">  Księga gości</a>   </li>
  24.  
  25. </ul>
  26.      <span class="le_d"></span>
  27. 	<span class="sr_d"></span>
  28. 	<span class="pr_d"></span>
  29. </div>
[HTML] pobierz, plaintext

wszystko jest ok tylko są te odstępy jak pokazałem na screenie
Lion_87
2.01.2009, 11:07:40
daj do stylu <p>
Kod
padding: 0;margin: 0;
Lejto
2.01.2009, 11:11:54
nic nie dało, przecież <p> i jego styl należy do "Menu"
Lion_87
2.01.2009, 11:16:16
to może skasuj w ul styl i daj w <style>
Kod
ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
Lejto
2.01.2009, 11:18:38
działa smile.gif dzięki, wydaje mi się że już tak robiłem, ale tyle z tym mieszałem...
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.