Širina gumbov pri različni dolžini teksta

#1Kako rešujete problem, ko gre za večjezično stran ali pa navaden submit gumb in je ponekod v zgornjem meniju ali pa v gumbu lahko text dolg 30px ponekod pa 100px. Recimo da ima slika rob z leve in desne in še sredino (vsak del elementa drugačen).

Primer: gumb ima enkrat tekst ODDAJ, drugič pa POVPRAŠEVANJE in sedaj bi v CSS-u rad uporabil enako sliko ozadja, le da bo enkrat bolj široko, drugič ožje...

#2vgnezdi dodatni "span" npr:

<a href="#"><span>Oddaj</span></a>

css:

a {
padding-left:5px /*Odvisno od širine levega dela*/
background: url image-left.jpg...
}

span: {
dispaly: inline-block;
background: url image-right.jpg...
padding: 5px 10px 5px 5px; /* vračunaj padding 5px iz a */
}

upam da je dokaj razumljivo

#3Dodaš dodaten <span> tako kot je predlagal sonysony. S tem, da mora bit potem ena slika na<a> ful široka.

Če so pa transparentni gumbi pa ta metoda ne gre. potem moraš pa nekaj grdega kot je to naredit:
<a href="#"><s></s><b>tekst</b><i></i></a> - potem pa dodaš na vsak element sliko, levo, desno, sredina. S tem, da bi jaz te dodatne, nepotrebne elemente dodajal z JS.

... Ali pa uporabiš CSS3 :)

#4

SpinX:
Če so pa transparentni gumbi pa ta metoda ne gre. potem moraš pa nekaj grdega kot je to naredit:
<a href="#"><s></s><b>tekst</b><i></i></a> - potem pa dodaš na vsak element sliko, levo, desno, sredina. S tem, da bi jaz te dodatne, nepotrebne elemente dodajal z JS.

... Ali pa uporabiš CSS3 :)

To ne bo res, zadevo rešiš s padding, tako kot sem jaz napisal... in a je mala slika levo ter span velika slika desno

ps: lep podpis ;)

ps2: še realen primer s transparentno sliko

#main-menu ul li {
background: url("../images/menu-l.png") no-repeat scroll 0 0 transparent;
float: left;
list-style: none outside none;
margin: 0 2px 0 0;
padding-bottom: 0;
padding-left: 5px !important;
padding-right: 5px;
padding-top: 0;
}

#main-menu ul li a {
background: url("../images/menu-r.png") no-repeat scroll 100% 0 transparent;
color: #FFFFFF;
font-size: 13px;
padding: 6px 10px 6px 5px;
}

V tem primeru sta pač elementa li in a

lp, mitja

#5Uh... hvala za hinte... bomo nekaj sprobali in če bo kaj treba se še oglasim.

Nisem si mislil, da bo tako konkretno odgovorjeno.

Hvala obema zaenkrat

#6To je stvar dizajna. Dosti gumbov bi lahko v realnosti zdrzala z background sliko velikosti visina_gumba*1px, ki ga ponavljas. Tako je cisto vseeno, ali imas notri "Home" ali "Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz".

Seveda pa lahko zaobljene robove in senco naredis s CSS3. Podprtih je dejansko vec browserjev kot mislis, ker s prefixom -moz- ali -webkit podpres se starejse FF in Safari/Crome/Webkit-based-browserje.

#7sonysony odvisno spet od gumba. En nacin je, da das margin. S paddingom tega zagotovo ne mores naredit, ker padding ima isti background kot element. To pomeni, da ena sliak prekrije drugo, in ker si slike transparentne se spodnja vidi.

#8če daš zunanji element pading-left 5px, kje se bo potem začel notranji element - v našem primeru a?

ja notranji element se zažne 5px od levega roba zunanjega elementa. In seveda slika zunanjega elementa mora po tem takem biti širine 5px in no-repeat.

Poizkusi enkrat, tako kot sem jaz napisal. Paziti moraš edino na to, kateri element se pojavlja kot block - npr a in span že ne, zato moraš dat parameter display:block ali inline-block.

Lahko tudi uporabiš margin-left v notranjem elementu kar bi moralo dati enak rezultat, a jaz se vedno, če je le to možno, poslužujem padding, ker ga vsi enako tretirajo.

#9Saj pravim, da je odvisno od gumba. Vsekakor se vedno naredi tako, da je čim manj elementov. Sem šel pogledat mojo kodo za nazaj. V enem primeru sem imel še en transparenten png čez vse, to me je malo zjebalo, ker sem pozabil kaj točno me je mučilo. Vedel pa sem, da ta metoda ni delala takrat.

#10jap, če želiš "vjugast" tranparent - asimetričen gradient, potem pa je potrebno vsaj tri elemente in nekaj CSS trikov kot npr. margin-left: -5px itd.

lp, mitja