Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Dolne menu z obrazkami
Forum PHP.pl > Forum > Przedszkole
kuba_pilach
Witam, mam taki pewien, niby banalny problem...
Mam w pliku funkcje_wyswietl.php linki i chcę, by za ich tła służyły obrazek z images/button.gif
No i to definiuję w pliku view.css
I teraz mam dziwny problem, by wyśrodkować je sad.gif
Kody:
funkcje_wyswietl.php
  1.  
  2. <?php
  3.  
  4.  
  5. function wyswietl_menu_uzyt() {
  6. // wyswietlenie menu opcji na stronie
  7. ?>
  8. <div><img id="top" src="images/top.png" alt=""></div>
  9. <a href="glowna.php"><div id="button">Home</div></a>
  10. <a href="zmiana-danych.php"><div id="button">Zmiana danych</div></a>
  11. <a href="index.php?wylogowanie=tak"><div id="button">Wylogowanie</div></a></div><br />
  12. <div><img id="top" src="images/top.png" alt=""></div>
  13. <?php
  14. }
  15.  
  16. ?>


view.css
  1.  
  2. body
  3. {
  4. background:#fffff;
  5. font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  6. font-size:small;
  7. margin:8px 0 16px;
  8. text-align:center;
  9. }
  10.  
  11. #button {float:left;display:block;background:url("images/button.gif") no-repeat center top; text-align:center; width:110px; height:17px; padding-top:2px}
  12.  
  13.  
  14. #form_container
  15. {
  16. background:#fff;
  17. border:1px solid #ccc;
  18. margin:0 auto;
  19. text-align:left;
  20. width:640px;
  21. }
  22.  
  23. #top
  24. {
  25. display:block;
  26. height:10px;
  27. margin:10px auto 0;
  28. width:650px;
  29. }
  30.  
  31. #footer
  32. {
  33. width:640px;
  34. clear:both;
  35. color:#999999;
  36. text-align:center;
  37. width:640px;
  38. padding-bottom: 15px;
  39. font-size: 85%;
  40. }
  41.  
  42. #footer a{
  43. color:#999999;
  44. text-decoration: none;
  45. border-bottom: 1px dotted #999999;
  46. }
  47.  
  48. #bottom
  49. {
  50. display:block;
  51. height:10px;
  52. margin:0 auto;
  53. width:650px;
  54. }
  55.  
  56. form.appnitro
  57. {
  58. margin:20px 20px 0;
  59. padding:0 0 20px;
  60. }
  61.  
  62. /**** Logo Section *****/
  63. h1
  64. {
  65.  
  66. margin:0;
  67. min-height:0;
  68. padding:0;
  69. text-decoration:none;
  70. text-indent:-8000px;
  71.  
  72. }
  73.  
  74. h1 a
  75. {
  76.  
  77. display:block;
  78. height:100%;
  79. min-height:40px;
  80. overflow:hidden;
  81. }
  82.  
  83.  
  84. img
  85. {
  86. behavior:url(css/iepngfix.htc);
  87. border:none;
  88. }
  89.  
  90.  
  91. /**** Form Section ****/
  92. .appnitro
  93. {
  94. font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
  95. font-size:small;
  96. }
  97.  
  98. .appnitro li
  99. {
  100. width:61%;
  101. }
  102.  
  103. form ul
  104. {
  105. font-size:100%;
  106. list-style-type:none;
  107. margin:0;
  108. padding:0;
  109. width:100%;
  110. }
  111.  
  112. form li
  113. {
  114. display:block;
  115. margin:0;
  116. padding:4px 5px 2px 9px;
  117. position:relative;
  118. }
  119.  
  120. form li:after
  121. {
  122. clear:both;
  123. content:".";
  124. display:block;
  125. height:0;
  126. visibility:hidden;
  127. }
  128.  
  129. .buttons:after
  130. {
  131. clear:both;
  132. content:".";
  133. display:block;
  134. height:0;
  135. visibility:hidden;
  136. }
  137.  
  138. .buttons
  139. {
  140. clear:both;
  141. display:block;
  142. margin-top:10px;
  143. }
  144.  
  145. * html form li
  146. {
  147. height:1%;
  148.  
  149. }
  150.  
  151. * html .buttons
  152. {
  153. height:1%;
  154. }
  155.  
  156. * html form li div
  157. {
  158. display:inline-block;
  159. }
  160.  
  161. form li div
  162. {
  163. color:#444;
  164. margin:0 4px 0 0;
  165. padding:0 0 8px;
  166. }
  167.  
  168. form li span
  169. {
  170. color:#444;
  171. float:left;
  172. margin:0 4px 0 0;
  173. padding:0 0 8px;
  174. }
  175.  
  176. form li div.left
  177. {
  178. display:inline;
  179. float:left;
  180. width:48%;
  181. }
  182.  
  183. form li div.right
  184. {
  185. display:inline;
  186. float:right;
  187. width:48%;
  188. }
  189.  
  190. form li div.left .medium
  191. {
  192. width:100%;
  193. }
  194.  
  195. form li div.right .medium
  196. {
  197. width:100%;
  198. }
  199.  
  200. .clear
  201. {
  202. clear:both;
  203. }
  204.  
  205. form li div label
  206. {
  207. clear:both;
  208. color:#444;
  209. display:block;
  210. font-size:9px;
  211. line-height:9px;
  212. margin:0;
  213. padding-top:3px;
  214. }
  215.  
  216. form li span label
  217. {
  218. clear:both;
  219. color:#444;
  220. display:block;
  221. font-size:9px;
  222. line-height:9px;
  223. margin:0;
  224. padding-top:3px;
  225. }
  226.  
  227. form li .datepicker
  228. {
  229. cursor:pointer !important;
  230. float:left;
  231. height:16px;
  232. margin:.1em 5px 0 0;
  233. padding:0;
  234. width:16px;
  235. }
  236.  
  237. .form_description
  238. {
  239. border-bottom:1px dotted #ccc;
  240. clear:both;
  241. display:inline-block;
  242. margin:0 0 1em;
  243. }
  244.  
  245. .form_description[class]
  246. {
  247. display:block;
  248. }
  249.  
  250. .form_description h2
  251. {
  252. clear:left;
  253. font-size:160%;
  254. font-weight:400;
  255. margin:0 0 3px;
  256. }
  257.  
  258. .form_description p
  259. {
  260. font-size:95%;
  261. line-height:130%;
  262. margin:0 0 12px;
  263. }
  264.  
  265. form hr
  266. {
  267. display:none;
  268. }
  269.  
  270. form li.section_break
  271. {
  272. border-top:1px dotted #ccc;
  273. margin-top:9px;
  274. padding-bottom:0;
  275. padding-left:9px;
  276. padding-top:13px;
  277. width:97% !important;
  278. }
  279.  
  280. form ul li.first
  281. {
  282. border-top:none !important;
  283. margin-top:0 !important;
  284. padding-top:0 !important;
  285. }
  286.  
  287. form .section_break h3
  288. {
  289. font-size:110%;
  290. font-weight:400;
  291. line-height:130%;
  292. margin:0 0 2px;
  293. }
  294.  
  295. form .section_break p
  296. {
  297. font-size:85%;
  298.  
  299. margin:0 0 10px;
  300. }
  301.  
  302. /**** Buttons ****/
  303. input.button_text
  304. {
  305. overflow:visible;
  306. padding:0 7px;
  307. width:auto;
  308. }
  309.  
  310. .buttons input
  311. {
  312. font-size:120%;
  313. margin-right:5px;
  314. }
  315.  
  316. /**** Inputs and Labels ****/
  317. label.description
  318. {
  319. border:none;
  320. color:#222;
  321. display:block;
  322. font-size:95%;
  323. font-weight:700;
  324. line-height:150%;
  325. padding:0 0 1px;
  326. }
  327.  
  328. span.symbol
  329. {
  330. font-size:115%;
  331. line-height:130%;
  332. }
  333.  
  334. input.text
  335. {
  336. background:#fff url(../../../images/shadow.gif) repeat-x top;
  337. border-bottom:1px solid #ddd;
  338. border-left:1px solid #c3c3c3;
  339. border-right:1px solid #c3c3c3;
  340. border-top:1px solid #7c7c7c;
  341. color:#333;
  342. font-size:100%;
  343. margin:0;
  344. padding:2px 0;
  345. }
  346.  
  347. input.file
  348. {
  349. color:#333;
  350. font-size:100%;
  351. margin:0;
  352. padding:2px 0;
  353. }
  354.  
  355. textarea.textarea
  356. {
  357. background:#fff url(../../../images/shadow.gif) repeat-x top;
  358. border-bottom:1px solid #ddd;
  359. border-left:1px solid #c3c3c3;
  360. border-right:1px solid #c3c3c3;
  361. border-top:1px solid #7c7c7c;
  362. color:#333;
  363. font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  364. font-size:100%;
  365. margin:0;
  366. width:99%;
  367. }
  368.  
  369. select.select
  370. {
  371. color:#333;
  372. font-size:100%;
  373. margin:1px 0;
  374. padding:1px 0 0;
  375. background:#fff url(../../../images/shadow.gif) repeat-x top;
  376. border-bottom:1px solid #ddd;
  377. border-left:1px solid #c3c3c3;
  378. border-right:1px solid #c3c3c3;
  379. border-top:1px solid #7c7c7c;
  380. }
  381.  
  382.  
  383. input.currency
  384. {
  385. text-align:right;
  386. }
  387.  
  388. input.checkbox
  389. {
  390. display:block;
  391. height:13px;
  392. line-height:1.4em;
  393. margin:6px 0 0 3px;
  394. width:13px;
  395. }
  396.  
  397. input.radio
  398. {
  399. display:block;
  400. height:13px;
  401. line-height:1.4em;
  402. margin:6px 0 0 3px;
  403. width:13px;
  404. }
  405.  
  406. label.choice
  407. {
  408. color:#444;
  409. display:block;
  410. font-size:100%;
  411. line-height:1.4em;
  412. margin:-1.55em 0 0 25px;
  413. padding:4px 0 5px;
  414. width:90%;
  415. }
  416.  
  417. select.select[class]
  418. {
  419. margin:0;
  420. padding:1px 0;
  421. }
  422.  
  423. *:first-child+html select.select[class]
  424. {
  425. margin:1px 0;
  426. }
  427.  
  428. .safari select.select
  429. {
  430. font-size:120% !important;
  431. margin-bottom:1px;
  432. }
  433.  
  434. input.small
  435. {
  436. width:25%;
  437. }
  438.  
  439. select.small
  440. {
  441. width:25%;
  442. }
  443.  
  444. input.medium
  445. {
  446. width:50%;
  447. }
  448.  
  449. select.medium
  450. {
  451. width:50%;
  452. }
  453.  
  454. input.large
  455. {
  456. width:99%;
  457. }
  458.  
  459. select.large
  460. {
  461. width:100%;
  462. }
  463.  
  464. textarea.small
  465. {
  466. height:5.5em;
  467. }
  468.  
  469. textarea.medium
  470. {
  471. height:10em;
  472. }
  473.  
  474. textarea.large
  475. {
  476. height:20em;
  477. }
  478.  
  479. /**** Errors ****/
  480. #error_message
  481. {
  482. background:#fff;
  483. border:1px dotted red;
  484. margin-bottom:1em;
  485. padding-left:0;
  486. padding-right:0;
  487. padding-top:4px;
  488. text-align:center;
  489. width:99%;
  490. }
  491.  
  492. #error_message_title
  493. {
  494. color:#DF0000;
  495. font-size:125%;
  496. margin:7px 0 5px;
  497. padding:0;
  498. }
  499.  
  500. #error_message_desc
  501. {
  502. color:#000;
  503. font-size:100%;
  504. margin:0 0 .8em;
  505. }
  506.  
  507. #error_message_desc strong
  508. {
  509. background-color:#FFDFDF;
  510. color:red;
  511. padding:2px 3px;
  512. }
  513.  
  514. form li.error
  515. {
  516. background-color:#FFDFDF !important;
  517. border-bottom:1px solid #EACBCC;
  518. border-right:1px solid #EACBCC;
  519. margin:3px 0;
  520. }
  521.  
  522. form li.error label
  523. {
  524. color:#DF0000 !important;
  525. }
  526.  
  527. form p.error
  528. {
  529. clear:both;
  530. color:red;
  531. font-size:10px;
  532. font-weight:700;
  533. margin:0 0 5px;
  534. }
  535.  
  536. form .required
  537. {
  538. color:red;
  539. float:none;
  540. font-weight:700;
  541. }
  542.  
  543. /**** Guidelines and Error Highlight ****/
  544. form li.highlighted
  545. {
  546. background-color:#fff7c0;
  547. }
  548.  
  549. form .guidelines
  550. {
  551. background:#f5f5f5;
  552. border:1px solid #e6e6e6;
  553. color:#444;
  554. font-size:80%;
  555. left:100%;
  556. line-height:130%;
  557. margin:0 0 0 8px;
  558. padding:8px 10px 9px;
  559. position:absolute;
  560. top:0;
  561. visibility:hidden;
  562. width:42%;
  563. z-index:1000;
  564. }
  565.  
  566. form .guidelines small
  567. {
  568. font-size:105%;
  569. }
  570.  
  571. form li.highlighted .guidelines
  572. {
  573. visibility:visible;
  574. }
  575.  
  576. form li:hover .guidelines
  577. {
  578. visibility:visible;
  579. }
  580.  
  581. .no_guidelines .guidelines
  582. {
  583. display:none !important;
  584. }
  585.  
  586. .no_guidelines form li
  587. {
  588. width:97%;
  589. }
  590.  
  591. .no_guidelines li.section
  592. {
  593. padding-left:9px;
  594. }
  595.  
  596. /*** Success Message ****/
  597. .form_success
  598. {
  599. clear: both;
  600. margin: 0;
  601. padding: 90px 0pt 100px;
  602. text-align: center
  603. }
  604.  
  605. .form_success h2 {
  606. clear:left;
  607. font-size:160%;
  608. font-weight:normal;
  609. margin:0pt 0pt 3px;
  610. }
  611.  
  612. /*** Password ****/
  613. ul.password{
  614. margin-top:60px;
  615. margin-bottom: 60px;
  616. text-align: center;
  617. }
  618. .password h2{
  619. color:#DF0000;
  620. font-weight:bold;
  621. margin:0pt auto 10px;
  622. }
  623.  
  624. .password input.text {
  625. font-size:170% !important;
  626. width:380px;
  627. text-align: center;
  628. }
  629. .password label{
  630. display:block;
  631. font-size:120% !important;
  632. padding-top:10px;
  633. font-weight:bold;
  634. }
  635.  
  636. #li_captcha{
  637. padding-left: 5px;
  638. }
  639.  
  640.  
  641. #li_captcha span{
  642. float:none;
  643. }
  644.  
  645. /** Embedded Form **/
  646.  
  647. .embed #form_container{
  648. border: none;
  649. }
  650.  
  651. .embed #top, .embed #bottom, .embed h1{
  652. display: none;
  653. }
  654.  
  655. .embed #form_container{
  656. width: 100%;
  657. }
  658.  
  659. .embed #footer{
  660. text-align: left;
  661. padding-left: 10px;
  662. width: 99%;
  663. }
  664.  
  665. .embed #footer.success{
  666. text-align: center;
  667. }
  668.  
  669. .embed form.appnitro
  670. {
  671. margin:0px 0px 0;
  672.  
  673. }
  674.  

Bardzo proszę o natychmiastową pomoc i dzięki z góry
prowseed
Po co wrzucasz kod ktory ma 700 linijek? Watpie by ktos sie pokusil o sprawdzanie ich wszystkich. Proponuje, bys zalaczyl kod ktory bezposrednio dotyczy tego problemu.

Obrazkiem w css sterujesz za pomoca background-position
nekomata
Po 1. 3 Divy maja takie samo ID , tak się nie robi, używaj klas.
Po 2. Div'a wycentrujesz za pomocą 'margin: 0 auto;"
Po 3. Po co Ci funkcja do textu który zawsze jest taki sam?Poczytaj o include.
Po 4.Tak naprawdę pierwsze 11 linijek ma zastosowanie do twojego kodu , nie wiem więc co tu robi pozostałe 663.
kuba_pilach
Witam, w tym pliku jest więcej funkcji...
Próbowałem do css dodać następujące rzeczy:
margin: 0 auto;
background-position: center;

Nic z tych rzeczy nie dało rezultatu...
A dałem cały plik css (prócz rzeczy dotyczących kalendarza javascript...)
byście mogli zobaczyć, czy jest w tym css coś, co mogłoby przeszkodzić...
Czekam cierpliwie na dalsze sugestie... Dzięki z góy


O.o
Dla porównania daję plik, w którym działa... lecz cały czas nie udało mi się zrobić, by w podanym wcześniej pliku działało:
noweceny_formularz.php
  1. <?php
  2.  
  3. ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  5. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  7. <head>
  8. <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
  9. <link rel="stylesheet" type="text/css" href="view.css" media="all">
  10. <script type="text/javascript" src="view.js"></script>
  11. <script type="text/javascript" src="calendar.js"></script>
  12. <title>Oceny</title>
  13. <script type="text/javascript">
  14. // <![CDATA[
  15. function trim(str) {
  16. return str.replace(/^\s+/, '').replace(/\s+$/, '');
  17. } // trim
  18.  
  19. function Sprawdz() { // sprawdz oceny
  20. // Czy podano datę1?
  21. var tt = trim(document.getElementsByName("data[1]")[0].value);
  22. if (tt.length == 0) { // pole puste lub same spacje
  23. alert("Podaj datę");
  24. document.getElementsByName("data[1]")[0].focus();
  25. return false;
  26. }
  27. // Czy podano datę2?
  28. var tt = trim(document.getElementsByName("data[2]")[0].value);
  29. if (tt.length == 0) { // pole puste lub same spacje
  30. alert("Podaj datę");
  31. document.getElementsByName("data[2]")[0].focus();
  32. return false;
  33. }
  34. // Czy podano datę3?
  35. var tt = trim(document.getElementsByName("data[3]")[0].value);
  36. if (tt.length == 0) { // pole puste lub same spacje
  37. alert("Podaj datę");
  38. document.getElementsByName("data[3]")[0].focus();
  39. return false;
  40. }
  41. // Czy podano oceny?
  42. tt = trim(document.getElementsByName("oceny")[0].value);
  43. if (tt.length == 0) { // pole puste lub same spacje
  44. alert("Podaj oceny");
  45. document.getElementsByName("oceny")[0].focus();
  46. return false;
  47. }
  48. var tbl = tt.split(","); // podziel oceny na "fragmenty"
  49. // wyrazenie regulowe
  50. var patt = new RegExp("^1[\+]?$|^2[\+-]?$|^[3-5][+-]?$|^6[\-]?$");
  51. var l_oc = 0; // licznik ocen
  52. // petla przetw. ocen
  53. for (n in tbl) {
  54. var el = trim(tbl[n]); // kolejna ocena z tablicy
  55. l_oc++; // zliczaj oceny
  56. if (!patt.test(el)) { // nie pasuje do wzorca
  57. alert("Bledna ocena nr " + l_oc + ": " + el);
  58. document.getElementsByName("oceny")[0].focus();
  59. return false; // blokuj submit
  60. }
  61. }
  62. return true; // OK
  63. } // Sprawdz
  64. // ]]>
  65. </script>
  66. </head>
  67.  
  68. <body id="main_body">
  69. <?php
  70. // dołączenie plików funkcji tej aplikacji
  71. require_once('funkcje_wyswietl.php');
  72. // początek wywietlania HTML
  73. $urldwa = "index.php";
  74. tworz_naglowek_html('Dodawanie nowej/nowych ocen(y)');
  75. if (isset($_SESSION['login'])) { // dostęp dla zalogowanego użytkownika
  76.  
  77. $connection = mysql_connect('localhost', 'kuba', 'ku2010ba')
  78. or die('Brak polaczenia z serwerem MySQL');
  79. $db = mysql_select_db('dzienniczek', $connection)
  80. or die('Nie moge polaczyc sie z baza danych');
  81. ?>
  82. <div id="form_container">
  83. <form method="post" name="frm1" action="noweoceny.php" onsubmit="return Sprawdz();" >
  84. <div>
  85. <?php
  86.  
  87. $zapytanie = mysql_query ("SELECT * FROM Przedmiot ORDER BY ID ASC")
  88. or die('Błąd zapytania: '.mysql_error());
  89.  
  90. echo '<select name="wybranyprzedmiot">';
  91.  
  92. echo '<option value="">Wybierz przedmiot</option>';
  93.  
  94. while($option = mysql_fetch_assoc($zapytanie)) {
  95.  
  96. echo '<option value="'.$option['NAZWA'].'">'.$option['NAZWA'].'</option>';
  97.  
  98. }
  99.  
  100. echo '</select>';
  101. ?>
  102.  
  103. </div>
  104. <div>
  105. Oceny:
  106. <input type="text" name="oceny" value="<?php echo $oceny; ?>" size="20" />
  107. <li id="li_1" >
  108. <label class="description" for="element_1">Data: </label>
  109. <span>
  110. <input id="element_1_1" name="data[1]" class="element text" size="2" maxlength="2" value="" type="text"> /
  111. <label for="element_1_1">DD</label>
  112. </span>
  113. <span>
  114. <input id="element_1_2" name="data[2]" class="element text" size="2" maxlength="2" value="" type="text"> /
  115. <label for="element_1_2">MM</label>
  116. </span>
  117. <span>
  118. <input id="element_1_3" name="data[3]" class="element text" size="4" maxlength="4" value="" type="text">
  119. <label for="element_1_3">YYYY</label>
  120. </span>
  121.  
  122. <span id="calendar_1">
  123. <img id="cal_img_1" class="datepicker" src="images/calendar.gif" alt="Pick a date.">
  124. </span>
  125. <script type="text/javascript">
  126. Calendar.setup({
  127. inputField : "element_1_3",
  128. baseField : "element_1",
  129. displayArea : "calendar_1",
  130. button : "cal_img_1",
  131. ifFormat : "%B %e, %Y",
  132. onSelect : selectEuropeDate
  133. });
  134. </script>
  135.  
  136. </li>
  137. <li class="buttons">
  138. <input type="hidden" name="form_id" value="104120" />
  139. <input id="saveForm" class="button_text" type="submit" name="submit" value="Dodaj" />
  140. </form>
  141.  
  142. <?php
  143. mysql_close($connection);
  144. wyswietl_menu_uzyt();
  145. tworz_stopke_html();
  146. ?>
  147. </div>
  148. <?php
  149. } else {
  150. ?>
  151. <script type="text/javascript">
  152. window.location.href='<?=$urldwa?>';
  153. </script>
  154. <?php
  155. }
  156. ?>
  157. </body>
  158. </html>
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.