Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]menu nie chce isc na srodek.
Forum PHP.pl > Forum > Przedszkole
gigzorr
  1. #menu0 {display: inline;
  2. list-style: none;
  3. text-align: center;
  4. }
  5.  
  6. dt, dt dd {display: inline;
  7. }
  8.  
  9. dt,dd {float: left;
  10. margin: auto;
  11. text-align: center;
  12. }
  13.  
  14.  
  15. dt,dd a:link, a:visited {text-decoration: none;
  16. display: inline;
  17. text-align: center;
  18. color: white;
  19. width: 100px;
  20. font-family: Arial;
  21. font-size: 14px;
  22. position: relative;
  23. top: 8px;
  24. }


  1. <dl id="menu0">
  2. <dt>Start</dt>
  3. <dd>Element 1.1</dd>
  4. <dd>Element 1.2</dd>
  5. <dd>Element 1.3</dd>
  6. <dt>Znajmowi</dt>
  7. <dd>Element 2.1</dd>
  8. <dd>Element 2.2</dd>
  9. <dd>Element 2.3</dd>
  10. <dt>idk</dt>
  11. <dd>Element 3.1</dd>
  12. <dd>Element 3.2</dd>
  13. <dd>Element 3.3</dd>
  14. </dl>


Wiem , ze przez ta linijke nie chce isc to pewne:
  1. dt,dd {float: left;
  2. margin: auto;
  3. text-align: center;
  4. }


Ale bez float: left; , calkiem sie rozchodzi menu , a to bedzie rozwijane , wiem , ze jak dam position: absolute to przejdzie , ale za to
atrybut
Kod
width:
nie dziala , i sa problemy pozniej.
Jak to rozwiazac?Dodam , ze text-aligny ,marginesy nie pomagaja.Tzn moge dac margin-left: i przejdzie , ale to jest model % , wiec zawsze ma byc na srodku przy kazdej rozdzielczosci.
smagul
weź to wrzuć w div i przypisz divce margin: 0 auto;
gigzorr
Probowalem z tym , do menu0 przypisywalem i nic do innych zreszta tez;p
wookieb
1) Lepiej podać link niż kod.
2) Pokaż co chcesz uzyskać bo jak to wkleiłem to otrzymałem mały burdel.
gigzorr
Cytat(wookieb @ 29.06.2010, 11:20:42 ) *
1) Lepiej podać link niż kod.
2) Pokaż co chcesz uzyskać bo jak to wkleiłem to otrzymałem mały burdel.


Mały burdel otrzymales bo js odpowiadajacego za menu nie masz ;p
Podalbym link ale niestety nie moge z prostych przyczyn smile.gif
A co chce uzyskac?Menu jest po lewo , chce zeby bylo na srodku , czyli text-align: center; , ale nie da rady tego zrobic.
Na to position relative tez nie patrzcie bo to nie jest potrzebne.
Poprostu text-aligny wogole nie reaguje , niby tam mam center w kodzie ale i tak po lewo jest , bo jest to float: left; , ale bez tego nie da rady.
wookieb
Pokaż graficznie co chcesz uzyskać. Bo ja teraz nie wiem czy to jest menu rozwijane, czy jakie bo kombinacji jest mnóstwo.
gigzorr
Cytat(wookieb @ 29.06.2010, 11:25:45 ) *
Pokaż graficznie co chcesz uzyskać. Bo ja teraz nie wiem czy to jest menu rozwijane, czy jakie bo kombinacji jest mnóstwo.




Menu rozwijane , narysuje ci tutaj biggrin.gif


Start Start Start

i jak klikne sie rozwija ok jest dobrze , ale to ma byc na srodku strony zawsze , czyli text-align: center. ok tak zrobilem , wywalilem float: left; ,ale atrybut width nie dziala i wogole odstepu nie maja miedzy soba.
  1. /* MENU ROZWIJANE */
  2.  
  3. #menu0 {display: inline;
  4. list-style: none;
  5. text-align: center;
  6. margin: 0 auto;
  7.  
  8.  
  9. }
  10.  
  11. dt, dt dd {display: inline;
  12. }
  13.  
  14. dt,dd {margin: 0 auto;
  15. text-align: center;
  16.  
  17. }
  18.  
  19.  
  20. dt,dd a:link, a:visited {text-decoration: none;
  21. display: inline;
  22. text-align: center;
  23. color: white;
  24. width: 200px;
  25. font-family: Arial;
  26. font-size: 14px;
  27. margin-top: 10px;
  28. }


Tak wyglada dzialajace , tzn wysrodkowane , ale width nie dziala.Niby moge dac marginesy po dwoch stronach , ale na innych rozdzielczosciach bedzie w innym miejscu.
wookieb
Takie bardzo na szybko wyśrodkowane menu
  1. <style type="text/css">
  2. #menu
  3. {
  4. text-align: center;
  5. width: 500px;
  6. }
  7. #menu li
  8. {
  9. display: inline-block;
  10. position: relative;
  11. }
  12. #menu li:hover ul
  13. {
  14. display: block;
  15. }
  16. #menu li ul
  17. {
  18. display: none;
  19. position: absolute;
  20. top: 20px;
  21. left: 0;
  22. }
  23. </head>
  24. <ul id="menu">
  25. <li>Start
  26. <ul>
  27. <li>submenu</li>
  28. <li>submenu</li>
  29. <li>submenu</li>
  30. </ul>
  31. </li>
  32. <li>Start
  33. <ul>
  34. <li>submenu</li>
  35. <li>submenu</li>
  36. <li>submenu</li>
  37. </ul>
  38. </li>
  39. <li>Start
  40. <ul>
  41. <li>submenu</li>
  42. <li>submenu</li>
  43. <li>submenu</li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </body>
  48. </html>

Trick polega na wywaleniu float. Zastosowanie display: inline-block; i text-align: center dla rodzica.
gigzorr
dziala , dziekuje smile.gif

Jeszcze jeden problem mam jak klikne na cos z menu to jakos dziwnie sa porozmieszczane , a chce zeby to co z np. znajmowi ma sie pod tym rozwijac te elementy , a widac jak jest.

A jak narazie to jest taki efekt:

A tutaj po kliknieciu w idk(tutaj widac , ze wogole pojawia sie nie nad idk tylko nad znajomwi lista).



Kod teraz wyglada tak:
  1. /* MENU ROZWIJANE */
  2.  
  3. #menu0 {margin: auto;
  4. text-align: center;
  5. }
  6.  
  7. #menu0 dt {display: inline-block;
  8. }
  9.  
  10. dt, dt dd {display: inline-block;
  11. position: relative;
  12. }
  13.  
  14. dt,dd {margin: 0 auto;
  15. }
  16.  
  17. #menu0 dd {text-align: center;
  18. color: white;
  19. font-family: Arial;
  20. font-size: 12px;
  21. display: block;
  22. width: 500px;
  23. height: 20px;
  24. }
  25.  
  26. .xx:hover {color: red;}
  27.  
  28.  
  29. dt,dd a:link, a:visited {text-decoration: none;
  30. display: inline;
  31. text-align: center;
  32. color: white;
  33. width: 120px;
  34. font-family: Arial;
  35. font-size: 14px;
  36. margin-top: 10px;
  37.  
  38. }
wookieb
A mnie się w ogóle nie wyświetla i nawet nie chce mi Się szukać dlaczego bo powinieneś podać linka, pod którym moglibyśmy to wszystko zobaczyć.
gigzorr
Cytat(wookieb @ 29.06.2010, 11:56:29 ) *
A mnie się w ogóle nie wyświetla i nawet nie chce mi Się szukać dlaczego bo powinieneś podać linka, pod którym moglibyśmy to wszystko zobaczyć.


  1. <dl id="menu0">
  2. <dt class="xx">Start</dt>
  3. <dd>Element 1.1</dd>
  4. <dd>Element 1.2</dd>
  5. <dd>Element 1.3</dd>
  6. <dt class="xx">Znajmowi</dt>
  7. <dd>Element 2.1</dd>
  8. <dd>Element 2.2</dd>
  9. <dd>Element 2.3</dd>
  10. <dt class="xx">idk</dt>
  11. <dd>Element 3.1</dd>
  12. <dd>Element 3.2</dd>
  13. <dd>Element 3.3</dd>
  14. </dl>
  15. <script type="text/javascript">
  16. // <![CDATA[
  17. new Menu('menu0');
  18. // ]]>


sekcja head:

  1. <script type="text/javascript" src="menu.js"></script>


menu.js

  1.  
  2. /**
  3.  * @author S�awomir Kok�owski {@link <a href="http://www.kurshtml.boo.pl}" target="_blank">http://www.kurshtml.boo.pl}</a>
  4.  * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
  5.  */
  6.  
  7. function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
  8. {
  9. if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
  10. if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
  11. if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
  12. if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
  13.  
  14. var url = unescape(window.location.href.replace(/#.*/, ''));
  15. var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
  16.  
  17. if (style)
  18. {
  19. if (style.indexOf(':') < 0)
  20. {
  21. document.getElementById(id).className += ' ' + style;
  22. }
  23. else
  24. {
  25. style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
  26. for (var i = 0; i < style.length; i++)
  27. {
  28. style[i] = style[i].split(/\s*:\s*/);
  29. for (var j = 0, c, property = ''; j < style[i][0].length; j++)
  30. {
  31. c = style[i][0].charAt(j);
  32. property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
  33. }
  34. eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
  35. }
  36. }
  37. }
  38.  
  39. for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
  40. {
  41. var dd = new Array();
  42. var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
  43. var nodeName;
  44. while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
  45. {
  46. if (nodeName == 'dd')
  47. {
  48. el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
  49. if (otworz)
  50. {
  51. el.onmouseover = function()
  52. {
  53. clearTimeout(this._dt._timoutID);
  54. this._dt._displayed = false;
  55. this._dt.onclick();
  56. }
  57. el.onmouseout = function()
  58. {
  59. clearTimeout(this._dt._timoutID);
  60. var dt = this._dt;
  61. this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  62. };
  63. }
  64. dd[dd.length] = el;
  65. }
  66. el = el.nextSibling;
  67. }
  68. document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
  69. document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
  70. document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
  71. document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
  72. {
  73. clearTimeout(this._timoutID);
  74. if (!this._displayed)
  75. {
  76. var el = this.parentNode.getElementsByTagName('dt')[0];
  77. while (el)
  78. {
  79. if (el.nodeName.toLowerCase() == 'dt' && el != this)
  80. {
  81. el._displayed = false;
  82. if (czasZwin) display(el, 0);
  83. else display(el);
  84. }
  85. el = el.nextSibling;
  86. }
  87. }
  88. this._displayed = !this._displayed;
  89. if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
  90. else display(this);
  91. };
  92. if (otworz)
  93. {
  94. document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
  95. {
  96. clearTimeout(this._timoutID);
  97. var dt = this;
  98. this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
  99. };
  100. document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
  101. {
  102. clearTimeout(this._timoutID);
  103. var dt = this;
  104. this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  105. };
  106. }
  107. }
  108.  
  109. start(document.getElementById(id).getElementsByTagName('dt')[0]);
  110.  
  111. function start(dt)
  112. {
  113. var hide = true;
  114. var el = dt;
  115. while (el)
  116. {
  117. var nodeName = el.nodeName.toLowerCase();
  118. if (nodeName == 'dt')
  119. {
  120. dt = el;
  121. hide = true;
  122. }
  123. if (nodeName == 'dt' || nodeName == 'dd')
  124. {
  125. if (!nieInicjalizuj && el.getElementsByTagName('a').length)
  126. {
  127. var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
  128. if (!active)
  129. {
  130. var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
  131. if (rel)
  132. {
  133. var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
  134. if (matches)
  135. {
  136. matches = matches[1].split(',');
  137. for (var k = 0, pos = -1; k < matches.length; k++)
  138. {
  139. if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
  140. {
  141. if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
  142. {
  143. active = true;
  144. break;
  145. }
  146. }
  147. else
  148. {
  149. if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
  150. else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
  151. if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
  152. {
  153. active = true;
  154. break;
  155. }
  156. }
  157. }
  158. }
  159. }
  160. }
  161. if (active)
  162. {
  163. el.className = (el.className ? el.className + ' ' : '') + 'active';
  164. dt._displayed = true;
  165. display(dt);
  166. hide = false;
  167. var el_parentNode = el.parentNode;
  168. while (el_parentNode != document.getElementById(id))
  169. {
  170. if (el_parentNode.nodeName.toLowerCase() == 'dd')
  171. {
  172. var el_sibling = el_parentNode.previousSibling;
  173. while (el_sibling)
  174. {
  175. if (el_sibling.nodeName.toLowerCase() == 'dt')
  176. {
  177. el_sibling._displayed = true;
  178. display(el_sibling)
  179. break;
  180. }
  181. el_sibling = el_sibling.previousSibling;
  182. }
  183. }
  184. el_parentNode = el_parentNode.parentNode;
  185. }
  186. }
  187. }
  188. }
  189. if (nodeName == 'dd')
  190. {
  191. if (hide) el.style.display = 'none';
  192. start(el.getElementsByTagName('dt')[0]);
  193. }
  194. el = el.nextSibling;
  195. }
  196. }
  197.  
  198. function display(dt, i)
  199. {
  200. if (typeof i == 'undefined')
  201. {
  202. for (var i = 0; i < dt._dd.length; i++)
  203. {
  204. dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
  205. if (!dt._displayed)
  206. {
  207. for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
  208. {
  209. dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
  210. display(dt._dd[i].getElementsByTagName('dt')[j]);
  211. }
  212. }
  213. }
  214. }
  215. else if (i < dt._dd.length)
  216. {
  217. var dir = wysun ? !dt._displayed : dt._displayed;
  218. var n = dir ? i : dt._dd.length - 1 - i;
  219. dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
  220. if (!dt._displayed)
  221. {
  222. for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
  223. {
  224. dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
  225. display(dt._dd[n].getElementsByTagName('dt')[j]);
  226. }
  227. }
  228. dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
  229. }
  230. }
  231. }
wookieb
Wiesz dlaczego zrobiłem to menu na listach (choć nie muszą to być listy)? Ponieważ automatycznie pozycjonuje mi elementy w określonych miejscach dzięki trickowi z relative + absolute. Dodatkowo menu działa bez JS (chyba tylko w ie6 nie działa).
A ty teraz praktycznie musisz dać elementom dd position: absolute (albo relative) i ustalic pozycje dla każdego oddzielnie ( i szczerze mówiąc to nie wiem czy da się zrobić inaczej bo skrypt jest za duży i szkoda mi czasu na jego analizę)
Tak to jest gdy bezmyślnie kopiuje się rozwiązania z sieci i chce je dostosować do własnych potrzeb.

Dodatkowo nie widziałem menu, ponieważ moja strona ma białe tło a nie czarne, dlatego nie widziałem białego tekstu. Dlatego TAK WAŻNE I UŁATWIAJĄCE ŻYCIE jest podawanie linku.
gigzorr
Rzeczywiscie , twoje rozwiazanie jest w 1000% lepsze , dziala jak nalezy , jeszcze raz dziekuje +pomogl x2 smile.gif

Ty ale jak klikne w cos to sie wysuwa jest ok , ale znika jakos dziwnie i w nic nie idzie kilknac z listy rozwinietej hm?
Za szybko znika , jak chce cos z rozwinietej listy kliknac to mi sie chowa .


/edit fixed , atrybutu height brakowalo.
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.