Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [CSS]Okno wyszukiwarki
adrianozo
post
Post #1





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Witam.
Zrobiłem sobie okno wyszukiwarki razem z przyciskiem i nie wiem teraz jak to wrzucić na stronę.

(IMG:http://iv.pl/images/81925764110726925169.png)

css:
Kod
div#wyszukiwarka
{
width: 35%;
float: right;
position: relative;
top: 60%;
background-image:url(images/szukaj.png);
}
div#men


index:
[HTML] pobierz, plaintext 
  1. <div id="wyszukiwarka">
  2.                 <form action="?" method="get">
  3. 		<input type="text" name="wynik" value="'.$_GET['wynik'].'" />
  4. 		<input type="submit" name="submit" value="Szukaj" />
  5. 		</form>
  6. </div>
[HTML] pobierz, plaintext


I nie wyświetla się na stronie. Nie wiem jak to poprawić.
Z góry dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)

Wyszło takie coś:

http://www.nportfolio.pl/

i nie wiem co teraz.

CSS:
Kod
div#wyszukiwarka
{
width: 186px;
height: 29px;
float: right;
position: relative;
top: 60%;
background-image:url(images/szukaj.png);
}


Ten post edytował adrianozo 19.02.2010, 11:46:37
Go to the top of the page
+Quote Post
napus
post
Post #2





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 16.02.2010

Ostrzeżenie: (0%)
-----

Przede wszystkim usuń to br
[HTML] pobierz, plaintext 
  1. <div id="wyszukiwarka">
  2. 				<br><form method="get" action="?">
[HTML] pobierz, plaintext

Spróbuj zrobić tak:
[HTML] pobierz, plaintext 
  1. <div style="float: right; background: url("images/szukaj.png") no-repeat scroll 0pt 0pt transparent;" id="wyszukiwarka">
  2.     		<form id="search" method="post" action="./search.php">
  3.     		<fieldset>
  4.     			<input type="text" onblur="if(this.value=='')this.value='Szukaj…';" onclick="if(this.value=='Szukaj…')this.value='';" value="Szukaj…" class="menu_search" title="Szukaj słów kluczowych" maxlength="128" id="keywords" name="keywords"> 
  5.  
  6.     		</fieldset>
  7.     		</form>
  8.     	</div>
[HTML] pobierz, plaintext


Ten post edytował napus 19.02.2010, 12:04:39
Go to the top of the page
+Quote Post
adrianozo
post
Post #3





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Zrobione. Ale problem istnieje nadal
Go to the top of the page
+Quote Post
Mnichasso
post
Post #4





Grupa: Zarejestrowani
Postów: 97
Pomógł: 13
Dołączył: 26.06.2003
Skąd: Piekary Śląskie

Ostrzeżenie: (0%)
-----

zrob input przezroczysty ;p
Go to the top of the page
+Quote Post
adrianozo
post
Post #5





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

CSS:
Kod
div#wyszukiwarka
{
width: 217px;
background: url(images/text.png) repeat-y;
float: right;
position: relative;
top: 60%;
}


index:
[HTML] pobierz, plaintext 
  1. <form action="?" method="get">
  2. 		<input type="text" name="wynik" value="'.$_GET['wynik'].'" onclick="this.value=\' \'" />
  3. 		<input type="image" name="submit" src="images/szukaj.png" border="0" value="Szukaj" />
  4. 		</form>
[HTML] pobierz, plaintext


I wychodzi tak:

http://www.nportfolio.pl/
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Witam teraz sobie resztę chyba dopasujesz to już detale

Kod
<style type="text/css">
.wyszukiwarka {
width: 217px;
float: right;
}

.wyszukiwarka .text {
width: 187px;
height: 30px;
padding: 6px 0 0 20px;
background: url(images/text.png) repeat-y;
float: left;
position: relative;
border: 0;
top: 60%;
}

.wyszukiwarka .submit {
width: 30px;
height: 30px;
float: left;
}

</style>

<div class="wyszukiwarka">
       <form action="?" method="get">
       <input type="text" name="wynik" value="'.$_GET['wynik'].'" onclick="this.value=\' \'" class="text" />
       <input type="image" name="submit" src="images/szukaj.png" border="0" value="Szukaj" class="submit" />
       </form>
      
       </div>


pozdrawiam

Ten post edytował krzysztof_kf 19.02.2010, 13:35:36
Go to the top of the page
+Quote Post
adrianozo
post
Post #7





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

CSS:
Kod
div#wyszukiwarka
{
width: 219px;
float: right;
position: relative;
top: 60%;
}
.text
{
width: 181px;
height: 24px;
background: url(images/text.gif);
}


index:
[HTML] pobierz, plaintext 
  1. <form action="?" method="get">
  2. 		<input class="text" type="text" name="wynik" value="'.$_GET['wynik'].'" />
  3. 		<input type="image" type="submit" name="submit" src="images/szukaj.gif" border="0" value="Szukaj" />
  4. 		</form>
[HTML] pobierz, plaintext


EFEKT:

http://www.nportfolio.pl

Jednym słowem chciałbym obniżyć ten przycisk z lupą oraz jakby się dało przysunąć go jak najbardziej do input text

Ten post edytował adrianozo 19.02.2010, 13:59:54
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #8





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

kolego zobacz mój wyżej post masz zrobione czarno na białym tylko wkleić i śmiga

Ten post edytował krzysztof_kf 19.02.2010, 14:00:52
Go to the top of the page
+Quote Post
adrianozo
post
Post #9





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Właśnie nie śmiga
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #10





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

eeee ? http://83.8.104.148

tak źle ? bo już nie wiem może coś z resztą masz źle ?

Ten post edytował krzysztof_kf 19.02.2010, 14:10:06
Go to the top of the page
+Quote Post
adrianozo
post
Post #11





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Dobrze wygląda?

http://www.nportfolio.pl
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #12





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

tak ale tam gdzie się wpisuję text zaokrąglenia są słabej jakości polecam w tym wypadku zrobić grafikę tak zwaną bez tła
Go to the top of the page
+Quote Post
adrianozo
post
Post #13





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Zrobiłem przeźroczystą ale chyba coś nie wyszło
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #14





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

musi działać http://83.8.104.148 lepszy efekt ? musi śmigać

Ten post edytował krzysztof_kf 19.02.2010, 14:34:13
Go to the top of the page
+Quote Post
adrianozo
post
Post #15





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Lepszy tylko u mnie to nie działa.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #16





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

http://83.8.104.148/text.png ściągnij i wrzuć musi działać (IMG:style_emoticons/default/exclamation.gif) (IMG:style_emoticons/default/exclamation.gif) nie działa ci bo masz tło ;/

nie wycinaj tego tylko sciagnij prawy przycisk i zapisz jako ...

brawo (IMG:style_emoticons/default/czarodziej.gif) (IMG:style_emoticons/default/guitar.gif)

w opcji ustaw położenie czcionki

Kod
.wyszukiwarka .text {
padding: 4px 0 0 20px;


Ten post edytował krzysztof_kf 19.02.2010, 14:52:01
Go to the top of the page
+Quote Post
adrianozo
post
Post #17





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Wyciąłem (IMG:style_emoticons/default/tongue.gif)

Dzięki za pomoc (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #18





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

rozumiesz już ? pamiętaj o paddingu w klasie .text

w opcji .submit wpisz jeszcze padding: 0; (IMG:style_emoticons/default/exclamation.gif) !!

Ten post edytował krzysztof_kf 19.02.2010, 14:53:00
Go to the top of the page
+Quote Post
adrianozo
post
Post #19





Grupa: Zarejestrowani
Postów: 733
Pomógł: 4
Dołączył: 11.11.2009

Ostrzeżenie: (0%)
-----

Jeszcze mam jeden problem:

CSS:
Kod
.wyszukiwarkas
{
width: 180px;
position: relative;
top: 60%;
}
.wyszukiwarkas.texts
{
width: 187px;
height: 25px;
padding: 4px 0 0 3px;
background: url(images/text.gif) no-repeat;
float: left;
position: relative;
border: 0;
top: 60%;
}
.wyszukiwarkas.submits
{
width: 30px;
height: 30px;
float: left;
padding: 0;
}


szukaj:
[HTML] pobierz, plaintext 
  1. <div class="wyszukiwarkas"><form action="?" method="get">
  2. <input type="text" name="wynik" value="'.$_GET['wynik'].'" class="texts" />
  3. <input type="image" name="submit" src="images/szukaj.gif" border="0" value="Szukaj" class="submits" />
  4. </form></div>
  5.  
  6. <div class="wyszukiwarkas"><form action="?" method="get">
  7. <input type="text" name="wynik" value="Szukaj w serwisie..." onclick="this.value=\' \'" class="texts" />
  8. <input type="image" name="submit" src="images/szukaj.gif" border="0" value="Szukaj" class="submits" />
  9. </form></div>
[HTML] pobierz, plaintext


I tutaj mi to nie działa:

http://www.nportfolio.pl/szukaj
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #20





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

moment coś zaraz zaradzimy
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 22:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn