Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]FORM ACTION a layout strony
Forum PHP.pl > Forum > Przedszkole
Gabrielx
5.08.2009, 18:18:27
Zrobiłem layout strony. Wygenerowałem go w PHP. Teraz chciałbym dodać do niego FORM ACTION.
Kiedy wpisze go normalnie w miejsce img src.... layout się rozlatuje. Co zrobić aby się nie rozlatywał? Jak wy sobie z tym problemem radzicie?

<td colspan="7">
<img src="obrazek_29.jpg" width="153" height="18" alt="">
</td>

<FORM ACTION="bla.php" METHOD=POST>
<INPUT NAME="bla" SIZE=20>
iVorIus
5.08.2009, 18:27:50
To znaczy jak się rozlatuje?
Co się dzieje?

Gdy mam problemy ustawiam wszystko tak, żeby działało tongue.gif
Daiquiri
5.08.2009, 18:30:42
1. Może warto skorzystać z DIVów?
2. Co się rozlatuje? Jak ustawiłeś szerokości?
3. Więcej kodu party.gif
Gabrielx
5.08.2009, 18:32:09
Więc tak. Zrobiłem miejsce na wyszukiwarkę. Niestety pasek zrobiony w layoucie strony jest cieńszy od tego co wyświetla FORM ACTION. Kiedy w miejsce obrazka wstawię FORM ACTION layout strony się rozlatuję(części layoutu nie tworzą jednej całości). Co z tym fantem mogę zrobić?
Daiquiri
5.08.2009, 18:34:40
Zmienić rozmiary forma? Daj kod bo zgadujemy...
iVorIus
5.08.2009, 18:36:59
Podaj kod, coś poradzimy.
Gabrielx
5.08.2009, 18:38:28
http://img268.imageshack.us/img268/3582/wyszukiwarka.jpg

Po lewej jak wygląda- po prawej jak powinno wyglądać.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>projekt2</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. <style type="text/css">
  6. 		body{margin: 0px; padding: 0px; background:#FFFFFF url(images/tlo2.jpg) repeat-x 0px 0px; text-align: center;}
  7. 		</style>
  8.  
  9. </head>
  10. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  11.  
  12.  
  13. <table id="Tabela_01" width="901" height="300" border="0" cellpadding="0" cellspacing="0" align="center">
  14. 	<tr>
  15. 		<td colspan="22">
  16. 			<img src="images/obraz_01.jpg" width="901" height="26" alt=""></td>
  17. 	</tr>
  18. 	<tr>
  19. 		<td colspan="14">
  20. 			<img src="images/obraz_02.jpg" width="739" height="18" alt=""></td>
  21. 		<td>
  22. 			<a href="elk/strona.php?strona=nelk"><img src="images/obraz_03.jpg" border="0" width="41" height="18" alt=""></td>
  23. 		<td colspan="7">
  24. 			<img src="images/obraz_04.jpg" width="121" height="18" alt=""></td>
  25. 	</tr>
  26. 	<tr>
  27. 		<td colspan="12" rowspan="3">
  28. 		</a><img src="images/obraz_05.jpg" width="722" height="92" alt=""></td>
  29. 		<td colspan="4">
  30. 				<a href="lomza/strona.php?strona=nlomza"><img src="images/obraz_06.jpg" border="0" width="65" height="19" alt=""></td>
  31. 		<td colspan="6">
  32. 			<img src="images/obraz_07.jpg" width="114" height="19" alt=""></td>
  33. 	</tr>
  34. 	<tr>
  35. 		<td colspan="7">
  36. 			<a href="strona.php?strona=nbialystok"><img src="images/obraz_08.jpg" border="0" width="89" height="21" alt=""></td>
  37. 		<td colspan="3" rowspan="4">
  38. 			<img src="images/obraz_09.jpg" width="90" height="119" alt=""></td>
  39. 	</tr>
  40. 	<tr>
  41. 		<td colspan="7">
  42. 			<img src="images/obraz_10.jpg" width="89" height="52" alt=""></td>
  43. 	</tr>
  44. 	<tr>
  45. 		<td rowspan="2">
  46. 			<img src="images/obraz_11.jpg" width="175" height="46" alt=""></td>
  47. 		<td>
  48. 		<a href='strona.php?strona=nbialystok'><img src="images/obraz_12.jpg" border="0" width="79" height="31" alt=""></td>
  49. 		<td>
  50. 			<a href='strona.php?strona=opbialystok'><img src="images/obraz_13.jpg" border="0" width="80" height="31" alt=""></td>
  51. 		<td>
  52. 			<a href='strona.php?strona=dystbialystok'><img src="images/obraz_14.jpg" border="0" width="93" height="31" alt=""></td>
  53. 		<td>
  54. 			<a href='strona.php?strona=ibialystok'><img src="images/obraz_15.jpg" border="0" width="58" height="31" alt=""></td>
  55. 		<td>
  56. 			<a href='strona.php?strona=kbialystok'><img src="images/obraz_16.jpg" border="0" width="43" height="31" alt=""></td>
  57. 		<td>
  58. 			<a href='strona.php?strona=gbialystok'><img src="images/obraz_17.jpg" border="0" width="53" height="31" alt=""></td>
  59. 		<td colspan="4">
  60. 			<a href='http://www.gilgotki.com/g.php?user=alejabaunsu'><img src="images/obraz_18.jpg" border="0" width="89" height="31" alt=""></td>
  61. 		<td colspan="2">
  62. 			<a href='strona.php?strona=kobialystok'><img src="images/obraz_19.jpg" border="0" width="55" height="31" alt=""></td>
  63. 		<td colspan="6" rowspan="2">
  64. 			<img src="images/obraz_20.jpg" width="86" height="46" alt=""></td>
  65. 	</tr>
  66. 	<tr>
  67. 		<td colspan="12">
  68. 			<img src="images/obraz_21.jpg" width="550" height="15" alt=""></td>
  69. 	</tr>
  70. 	<tr>
  71. 		<td colspan="8" rowspan="2">
  72. 			<img src="images/obraz_22.jpg" width="615" height="30" alt=""></td>
  73. 		<td colspan="2" rowspan="2">
  74. 			<img src="images/obraz_23.jpg" width="39" height="30" alt=""></td>
  75. 		<td colspan="7">
  76. 			<img src="images/obraz_24.jpg" width="153" height="18" alt=""></td>
  77. 		<td rowspan="2">
  78. 			<img src="images/obraz_25.jpg" width="2" height="30" alt=""></td>
  79. 		<td colspan="2">
  80. 			<img src="images/obraz_26.jpg" width="48" height="18" alt=""></td>
  81. 		<td colspan="2" rowspan="2">
  82. 			<img src="images/obraz_27.jpg" width="44" height="30" alt=""></td>
  83. 	</tr>
  84. 	<tr>
  85. 		<td colspan="7">
  86. 			<img src="images/obraz_28.jpg" width="153" height="12" alt=""></td>
  87. 		<td colspan="2">
  88. 			<img src="images/obraz_29.jpg" width="48" height="12" alt=""></td>
  89. 	</tr>
  90. 	<tr>
  91.  
  92. 	   <td colspan="9" background="images/obraz_30.jpg" width="616" valign=top>
[HTML] pobierz, plaintext



obraz_24.jpg -> tam powinno się znajdować FORM ACTION
obraz_26.jpg -> przycisk szukaj
Daiquiri
5.08.2009, 18:40:24
Ustaw styl dla pola. Daj kod!

Edit: no jest i trochę kodu.

Staraj się budować strony w oparciu o DIVy to zniknie większość problemów. Tabelki zostały stworzone z myślą o przedstawianiu danych a nie "krojeniu" strony. Dodaj po prostu styl dla elementu wyszukiwarki w CSS.

Gabrielx
5.08.2009, 18:47:39
Możesz napisać co dokładnie mam zrobić... Bo na CSS się za bardzo nie znam... sad.gif
iVorIus
5.08.2009, 18:52:27
Margin: 0; padding: 0; width: 153; height: 18; ?
Daiquiri
5.08.2009, 18:55:26
W stylach

np. 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.         body{margin: 0px; padding: 0px; background:#FFFFFF url(images/tlo2.jpg) repeat-x 0px 0px; text-align: center;}
  3.         input.wyszukiwarka {width: 100px; height: 15px; }
  4.         </style>
[HTML] pobierz, plaintext


a w kodzie:
[HTML] pobierz, plaintext 
  1. <form>
  2.          <input type="text"  class="wyszukiwarka"/> 
  3.  
  4.     </form>
[HTML] pobierz, plaintext


Wysokość i szerokość dopasuj sam
Gabrielx
5.08.2009, 20:45:14
Dalej to samo... sad.gif
Daiquiri
5.08.2009, 21:02:06
To wrzuć gdzieś kompletną stronę (z grafiką) - będzie nam łatwiej.
Gabrielx
6.08.2009, 09:43:08
Z całe strony rozjeżdża się tylko jeden element-wyszukiwarka. Wrzucenie całej strony jest zbędne.
jarrod
6.08.2009, 09:48:26
Ale layout to cala strona a nie wyszukiwarka, prawda?
Ziom73
6.08.2009, 10:16:16
Używaj styl css! Gdyż jak będziesz chciał edytować, aby zmienić pozycję to wystarczy wejść w twój_styl.css, a nie szukać po plikach ;/
Gabrielx
29.08.2009, 01:11:08
Ok. Poradziłem sobie z tamtym problemem. Niestety jest kolejny:/. Zmiana przycisku wyszukiwania tradycyjnego na obrazek:
Cytat
<style type="text/css">
input.wyszukiwarka {width: 153px; height: 18px; }
</style>
<form action="szukaj.php">
<input type="text" class="wyszukiwarka" id="slowo_klucz" name="slowo_klucz"/>
<input class="submit" type="submit"
value="szukaj" />
</form>

Próbowałem linkować ale coś nie wychodziło :/
f1xer
29.08.2009, 01:19:13
wstaw zamiast submita:
[HTML] pobierz, plaintext 
  1. <input type="image" src="sciezka/do/obrazka.jpg" alt="Wyślij/Zaloguj/Cokolwiek" />
[HTML] pobierz, plaintext
Gabrielx
29.08.2009, 01:49:57
Ok. Działa. biggrin.gif Jest tylko obwódka. Border = "0"nie pomaga.:
<input class="submit" type="image" src="images/alebaun_26.jpg" border="0" alt="Wyślij" value="szukaj" />

Dzieje się tak kiedy przytrzymam lewy przycisk myszy na buttonie(szukaj). Kiedy potem kliknę w jakieś inne miejsce problem znika.
Ps. Po prawej jak powinno być, po lewej jak jest.
Ps2. Sory za taką grafikę w paincie. Robiłem ją byle szybciej ;P
Rookie
29.08.2009, 12:46:33
Do css dodaj:
[HTML] pobierz, plaintext 
  1.  <style type="text/css">
  2. input.wyszukiwarka {width: 153px; height: 18px; border: 0px;}
  3. </style>
[HTML] pobierz, plaintext

I będzie śmigać ;p
EDIT: Tzn. nie dodawaj całego kodu 2 raz tylko zamien go moim albo dopisz ręcznie po prostu border: 0px
EDIT2: a jak nie chcesz, żeby tak było po najechaniu i naciśnięciu to musisz mieć tak:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. input.wyszukiwarka, input.wyszukiwarka:hover, input.wyszukiwarka:focus {width: 153px; height: 18px; border: 0px;}
  3. </style>
[HTML] pobierz, plaintext
Gabrielx
29.08.2009, 13:11:14
To co podałeś zmienia pasek wyszukiwarki... 
[HTML] pobierz, plaintext 
  1. <input class="submit" type="image" src="obrazek.gif" alt="Wyślij" value="szukaj" />
[HTML] pobierz, plaintext

to jest odpowiedzialne za przycisk
Rookie
29.08.2009, 13:17:48
To daj tak:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. .submit, .submit:hover, .submit:focus {width: 153px; height: 18px; border: 0px;}
  3. </style>
[HTML] pobierz, plaintext

Toć to są podstawy podstaw.
Oczywiście wysokość i szerokość sobie możesz dopasować jak ci odpowiada w pikselach.
Dostałeś rozwiązanie na tacy...
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.