Tlačítka. z odkazů pomocí CSS.

Nastavíš odkazu nějaký pěkný obrázek na pozadí, který vytvoří efekt tlačítka.

Trey
Jasně, nastavíš odkazu pevné rozměry, když bude potřeba tak blokový display. Pak jen přidáš pozadí a je to hotové.

http://teststranek.kvalitne.cz/css-rollover/
http://teststranek.kvalitne.cz/menu1/

Do jednoho obrázku nakreslíš normální a stisknuté tlačítko a pak s ním jenom posouváš třeba nahoru nebo doleva.

Trey
máš u toho zadanou šířku? To vypadá, jako že se to přizpůsobuje počtu písmen.

Trey
zkus si ten srtl upravit takto. Celé to nagraˇ. Udělal jsem to pod sebe, aby nebyl kilometrový řádek.

<style>
a {
width: 205px;
height: 30px;
display: block;
color:white;
padding: 0.16em 1.9em 0.3em 1.5em;
font-weight: bold;
text-decoration: none;
background:url('tlacitko.jpg'); }
</style>

přidal jsem width: 205px (šířka, číslo přizpůsob), height: 30px (výška - číslo přizpůsob), display: block (aby to bylo v zadaném rozměru).

Trey
Paddingem si došteluješ umístění nápisu.

Záleží na tom, jestli potřebuješ centrovat vodorovně, nebo svisle. Na to první ti stačí text-align: center, s vertikálním cenrtováním to není jednoduché, zkus se inpirovat třeba na tomhle:
http://css.interval.cz/clanky/horizontalni-obrazkove-menu/

Pokud vynecháš float, menu se naskládá pod sebe.

čus

čágo

width: 205px; by to chtělo zmenšit třeba na width: 150px; Ani nejsou vidět konce tlačítek.

Ahoj - tato možmost vytvoření odkazů se mi velice líbí, ale nechci mít tlačítka pod sebou, ale za sebou v řádku a když se všechny tkačítka na jeden řádek nevejdou, tak pokračují na dlším řádku (jako by to byl text), proto jsem místo vlastnosi "display: block;" nastavil "inline" - A tady jsem nazazil na problém!
V Internet Exporeru je v še v pořádku (tlačítko o šířce 160px za kterým následuje další tlačítko...), ale když to otevřu v jiném prohlířeči, tak je tlačítko široké jen podle délky textu v tlačítku a zbytek obrázku tlačítka to odsekne :-(
Můžete se na to mrknout na http://www.my-nasefarnosti.wz.cz/Fotky-XXX.htm - koukněte na to v IE jak chci aby to vypadlo a koukněte na to v jinym prohlížeči (Firefox, Opera) - co mi to dělá....
Prosím poraďte jak to jde vyřešit - Předem díky.

display: block nechat a přidat float: left

mám problém z měnícímise odkazy když nahruju tento kod :

<a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img src="prvni.gif" name="obrazek">
</a>

pokaždé to funguje a všechno je tak jak mám být ale pokud jich nahraju víc než jeden už se mění pouze rám odkazu vždy na bílou a pokud na stránku vložím ještě nějaký banner už se neděje vůbec nic please help

onmouseover a onmouseout na změnu vzhledu tlačítka už je přežitý, lépe řešit přes css
http://www.wellstyled.com/css-nopreload-rollovers.html

bohužel ani toto mi nefunguje v css se vůbec nevyznám nemohl by si poslat nějaký příklad jak na to

Není ti to jasné ani ze zjednodušených příkladů, které jsem tu dával 9.8.2006 v 01:15:38?
Nebo koukni na CSS příklady