Egoblog.cz - Petr Kobelka

CSS Search box - magie CSS stylů

V tomto postu Vám ukážu jak jednoduše nastylovat vyhledávací pole se specifickými potřebami.


Webdesign | Komentáře (0) | Shlédnuto 1530 × | Vloženo: 18. června 2013

 

Rozvržení vyhledávacího pole

Specifické potřeby tohoto vyhledávacího pole jsou definovány jeho podobou. Má vypadat jako 1 rámeček s vložením textu a klikacím tlačítkem.

Základem je správně si uvědomit, z jakých prvků se box skládá. Podle ilustrace tam vidíme 3 části:

  1. pozadí boxu s rámečkem a přechodem (modrý rámeček)
  2. pole pro zadání textu (červený rámeček)
  3. tlačítko pro spuštění vyhledávání (zelený rámeček)

Celý princip spočívá v tom tyto části od sebe pěkne rozdělit a následně je opět sloučit v podobě HTML elementů s CSS absolutním pozicováním.

Definice základních elementů

Hlavní rámeček

Hlavní box může být klidně FORM nebo můžete použít DIV. Tomuto prvku nastavíte přesnou výšku a šířku podle velikosti pozadí. Tento prvek bude mít relativní pozici, chceme totiž aby se správně zobrazoval ve stránce (mohou být i případy, kdy je třeba pozicování absolutní).

Tlačítko vyhledávacího pole

Pro tlačítko potřebujeme pouze ikonku lupy. Nic víc a nic méně. V případě tlačítka použijeme submit a ne INPUT=IMG. Je to z toho důvodu, že INPUT=IMG nám vrací i soiřadnice, kde se na tlačítko kliknulo, což vůbec nepotřebujeme. Pozice prvku bude absolutní, abychom měli tlačítko přesně tam, kde jej potřebujeme.

Pole pro zadání řetězce

Tohle je ještě jednodušší, tady nepotřebujete vůbec nic. Pozice prvku bude absolutní, abychom měli textové pole přesně tam, kde jej potřebujeme.

Nyní by jste měli mít asi takový HTML kód




<form class="form">
<input class="formText" type="text" value="" /> 
<input class="formSubmit" name="" type="submit" value="" />
</form>

 

CSS styly pro vyhledávací pole

Postupně napíšeme styly pro každý z prvků

.form{
position:relative;
width:240px;
hioght:70px;
background:transparent url('nase-pozadi.png') no-repeat;
}
.formText{
background:transparent;
border:none;
width:160px;
height:40px;
position:absolute;
top:15px;
left:15px;
}
.formSubmit{
width:40px;
height:40px;
background:transparent url('nase-tlacitko-lupa.png') no-repeat;
position:absolute;
top:15px;
left:200px;
}

CSS .form má deklarovanou šířku a výšku tak, aby korespondovala s obrázkovým pozadím.
CSS .formText pozadí nastavíme na průhledné, aby bylo vidět pozadí rámečku. Dále jej napozicujeme na začátek tohoto rámečku.
CSS .formSubmit pozadí nastavíme na ikonku lupy, ostatní bude průhledné - je to z toho důvodu, abychom viděli hezké pozadí rámečku.

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.