Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Jak zlikidowac przerwe pomniędzy dwoma elementami...
Forum PHP.pl > Forum > Przedszkole
kukix
16.02.2007, 16:52:03
W jakis sposób przerobić styl, żeby znikneła ta przerwa....

Próbowałem na sto sposobów, ale nie moge tego zrobić...


Tutaj jest kod.

P.S. Próbowalem ustawiac parametry "padding" i "margin" na 0.. ale nie pomaga...
tomaszdurka
16.02.2007, 17:28:23
Mała rada. Uporządkuj trochę kod. Zamknięty był tylko ostatni <li> z trzech. Rób wcięcia w HTMLu i naprawdę łatwiej coś znaleźć jak deklaracje CSS jest w kilku liniach.


Jedyne co musisz dodać to margin do <ul>.

[HTML] pobierz, plaintext 
  1. ul {
  2.   margin: 0px;
  3. }
[HTML] pobierz, plaintext


całość:

[HTML] pobierz, plaintext 
  1. <HTML>
  2.   <HEAD>
  3.     <META http-equiv=Content-Type content="text/html; charset=windows-1250">
  4.     <STYLE>
  5.       BODY {
  6.       	BACKGROUND: #fff
  7.       }
  8.       #menu {
  9.       	PADDING-RIGHT: 0px;
  10.         PADDING-LEFT: 0px;
  11.         PADDING-BOTTOM: 0px;
  12.         WIDTH: 180px;
  13.         PADDING-TOP: 0px;
  14.         FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
  15.         FONT-SIZE: 11px;
  16.       }
  17.       UL {
  18.       	PADDING-RIGHT: 0px;
  19.         PADDING-LEFT: 0px;
  20.         BACKGROUND: url(vert.gif) #fff repeat-y;
  21.         PADDING-BOTTOM: 0px;
  22.         MARGIN-LEFT: 16px;
  23.         PADDING-TOP: 0px;
  24.         LIST-STYLE-TYPE: none;
  25.         marign: 0;
  26.       }
  27.       UNKNOWN {
  28.       	MARGIN-TOP: 0px
  29.       }
  30.       LI {
  31.       	BORDER-RIGHT: #fff 1px solid;
  32.         PADDING-RIGHT: 0px;
  33.         BORDER-TOP: #fff 1px solid;
  34.         PADDING-LEFT: 0px;
  35.         BACKGROUND: url(hori.gif) #fff repeat-x 0px 10px;
  36.         PADDING-BOTTOM: 0px;
  37.         MARGIN: 0px 0px 0px 1px;
  38.         BORDER-LEFT: #fff 0px solid;
  39.         PADDING-TOP: 0px;
  40.         BORDER-BOTTOM: #fff 1px solid;
  41.       }
  42.       LI.last {
  43.       	PADDING-RIGHT: 0px;
  44.         PADDING-LEFT: 0px;
  45.         PADDING-BOTTOM: 0px;
  46.         MARGIN: 0px;
  47.         PADDING-TOP: 0px;
  48.         POSITION: relative;
  49.       }
  50.       LI.last A {
  51.       	PADDING-LEFT: 5px;
  52.         MARGIN-LEFT: 15px;
  53.       }
  54.       LI A {
  55.       	DISPLAY: block; 
  56.         PADDING-LEFT: 2px;
  57.         BACKGROUND: #fff; MARGIN-LEFT: 14px;
  58.         COLOR: #000;
  59.         TEXT-DECORATION: none
  60.       }
  61.       LI SPAN {
  62.       	DISPLAY: block;
  63.         BACKGROUND: no-repeat left center;
  64.         MARGIN-LEFT: -5px
  65.       }
  66.       LI.last SPAN {
  67.       	Z-INDEX: 10;
  68.         MARGIN-LEFT: -4px;
  69.         POSITION: relative
  70.       }
  71.       LI.last DIV {
  72.       	MARGIN-TOP: 0px;
  73.         FONT-SIZE: 0px;
  74.         BACKGROUND: url(vert.gif) repeat-y;
  75.         WIDTH: 2px;
  76.         POSITION: absolute;
  77.         TOP: 0px;
  78.         HEIGHT: 10px
  79.       }
  80.       LI A SPAN {
  81.       	DISPLAY: inline;
  82.         BACKGROUND: #fff;
  83.         MARGIN: 0px
  84.       }
  85.       LI A:hover {
  86.       	COLOR: #0000FF;
  87.         TEXT-DECORATION: underline
  88.       }
  89.       LI SPAN.collapsed {
  90.       	BACKGROUND-IMAGE: url(expand.gif);
  91.         CURSOR: pointer
  92.       }
  93.       LI SPAN.expanded {
  94.       	BACKGROUND-IMAGE: url(collapse.gif);
  95.         CURSOR: pointer
  96.       }
  97.       LI SPAN.page {
  98.       	BACKGROUND-IMAGE: url(page2.gif);
  99.         CURSOR: pointer
  100.       }
  101.  
  102.       UL.collapsed {
  103.       	DISPLAY: none
  104.       }
  105.       UL.expanded {
  106.       	DISPLAY: block
  107.       }
  108.       UL UL {
  109.       	PADDING-TOP: 0px;
  110.       }
  111.       ul {
  112.         margin: 0px;
  113.       }
  114.     </STYLE>
  115.     <script type=text/javascript>
  116.  
  117.       function initMenu(){
  118.       	document.getElementById('menu').onclick=collapseExpand;
  119.       }
  120.  
  121.       function collapseExpand(e,x){
  122.       	e=e||event;
  123.       	x = e.srcElement||e.target
  124.  
  125.       	if( !/sp/i.test(x.nodeName)  ) return
  126.  
  127.       	if( /expa/i.test(x.className) )
  128.       		x.className=x.parentNode.getElementsByTagName('ul')[0].className='collapsed'
  129.       	else if( /colla/i.test(x.className) )
  130.       		x.className=x.parentNode.getElementsByTagName('ul')[0].className='expanded'
  131.       }
  132.  
  133.       function addEvent(O,E,F,x){return(x=O.addEventListener)?x(E,F,1):(x=O.attachEvent)?x('on'+E,F):!1}
  134.       addEvent(window,'load',initMenu);
  135.  
  136.     </SCRIPT>
  137.   </HEAD>
  138.   <BODY>
  139.     <DIV id=menu>
  140.       <A href="index.php?d=menu&id_menu=5" target=_parent>
  141.         <SPAN style="FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif; FONT-SIZE: 11px; COLOR: #000; TEXT-DECORATION: none">
  142.           <IMG src="folder.gif" border=0 align=absMiddle align=center>&nbsp;Menu
  143.         </SPAN>
  144.       </A>
  145.       <UL style="MARGIN-LEFT: 4px;">
  146.         <LI>
  147.           <SPAN>
  148.             <A href="java script: if (parent.document.form_temp.dzialanie.value == 'dzialy') { parent.edycja_dzial_div('189'); parent.edycja_dzial('189'); } else { parent.window.location='index.php?d=dzialy&id_dzial_js=189'; } " target="_parent">
  149.               <SPAN>
  150.                 <IMG src="page2.gif" border=0 align=absMiddle>Dzial1
  151.               </SPAN>
  152.             </A>
  153.           </SPAN>
  154.         </li>
  155.         <LI>
  156.           <SPAN >
  157.             <A href="java script: if (parent.document.form_temp.dzialanie.value == 'dzialy') { parent.edycja_dzial_div('190'); parent.edycja_dzial('190'); } else { parent.window.location='index.php?d=dzialy&id_dzial_js=190'; } " target="_parent">
  158.               <SPAN>
  159.                 <IMG src="page2.gif" border=0 align=absMiddle>Dzial2
  160.               </SPAN>
  161.             </A>
  162.           </SPAN>
  163.         </li>
  164.         <LI class=last>
  165.           <SPAN >
  166.             <A href="java script: if (parent.document.form_temp.dzialanie.value == 'dzialy') { parent.edycja_dzial_div('191'); parent.edycja_dzial('191'); } else { parent.window.location='index.php?d=dzialy&id_dzial_js=191'; } " target="_parent">
  167.             <SPAN><IMG src="page2.gif" border=0 align=absMiddle>Dzial3</SPAN>
  168.             </A>
  169.           </SPAN>
  170.         </li>
  171.       </UL>
  172.     </DIV>
  173.   </BODY>
  174. </HTML>
[HTML] pobierz, plaintext
kukix
22.02.2007, 14:41:04
Dzieki wielkie za pomoc..
Pomogło...

Dziwne.. bo w sumie to było już coś takiego... na poczatku css... był parametr margin:0

Kod
UL {
  PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  BACKGROUND: url(vert.gif) #fff repeat-y;
  PADDING-BOTTOM: 0px;
  MARGIN-LEFT: 16px;
  PADDING-TOP: 0px;
  LIST-STYLE-TYPE: none;
  [b]marign: 0;[/b] <= TUTAJ
}


no nie wiem... ważne , że działa... dzieki jeszcze raz...
Kisiol_Ent
22.02.2007, 14:57:37
Nie ma czegoś takiego jak zero!
Zawsze musisz podać jednostkę -> margin: 0px;
Inaczej wszystko zostanie pominięte.
Pozatym o ile mi wiadomo wszystko powinno się pisać w CSS malymi literkami.
Choć nie jestem do końca pewien czy to jest wymóg czy tylko zalecenie.
Bo w XHTML jest to wymóg.
strife
22.02.2007, 16:00:12
Osobiste wycieczki to na PW proszę, a nie na forum publicznym. Poza tym problem został rozwiązany, a ostatnie posty nic nowego do niego nie wnoszą.

Zamykam.



---
chciałem tylko dodać, że całej tej walce, pominięty został fakt, że nie działało, bo tam wcale nie jest margin, a marign.
Ot, i przyczyna winksmiley.jpg

~siemakuba


--

Ostatnie 2 posty zostały usunięte. Obydwa były niezwiązane z tematem! // seaquest
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.