Таблица кто добавил файл на сайт - Форум

Воскресенье, 31 Июля 2016, 20:06 | Сообщение 1

Проверенные

Сообщений:433

Награды: 4

У меня возник такой вот вопрос. На сайт я поставил таблицу, которая в материале будет показывать кто добавил файл, сколько раз скачали, но оно выглядит не очень красиво.

Оригинал откуда я рипал, а именно изображение как должно выглядеть.

А вот в итоге, что у меня вышло.

HTML

Код

<td width="200" valign="top"> <table class="table" style="margin:0">

<tbody><tr>
<th style="width:40%">Автор:</th>
<td>$AUTHOR_NAME$</td>
</tr>
<tr>
<th>Версия:</th>
<td>$OTHER1$
</td>
</tr>
<tr>
<th>Перевод:</th>
<td>$OTHER2$
</td>
</tr>
<tr>
<th>Просмотры:</th>
<td>$READS$</td>
</tr>
</tbody></table></td><td valign="top"><div class="col-lg-6">
<table class="table" style="margin:0">
<tbody><tr>
<th style="width:40%">Опубликовал:</th>
<td><a href="$PROFILE_URL$">$USER$</a></td>
</tr>
<tr>
<th>Размер:</th>
<td><?if($FILE_SIZE$)?>$FILE_SIZE$<?endif?><?if($RFILE_SIZE$)?>$FILE_SIZE$<?endif?></td>
</tr>
<tr>
<th>Язык мода:</th>
<td><?if($LOADS$)?>$LOADS$<?endif?></td>
</tr>
<tr>
<th>Загрузок:</th>
<td><?if($LOADS$)?>$LOADS$<?endif?></td>
</tr>
</tbody></table>
</div>
</td>
</table>

CSS

Код

th{text-align:left;}
.table{width:100%;max-width:100%;margin-bottom:20px;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #CCCCCC;}

Ссылка на материал, чтобы наглядно всё показать: Сайт

Прикрепления: 6850894.png (19.4 Kb) · 0915856.png (14.8 Kb)

Страна: (RU)

fanya

Воскресенье, 31 Июля 2016, 20:53 | Сообщение 2

Vip

Сообщений:112

Награды: 0

« 14 »

Десерт, сайт закрыт на тех работы...

попробуй вместо этого

Код

.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #CCCCCC;}

это поставить

Код

.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:-1px solid #CCCCCC;}

либо же балуйся с этим padding:8px

Сообщение отредактировал
fanya - Воскресенье, 31 Июля 2016, 20:54

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:12 | Сообщение 3

Проверенные

Сообщений:433

Награды: 4

fanya, Вот откуда я брал.

Сайт откуда был позаимствован код

Может я что-то неправильно сделала?

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:46 | Сообщение 4

Vip

Сообщений:767

Награды: 21

Десерт, то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.

No regrets

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:50 | Сообщение 5

Проверенные

Сообщений:433

Награды: 4

Цитата Angerfist (

)

то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.

Значит я не всё зацепил? Надо быть внимательнее. Я просто в CSS и HTML не мастер, и пытаюсь разобраться.

Цитата Angerfist (

)

если есть желание могу завтра накидать тебе дивную структуру

Буду рад, хотя бы буду в курсе как всё правильно сделать smile

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:51 | Сообщение 6

Vip

Сообщений:767

Награды: 21

Десерт, в середине

Код

разве не заметил?
какого фига ячейка вне таблицы

Код

?
и уж раз нравится свой рип то

Код

line-height:1.42857143;

посмотри
в учебнике хтмл что это

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 21:51

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:53 | Сообщение 7

Vip

Сообщений:767

Награды: 21

ладно я смотреть фильм День независимости, может после каркас кода попроще чтоб мог стили менять, делать такую же форму?

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 21:53

Страна: (RU)

Воскресенье, 31 Июля 2016, 21:55 | Сообщение 8

Проверенные

Сообщений:433

Награды: 4

Цитата Angerfist (

)

Смотри фильм, фильм классный.

Насчёт каркаса буду очень рад, а то я не очень в css и html понимаю happy

Страна: (RU)

Воскресенье, 31 Июля 2016, 22:55 | Сообщение 9

Vip

Сообщений:767

Награды: 21

Десерт, вообщем я по быстрому накидал подобие того шаблона, но на div-ах:
1.Сделал адаптивным, ширина блоков 48% при сужении 2-ой блок уйдёт под 1-ый
2.Стили свои добавляй, цвет шрифта и размер там всё ясно, цвет фона я сделал
#F8F8FF но если хочешь оставить фон сайта убери этот параметр, ну и операторы
я так от балды добавил, меняй на свои...
Вообщем основа а там коверкай её как хочешь:

Код

<div class="material">
<div class="material-info">
<div class="material-block">
<hr>
<p><b>Категория:</b><?if($CATEGORY_NAME$)?> <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?></p>
<hr>
<p><b>Версия:</b> $OTHER1$</p>
<hr>
<p><b>Перевод:</b> $OTHER2$</p>
<hr>
<p><b>Просмотры:</b> $READS$</p>
</div>
<div class="material-block">
<hr>
<p><?if($USERNAME$)?><b>Добавил:</b> <a href="$PROFILE_URL$">$USERNAME$</a><?endif?></p>
<hr>
<p><b>Размер:</b> <?if($FILE_SIZE$)?>$FILE_SIZE$<?endif?><?if($RFILE_SIZE$)?>$FILE_SIZE$22<?endif?></p>
<hr>
<p><?if($COMMENTS_URL$)?><a href="$COMMENTS_URL$"><b>Комментарии:</b> ($COMMENTS_NUM$)</a><?endif?></p>
<hr>
<p><b>Загрузок:</b> $LOADS$</p>
</div>
</div>
</div>

<style>
.material {
text-align: center;
}
.material-info {
display: inline-block;
width: 100%;
background-color: #F8F8FF;
border-radius:5px;
}
.material-block {
color: #000000;
font-size: 14px;
text-align:left;
display: block;
float: left;
margin: 5px;
width: 48%;
}
</style>

No regrets

Сообщение отредактировал
Angerfist - Понедельник, 01 Августа 2016, 00:14

Страна: (RU)

Воскресенье, 31 Июля 2016, 23:09 | Сообщение 10

Vip

Сообщений:767

Награды: 21