Страница 1 из 11
Форум про uCoz » Раздел uCoz » Вопросы по uCoz » Таблица кто добавил файл на сайт
Таблица кто добавил файл на сайт
trem200
Дата: Воскресенье, 31.07.2016, 20:06 | Сообщение # 1
Проверенные
Сообщений:249
Награды: 1


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

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



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



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(19Kb) · 0915856.png(15Kb)
fanya
Дата: Воскресенье, 31.07.2016, 20:53 | Сообщение # 2
Vip
Сообщений:74
Награды: 0


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

попробуй вместо этого
Код
.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.07.2016, 20:54
trem200
Дата: Воскресенье, 31.07.2016, 21:12 | Сообщение # 3
Проверенные
Сообщений:249
Награды: 1


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

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

Может я что-то неправильно сделала?
Angerfist
Дата: Воскресенье, 31.07.2016, 21:46 | Сообщение # 4
Vip
Сообщений:618
Награды: 18


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


No regrets
trem200
Дата: Воскресенье, 31.07.2016, 21:50 | Сообщение # 5
Проверенные
Сообщений:249
Награды: 1


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


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

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


Буду рад, хотя бы буду в курсе как всё правильно сделать smile
Angerfist
Дата: Воскресенье, 31.07.2016, 21:51 | Сообщение # 6
Vip
Сообщений:618
Награды: 18


Десерт, в середине
Код
<div class="col-lg-6">
разве не заметил?
какого фига ячейка вне таблицы
Код
<td width="200" valign="top">
?
и уж раз нравится свой рип то
Код
line-height:1.42857143;
посмотри
в учебнике хтмл что это


No regrets

Сообщение отредактировал Angerfist - Воскресенье, 31.07.2016, 21:51
Angerfist
Дата: Воскресенье, 31.07.2016, 21:53 | Сообщение # 7
Vip
Сообщений:618
Награды: 18


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

No regrets

Сообщение отредактировал Angerfist - Воскресенье, 31.07.2016, 21:53
trem200
Дата: Воскресенье, 31.07.2016, 21:55 | Сообщение # 8
Проверенные
Сообщений:249
Награды: 1


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


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

Насчёт каркаса буду очень рад, а то я не очень в css и html понимаю happy
Angerfist
Дата: Воскресенье, 31.07.2016, 22:55 | Сообщение # 9
Vip
Сообщений:618
Награды: 18


Десерт, вообщем я по быстрому накидал подобие того шаблона, но на 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.08.2016, 00:14
Angerfist
Дата: Воскресенье, 31.07.2016, 23:09 | Сообщение # 10
Vip
Сообщений:618
Награды: 18


Десерт, и ещё по поводу hr я не ищу сложных путей поэтому линии с помощью
этого тега нарисовал, если хочешь поменять стиль линии вот Ссылка 1 и Ссылка 2


No regrets

Сообщение отредактировал Angerfist - Воскресенье, 31.07.2016, 23:11
Kosten
Дата: Воскресенье, 31.07.2016, 23:43 | Сообщение # 11
Администраторы
Сообщений:12681
Награды: 39


Цитата Angerfist ()
поводу hr

Можно вывести любой, но мне больше стандартный нравится, на сайте где то прописывал стили на разные.


Форум про uCoz » Раздел uCoz » Вопросы по uCoz » Таблица кто добавил файл на сайт
Страница 1 из 11
Поиск: