Stała szerokość buttona?

[BlackHat]

Hej, mam taki problem:

2 buttony, pod 2 obrazkami. Chodzi o to, by oba buttony miały stałą szerokość - jak obrazki, 200px, mimo, że tekst nie będzie zajmował całej szerokości + wycentrowanie tego tekstu.

Niby pierdoła, ale nie daję sobie rady

tak to wygląda teraz + to jak bym chciał:

kod html:

<table style="border:0px;text-align:center;">
<tr>
<td style="width:300px;">
<p><img src="addgame.gif"></p>
<p><a class="button1" href="#">text1</a></p>
</td>
<td style="width:300px;">
<p><img src="addtext.gif"></p>
<p><a class="button2" href="#">text2</a></p>
</td>
</tr>
</table>

oraz css:

body {
font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
}

a.button1 {
text-decoration: none;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
margin: 13px 9px 0;
background-color: #444;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 -1px rgba(0, 0, 0, .2);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
border: 1px solid #000;
}

a.button1 {
background-color: #399A35;
-webkit-animation: green-glow 2s infinite;
-moz-animation: green-glow 2s infinite;	
}

a.button2 {
text-decoration: none;
color: #fff;
font-size: 11px;
line-height: 14px;
font-weight: bold;
padding: 5px 10px;
margin: 13px 9px 0;
background-color: #444;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 -1px rgba(0, 0, 0, .2);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset;
border: 1px solid #000;
}

a.button2 {
background-color: #ff2a00;
-webkit-animation: green-glow 2s infinite;
-moz-animation: green-glow 2s infinite;	
}

a.button1:hover, a.button2:hover {
background-color: #fca317;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111;
}

a.button1:hover, a.button2:hover {
margin-top: 14px;
}

jakieś pomysły?

[Xenobi]

Witam,

Dlaczego kodujesz to na tabelkach ?

Wydaje mi sie, ze to powinno pomoc :

a.button1 {
  width:100%;
}

[BlackHat]

width 100% nic nie zmienia.

na tabelkach ponieważ nie radziłem sobie z divami obok siebie.

[schollu]

zrób sobie graficzny przycisk i nie będziesz miał problemów.

Takie rozwiązanie będzie najlepsze, ponieważ nie wszystkie przeglądarki czytają zaokrąglenia (w tym wypadku przycisków).

[BlackHat]

chciałbym użyć tego rozwiązania w kilku miejscach więc wolałbym kodem.

[freestylers]

a.button1 {
  width:180px;
  display:block;
  padding: 5px 10px;
  margin: 0 auto;

powinno pomóc

[BlackHat]

blisko, przerzuciłem się z retro-tabelek na divy, dodałem block i poszło, dzięki

[dfaktor]

width 100% nic nie zmienia.

na tabelkach ponieważ nie radziłem sobie z divami obok siebie.

Wiem, że sobie już poradziłeś, ale na przyszłość polecam nauczyć się projektowania na siatce.

https://960.gs