Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Okno wyszukiwarki
Forum PHP.pl > Forum > Przedszkole
adrianozo
19.02.2010, 11:52:57
Witam.
Zrobiłem sobie okno wyszukiwarki razem z przyciskiem i nie wiem teraz jak to wrzucić na stronę.



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 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);
}
napus
19.02.2010, 11:57:23
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
adrianozo
19.02.2010, 11:59:46
Zrobione. Ale problem istnieje nadal
Mnichasso
19.02.2010, 12:03:17
zrob input przezroczysty ;p
adrianozo
19.02.2010, 12:43:34
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/
krzysztof_kf
19.02.2010, 13:34:37
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
adrianozo
19.02.2010, 13:58:32
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
krzysztof_kf
19.02.2010, 14:00:02
kolego zobacz mój wyżej post masz zrobione czarno na białym tylko wkleić i śmiga
adrianozo
19.02.2010, 14:04:42
Właśnie nie śmiga
krzysztof_kf
19.02.2010, 14:09:03
eeee ? http://83.8.104.148

tak źle ? bo już nie wiem może coś z resztą masz źle ?
adrianozo
19.02.2010, 14:24:55
Dobrze wygląda?

http://www.nportfolio.pl
krzysztof_kf
19.02.2010, 14:26:23
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
adrianozo
19.02.2010, 14:29:39
Zrobiłem przeźroczystą ale chyba coś nie wyszło
krzysztof_kf
19.02.2010, 14:33:07
musi działać http://83.8.104.148 lepszy efekt ? musi śmigać
adrianozo
19.02.2010, 14:36:56
Lepszy tylko u mnie to nie działa.
krzysztof_kf
19.02.2010, 14:47:58
http://83.8.104.148/text.png ściągnij i wrzuć musi działać exclamation.gif exclamation.gif nie działa ci bo masz tło ;/

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

brawo czarodziej.gif guitar.gif

w opcji ustaw położenie czcionki

Kod
.wyszukiwarka .text {
padding: 4px 0 0 20px;
adrianozo
19.02.2010, 14:52:02
Wyciąłem tongue.gif

Dzięki za pomoc smile.gif
krzysztof_kf
19.02.2010, 14:57:57
rozumiesz już ? pamiętaj o paddingu w klasie .text

w opcji .submit wpisz jeszcze padding: 0; exclamation.gif!!
adrianozo
19.02.2010, 15:13:18
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
krzysztof_kf
19.02.2010, 15:15:10
moment coś zaraz zaradzimy
Blame
19.02.2010, 15:20:52
Albo adres który podałeś jest zły albo to literówka bo ja w arkuszu widzę odniesienie do klas "tekst" i "submit"(bez "esów"). Inna sprawa, że masz input type="image" i dodatkowo go stylujesz, zmień na zwykły submit.
adrianozo
19.02.2010, 15:26:54
Są z "esami" przecież
krzysztof_kf
19.02.2010, 15:33:21
rób pomiędzy klasami jak pisesz naprzykład

Kod
.wyszukiwarkas .texts
  {


to rób pomiędzy .wyszukiwarkas "spacja" .texts


żeby była przerwa bo w innym przypadku ci się wszystko rozwali

a w twoim kodzie widziałem

Kod
.wyszukiwarkas.texts
{
adrianozo
19.02.2010, 22:24:01
Dzięki.
Teraz jest problem z pozycjonowaniem w różnych przeglądarkach...
smile.gif

Głównie Chrome i IE 6.0

Naprawione:

Usunąłem z .wyszukiwarka .text top: 60%; i działa smile.gif

Sory za zament... smile.gif
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.