Autor Zpráva

Profil *
Zdravím, potřebuji urychleně pomoc. Patlám se s měnícíma se tlačítkama při přejezdu myší. Potřebuji jako odkaz mít div, čili je to div uvnitř tagu <a>. Jenže takový způsob není validní. Nenapadá mne, jak jinak to udělat (snad jedině přes měnící se obrázky). Pokud je to nesrozumitelné, můžu poslat kód. Děkuju.
Miloš
Profil
Několik řešení:
1) Jestliže to funguje, vykašli se na validitu
2) Jestliže máš v <div>u jen inline obsah (text a obrázky), ale žádné další bloky (<p>m <ol> a podobně), pak obrať pořadí takto
<div><a>blablabla</a></div>
Jen stojí za otázku, proč to místo <divu> není odstavec (<p>).
3) Použij javascript – adresu pověš v divu na onclick.
Miloš
Profil
Jejda – teď koukám – tobě jde o měnící se tlačítka? To jako odkazy? A k čemu je tam pak ten div? To nemůžeš tlačítka dělat lidsky přes background-image? Nebo dokonce přes barvu/border – http://www.jakpsatweb.cz/priklady/jakotlacitko.html

Profil *
Funguje to, ale validita je podmínkou. Obrátit se to nedá, to už to pak nefunguje. Onclick jsem zkoušel, ale nepřesměrovalo mě to na tu jinou stránku. Jen se objevila hláška, že na stránce došlo k chybě.
Miloš
Profil
Byl by příklad kódu? Jak jsi to psal?

Profil *
Tady je můj kód:

<a href="1.html" class="a-tlacitko2"><div class="tlacitko2">Odkaz 1<span class="raquo">&raquo;</span></div></a>


A to je externě nastylovaný takto:

.tlacitko2 {height: 47px;
width: 275px;
background-image: url('images/menu2-background.jpg');
border-width: 1px;
border-style: solid;
border-color: #c4d4d1;
text-align: left;
padding-left: 25px;
margin-bottom: 16px;
line-height: 200%}

.tlacitko2:hover {height: 47px;
width: 275px;
background-image: url('images/menu2-background-hover.jpg');
border-width: 1px;
border-style: solid;
border-color: #c4d4d1;
text-align: left;
padding-left: 25px;
margin-bottom: 16px;
line-height: 200%;
color: #ffffff}

.raquo {position: absolute;
left: 275px;
font-size: 140%}

.a-tlacitko2 {color: #8895b2;
font-family: arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 140%;
text-decoration: none}


Je to i na mě dost složitý a nepřehledný, ale jsem už tak zblblej, že to jednodušejc nesvedu :)
Bubák
Profil
Potřebuji jako odkaz mít div
Pokud ti to funguje, tak nejrychlejší validní řešení je použít <span> a deklarovat ho jako blokový.
Obrátit se to nedá, to už to pak nefunguje.
Funguje, musí, běžně se to tak dělá, něco jsi měl chybně, ale protože nikdo znalý neviděl tvůj kód, tak ti nikdo neřekne, co to bylo.

Kdybys dal odkaz na stránku, nebo aspoň podstatnou část kódu svého "zázraku", dalo by se najít čistší řešení.

Profil *
Bubák: Jak se span deklaruje jako blokový?
Miloš
Profil
span {display: block}
Bubák
Profil
Kýho šlaka, proč absolutně pozicuješ? Z takových tlačítek chce mít vodorovné, nebo svislé menu?

Profil *
No tak to pomalu vypadá, že s tím blokovým spanem je to dobrý. Funkčnost se nezměnila a validátor nekřičí.

Profil *
Bubák: Svislé. Je to absolutní pozicování uvnitř jiného divu.
Bubák
Profil
Co třebas nějak takto, případně si douprav:
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.tlacitko2 li {
width: 275px;
height: 47px;
line-height: 47px;
font-size: 1.4em;
}
.tlacitko2 a {background: #def url('images/menu2-background.jpg');
text-decoration: none;
position: relative;
display: block;
height: 100%;
border: 1px solid  #c4d4d1;
padding-left: 20px;
}
.tlacitko2 a:hover {
background: #efd url('images/menu2-background-hover.jpg');
}
.tlacitko2 span {
color: red;
position: absolute;
top: 0;
left: 250px;
}
.tlacitko2 a:hover span {color: blue} /* trochu obskurni zapis pro IE6 */
</style>

<ul class="tlacitko2">
<li><a href="1.html">Odkaz 1<span>&raquo;</span></a>
<li><a href="1.html">Odkaz jiný<span>&raquo;</span></a>
<li><a href="1.html">Další kdesi cosi<span>&raquo;</span></a>
</ul>
blizz_boz
Profil

alebo použi JQuery
Bubák
Profil
blizz_boz
Kanón na vrabce?

Profil *
Bubák: díky za kód, podívám se na to zítra. Dneska už jdu spát.

Ještě dotaz: jak nainstaluju IE 6, když mám nainstalovaný IE 8? Musím nejdřív odebrat novější IE?
Miloš
Profil
V žádném případě: http://tredosoft.com/Multiple_IE
Bubák
Profil
K ještě dotazu, proč?
Pokud z důvodů testování, já používám třebas http://browsershots.org ale tam nezjistíš třebas chování hover efektů a taky to chvíli trvá.

Pak je možnost IE6 pouze rozbalit, přidat prázdný soubor process.exe.local a spustit, ale nefungují v tom třebas podmíněbé fomentáže a CSS filtry. Na něco jsou k nalezení návody, jak to rozchodit.

Krom toho jsou programy, jako IETester, Internet Explorer Collection..., které v sobě mají několik jader IE.

Poslední možnosti jsou spouštět jiné verze IE nativně, použít dualboot, nebo virtualizaci.

Profil *
Bubák: co je #def a #efd v tvém kódu? Nikdy jsem to neviděl.
Bubák
Profil
#def a #efd v tvém
Použil jsem to proto, že jsem neměl tvé obrázky pozadí, a nechtělo se mi je malovat. Je to zkrácený šestnáctkový zápis barvy v CSS (pozor, nefunguje v HTML), prohlížeče s tím nemají problém, více třebas:
www.jakpsatweb.cz/barvy-zapis.html podkapitola Zkrácený zápis

A taky rovnou v CSS specifikaci:
www.w3.org/TR/CSS21/syndata.html#color-units
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
Strojový google překlad

Profil *
Bubák: jo jo, chvíli po tom, co jsem se zeptal, jsem na to taky přišel :-) Protože takový zápis vůbec nepoužívám, tak mě to nenapadlo hned. Jinak za kód ještě jednou dík, po úprávách jsem ho použil.

Bubák, Miloš: A taky dík za ty íéčka.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: