Problem z buttonami w css

Witajcie. Chciałem na swojej stronie zamienić linki do podstron na buttony zrobione w css.
Więc stworzyłem classe nazwałem ją link_button. Generalnie wyszło to tak:

.link_button {
 padding: 8px;
text-align: center;
    text-decoration: none;
    font: 14px/100% Jazz LET, fantasy;
 background-color: #ababab;
box-shadow: 0 0 10px #4dc95f, 0 0 40px #379945, 0 0 10px #43de59;
   border: none;
   border-radius: 18px;
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease 0s;
   cursor: pointer;
   outline: none;
}

A efekt tego taki:

No ale stwierdziłem, że fajnie by było gdyby między tymi buttonami były odstępy. Więc do kodu powyższego dodałem:

display: inline-block;

Niestety efekt jest taki:

Jak widać na zdjęciu w dwóch buttonach nie ma odstępu.

Kod tabeli z tymi linkami wygląda tak:

<? $fn = substr($_SERVER['PHP_SELF'], strrpos($_SERVER['PHP_SELF'], "/") + 1); ?>
<tr><td class=outer align=center>
<table class=main width=850 cellspacing="0" cellpadding="5" border="0">
<tr>

<? if($CURUSER){?><td align="center" class="link_button"><a href=/>1</a></td>
<td align="center" class="link_button"><a href=/xx.php>2</a></td>
<td align="center" class="link_button"><a href=/xxx.php><font color=blue>3</font></a></td>
<td align="center" class="link_button"><a href=/xxx.php>4</a></td><?}?>
<? if (!$CURUSER) { ?>
<td align="center" class="link_button"><a href=xx.php>5</a> / <a href=/xx.php>6</a>
</td>
<? } else { ?>
<td align="center" class="link_button"><a href=xx.php>7</a></td>
<? } ?>
<? if($CURUSER){?><td align="center" class="link_button"><a href=/xx.php>8</a></td>
<td align="center" class="link_button"><a href=/xx.php>9</a></td><?}?>
<td align="center" class="link_button"><a href=/xx.php><font color=red>10</font></a></td>
<td align="center" class="link_button"><a href=/xx.php><font color=red>11</font></a></td>
<? if($CURUSER){?><td align="center" class="link_button"><a href=/xx.php>12</a></td>
<td align="center" class="link_button"><a href=/xx.php><font color=#cc6600>13</font></a></td>
<td align="center" class="link_button"><a href=/xx.php>14</a></td>
<td align="center" class="link_button"><a href=/xx.php>15</a></td><?}?>
</tr>
</table>
</td>

Zauważyłem, że problem występuje po <?}?> Próbowałem dać :

<?}?><p>

Ale bez efektu, kiedy dałem

 <?}?><br>

to efekt przyniosło zrobił się odstęp ale wszystkie buttony zjechały mi o wiersz niżej ;/

Dla jasności wszystko co jest w <? if($CURUSER){?> nie widzi tego osoba niezalogowana.
A co jest w <? if (!$CURUSER) { ?> nie widzi tego osoba zalogowana.

Ma ktoś jakiś pomysł ?

<td align="center" class="link_button">

Stylujesz komórki tabeli (<td>), a nie linki (<a>) - dlaczego?

Podstawowym rozwiązaniem na ostylowanie odstępu między elementami jest margin.

Zaiste, dodaj margin nawet jak klikniesz "zbadaj" na buttonie w tym wątku "Odpowiedz" to masz margin dodany do buttona (tylko nie wiem po co z !important, skoro bez tego też działa, no le nie to jest przedmiotem tejże dyskusji) ;)

Sensacyjny Sebastian napisał(a):

<td align="center" class="link_button">

Stylujesz komórki tabeli (<td>), a nie linki (<a>) - dlaczego?

Podstawowym rozwiązaniem na ostylowanie odstępu między elementami jest margin.

A jak poprawnie powinno to być zapisane? By stylować linki?

Seysso napisał(a):

A jak poprawnie powinno to być zapisane? By stylować linki?

Jeśli chcesz stylować linki, to styluj po prostu linki:

<a href="/xx.php" class="link_button">opis linka</a>

Ajajajaj właśnie zobaczyłam, jak to stylowanie u ciebie wygląda:

<font color=red>10</font>

Weź wyrzuć ten podręcznik HTML-a z drugiej połowy lat 90-tych, którego obecnie używasz i poczytaj coś współczesnego, najlepiej od razu o HTML5.

Panowie zrobiłem tak:

<tr><td class=outer align=center>
<table class=main width=850 cellspacing="0" cellpadding="5" border="0">
<tr>

<div>
<? if($CURUSER){?> <a class="link_button" href=/>nazwa</a>
<a class="link_button" href=/xxx.php>Torrenty</a>
<a class="link_button" href=/xxx.php><font color=blue>nazwa</font></a>
<a class="link_button" href=/xxx.php>nazwa</a><?}?>
</div>
</tr>
</table>
</td>
</tr>

A w stylu tak:

.link_button {
display: inline-block;
margin-left: 2px;
padding: 8px;
text-align: center;
    text-decoration: none;
    font: 12px/100% tahoma, arial, helvetica, sans-serif;
 background-color: #8fa3b8;
box-shadow: 0 0 10px #4dc95f, 0 0 40px #379945, 0 0 10px #43de59;
   border: solid 1px;
   border-radius: 18px;
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease 0s;
   cursor: pointer;
   outline: none;
}

.link_button:Hover{
 padding: 8px;

 background-color: #8fa3b8;
 box-shadow: 1px 1px 1px white;
   border: solid 1px;
   border-radius: 18px;
   transition: all 0.3s ease 0s;
   cursor: pointer;
   outline: none;
   -webkit-box-shadow: 0px 0px 5px 3px rgba(240,248,255);
-moz-box-shadow: 0px 0px 5px 3px rgba(240,248,255);
box-shadow: 0px 0px 5px 3px rgba(240,248,255);
}

.link_button:active {
    position: relative;
    top: 1px;
}

Czyli dodałem margin-left: 2px; efekt tego jest taki, że te buttony które były ze sobą złączone zrobiły odstęp ale pozostałe, odstęp zrobiły jeszcze większy.

Seysso napisał(a):

efekt tego jest taki, że te buttony które były ze sobą złączone zrobiły odstęp ale pozostałe, odstęp zrobiły jeszcze większy.

Nie rozumiem.

Seysso napisał(a):

Panowie zrobiłem tak:

<tr><td class=outer align=center>
<table class=main width=850 cellspacing="0" cellpadding="5" border="0">
<tr>

<div>
<? if($CURUSER){?> <a class="link_button" href=/>nazwa</a>
<a class="link_button" href=/xxx.php>Torrenty</a>
<a class="link_button" href=/xxx.php><font color=blue>nazwa</font></a>
<a class="link_button" href=/xxx.php>nazwa</a><?}?>
</div>
</tr>
</table>
</td>
</tr>

1. To nie jest poprawny HTML. Bezpośrednimi potomkami <tr> mogą być tylko <td> oraz <th>.

2. Pomijając powyższe - gdybyś zastąpił <div> przez <td>, to miałbyś wszystkie linki w jednej komórce tabeli - byłaby to tabela 1x1. Pytanie więc - na co w ogóle ona?

Ok nie chcę zakładać nowego tematu dlatego napiszę w tym.
Zrobiłem menu w css na kompie wygląda ok wszystko równo itd ale jest problem z urządzeniami mobilnymi. Menu robi się w 2 liniach zamiast w jednej. Jak by się nie mieściło. Kod w css wygląda tak:

.hoverable {
 margin-left: 20px;
 margin-right: 20px;
 display: inline-block;
 backface-visibility: hidden;
 vertical-align: middle;
 position: relative;
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 tranform: translateZ(0);
 transition-duration: .3s;
 transition-property: transform;
}
a.hoverable{
  color: white;
}
.hoverable:before {
 position: absolute;
 pointer-events: none;
 z-index: -1;
 content: '';
 top: 100%;
 left: 5%;
 height: 10px;
 width: 90%;
 opacity: 0;
 background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 80%);
 background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 80%);
 /* W3C */
 transition-duration: 0.3s;
 transition-property: transform, opacity;
}
.hoverable:hover, .hoverable:active, .hoverable:focus {
  transform: translateY(-1px);
}
.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before {
  opacity: 1;
  transform: translateY(-1px);
}
@keyframes bounce-animation {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.bounce {
  animation-name: bounce-animation;
  animation-duration: 2s;
}
/*everything below here is just setting up the page, so dont worry about it */
@media (min-width: 768px) {
  .navbar {
    font-size: 13px;
    text-align: center !important;
    float: none;
    display: inline-block;
 }
}
body {
  background-color: black;
  font-weight: 600;
  text-align: center !important;
  color: black;
}
nav {
  background: none !important;
  text-transform: uppercase;
}
nav li {
  margin-left: 3em;
  margin-right: 3em;
}
nav li a {
 transition: .5s color ease-in-out;
}
.page-title {
  opacity: .75 !important;
}

Zmniejszenie marginów nic mi nie da bo brzydko się zrobi na kompie. Jest jakiś sposób by to na tel poprawnie wyświetliło?

PS: dodanie do kodu na stronie

<meta name="viewport" content="width=device-width, initial-scale=0.1">

Też przynosi połowiczny efekt bo co prawda na telefonie menu mieści się w jednej lini ale zmniejsza mi wszystkie tabele na stronie bardzo.