Autor Zpráva
mantisa
Profil
ahoj,

nezakládal bych nové téma, kdybych nezkusil vše.

CSS:

#paticka {
width: 770px;
margin: 40px auto 0 auto;
background: url('../img/paticka.gif') no-repeat 0 0;
}

#paticka-text-vlevo {
float: left;
text-align: left;
margin: 13px 0 40px 10px;
display: inline;
}

#paticka-text-vpravo {
float: right;
text-align: right;
margin: 13px 10px 40px 0;
display: inline;
}

#paticka a {
font-weight: normal;
padding: 1px 2px 1px 2px;
border: none;
}

#paticka a:hover {
background-color: #C10000;
color: #FFFFFF;
text-decoration: underline;
}

#paticka a img {
border: none;
text-decoration: none;
}

#paticka a:hover img {
background-color: #FFFFFF;
}

#paticka p {
margin-bottom: 3px;
font-size: 0.9em;
color: #4B4B4B;
}


HTML:

<div id="paticka">
<div id="paticka-text-vlevo">
<p><a href="#"><img src="img/tiskarnicka.gif" alt="tiskárna" width="13" height="10"></a>
<a href="">Vytisknout</a></p>
<p><a href="">Klávesové zkratky</a></p>
</div>
<div id="paticka-text-vpravo">
<p>Foto: <a href="http://www.broken-arts.com/">brokenarts</a>, design a kód: <a href="http://www.mantisa.cz/">Mantis&ndash;a</a></p>
<p><a href="/">Bla Bla Bla</a>, 2007. Všechna práva vyhrazena.</p>
</div>
<div class="cistic">&nbsp;</div>
</div>

při najetí na obrázek tiskárny mi to zobrazí kolem obrázku zhruba 2 px silný rámeček; netuším ale, jak se ho zbavit...


další věc - IE standalone mi bere podmíněné komentáře typu: <!--[if lte IE 5.5000]><link rel="stylesheet" type="text/css" href="css/styl-ie5.css" /><![endif]-->

na dvou html stánkách pohoda a na třetí mi je nebere, jak to je možné?

děkuji za jakoukoli osvětu
Miloš
Profil
Podmíněné komentáře ve standalone verzích za běžných okolností nefungují, ale prý se s tím dá něco dělat.

S tím ráměčkem mě nic nenapadlo, ale proč tam ten obrázek nedáš jen jako background-image?
mantisa
Profil
Miloš

asi to jako background udělám, ale zarazilo mě toto chování...

ty podmíněné komentáře jsou pro mě taky zahádou, fungovat nemají, ale u dvou ze tří html stránek fungují :-)
Miloš
Profil
mantisa
ty podmíněné komentáře jsou pro mě taky zahádou, fungovat nemají, ale u dvou ze tří html stránek fungují :-)
Esli se nepletu, tak fungují IF IE, ale už takhle běžně neodlišíš jednu verzi od druhé.
mantisa
Profil
Miloš


mně fungují i odlišené právě, záhada

jinak ten obrázek stále řeším, protože ho chci taky klikací
Bubák
Profil
Udělej třídu pro pozadí hover textových odkazů, obrázkové odkazy ponechej "normální".
mantisa
Profil
Bubák


tohle jsem malinko nepobral, mohl bys prosím polopatičtěji, díky
Bubák
Profil
#paticka a.zvyraznit:hover {
background-color: #C10000;
color: #FFFFFF;
text-decoration: underline;
}

<p><a href="#"><img src="img/tiskarnicka.gif" alt="tiskárna" width="13" height="10"></a>
<a class="zvyraznit" href="">Vytisknout</a></p>

Až teď jsem si všimnul, že pro odkazy máš nastavený padding, ten ti dělá "rámeček".
mantisa
Profil
Bubák

padding je samozřejmě první, po čem jsem šel, ani jeho vynulování nezabralo
Bubák
Profil
Máš padding v téhle deklaraci:
#paticka a {
font-weight: normal;
padding: 1px 2px 1px 2px;
border: none;
}

Pokud ho vymažeš, tak "rámeček" zmizí, ale pak nebudeš mít padding u textových odkazů.
mantisa
Profil
Bubák

však to je to, co myslím, padding jsem odebral, přesto rámeček setrvává, popravdě řečeno pouze jeho horní a dolní okraj, jinde padding definovanej nemám

každopádně, proč nejde udělat, aby obrázek neměl padding a texty měly?
mantisa
Profil
kdo tohle vyřeší, tomu patří metál...
Plaváček
Profil
mantisa

Děláš to blbě, tiskárnička prostě má být pozadím odkazu a tím pádem bude také klikací. Pokud ale trváš na tomhle podivném kódu, řešení je prosté:

#paticka a img {
border: none;
display: inline;
float: left;
margin: 0.2em 0 0 0
}
mantisa
Profil
Plaváček

dík, to už jsem pochopil, ale trval jsem na řešení, přesto ani Tvoje není ideální, pravá strana rámečku se objevuje, přesto díky
Plaváček
Profil
mantisa

Když děláš jednoduché věci složitě, tak se nediv. Pak musíš odkazu, ve kterém je obrázek, přiřadit třídu a zrušit ten nastavený padding. Ostatně, nastavovat horní a dolní padding inline prvku je zhola zbytečné, pokud se nemýlím.
mantisa
Profil
Plaváček


jsem nějak mimo, ale teď mě nenapadá elegantní způsob jak udělat, aby se měnilo při hoveru pouze pozadí textové části...

za radu budu vděčen, případně to nechám na ráno, snad to po ránu vymyslím :-)
Plaváček
Profil
mantisa

Tak jenom rychlá ukázka (ale možností je samozřejmě povícero):

http://klient.plavacek.net/tisk.html
mantisa
Profil
Plaváček


samozřejmě, že děkuji velmi pane, ale jak jsem ráno vstal, tak jsem to vymyslel, každopádně přesto Ti patří můj velký dík
mantisa
Profil
Plaváček


samozřejmě, že děkuji velmi pane, ale jak jsem ráno vstal, tak jsem to vymyslel, každopádně, přesto Ti patří můj velký dík

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0