У мене є проблема, яку я просто не можу вирішити, я тільки почав вивчати html / css / php, тому, будь ласка, зрозумійте мою новинку :)
Тож уявіть собі веб-сайт, на цьому веб-сайті у вас є 8 кнопок (кожна - конкретний вибір).
Я не хочу розміщувати їх однаково внизу та вбік один від одного. Тож щось подібне:
[] []
[] []
[] []
[] []
Але моя проблема полягає в тому, що коли я відмовляюсь від позиції стилю css, кнопка займає певну позицію, проте href кнопок більше не працюватиме. У чому проблема?
Можливо, є спосіб встановити верх і правоклас .btn? Я так не думаю, тому що я хочу, щоб кнопки 8 мали різні позиції. Я думаю, що "style =" верх; право; "втручається у клас.
<html>
<head>
<style type="text/css">
body{
background-image: url("images/bg.jpg");
background-color: #844903;
}
.logo{
position: absolute;
top: 40px;
right: 850px;
}
h1{
position: absolute;
top: 250px;
right: 870px;
color: #a86b00;
}
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc477", endColorstr="#fb9e25",GradientType=0);
background-color:#ffc477;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #eeb44f;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Courier New;
font-size:20px;
font-weight:bold;
padding:17px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #cc9f52;
}
.btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb9e25", endColorstr="#ffc477",GradientType=0);
background-color:#fb9e25;
}
.btn:active {
position:relative;
top:1px;
</style>
<title></title>
</head>
<body>
<h1>Please pick a location:</h1>
<div class="logo"><img src="/images/images/logo.jpg" alt="logo"></div>
<table>
<tr>
<td style="top: 450px; right: 1200px;" href="#" class="btn">1 - 3</td>
</tr>
<tr>
<td style="top: 450px; right: 1050px;" href="#" class="btn">4 - 6</td>
</tr>
<tr>
<td style="top: 540px; right: 1200px;" href="#" class="btn">7 - 9</td>
</tr>
<tr>
<td style="top: 540px; right: 1050px;" href="#" class="btn">10+</td>
</tr>
</table>
</body>
</html>
Дуже дякую за ваш час!
-М
Відповіді:
1 для відповіді № 1<table>
<tr>
<td><button><a href="#">1</a></button></td>
<td><button><a href="#">2</a></button></td>
</tr>
<tr>
<td><button><a href="#">3</a></button></td>
<td><button><a href="#">4</a></button></td>
</tr>
<tr>
<td><button><a href="#">5</a></button></td>
<td><button><a href="#">6</a></button></td>
</tr>
<tr>
<td><button><a href="#">7</a></button></td>
<td><button><a href="#">8</a></button></td>
</tr>
</table>
Ось так.
РЕДАКТУВАННЯ: якщо ви хочете стилювати кнопки, дайте їм клас або ідентифікатор і використовуйте це у вашому CSS-файлі. тобто ви можете використовувати поля та підкладки, щоб контролювати, де знаходиться ваша кнопка.
0 для відповіді № 2
спробуйте використовувати display:block і відображення display:inline-block . по-друге, ви повинні використовувати <a> тег. поставити <a> тега всередині a <td> тег з href майно. щось на зразок <td><a href="#">7</a></td>
0 для відповіді № 3
@odedta:
Здається, дуже логічно те, що ви показали, проте коли я спробую це, він стискає мої кнопки:
<table>
<tr>
<td><button class="btn"><a href="participants.html">Table 2</a></button></td>
<td><button class="btn"><a href="participants.html">Table 4</a></button></td>
</tr>
<tr>
<td><button class="btn"><a href="participants.html">Table 7</a></button></td>
<td><button class="btn"><a href="participants.html">Table 8</a></button></td>
</tr>
<tr>
<td><button class="btn"><a href="participants.html">F1.12</a></button></td>
<td><button class="btn"><a href="participants.html">F3.02</a></button></td>
</tr>
<tr>
<td><button class="btn"><a href="participants.html">E2.40</a></button></td>
<td><button class="btn"><a href="participants.html">E2.42</a></button></td>
</tr>
</table>