• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Таблица кто добавил файл на сайт
Таблица кто добавил файл на сайт
trem200
Воскресенье, 31 Июля 2016 | Сообщение 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 | Сообщение 2
Оффлайн
Vip
Сообщений:112
Награды: 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 Июля 2016, 20:54
Страна: (RU)
trem200
Воскресенье, 31 Июля 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:433
Награды: 4
fanya, Вот откуда я брал.

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

Может я что-то неправильно сделала?
Страна: (RU)
Angerfist
Воскресенье, 31 Июля 2016 | Сообщение 4
Оффлайн
Vip
Сообщений:767
Награды: 21
Десерт, то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.


No regrets
Страна: (RU)
trem200
Воскресенье, 31 Июля 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.


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

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


Буду рад, хотя бы буду в курсе как всё правильно сделать smile
Страна: (RU)
Angerfist
Воскресенье, 31 Июля 2016 | Сообщение 6
Оффлайн
Vip
Сообщений:767
Награды: 21
Десерт, в середине
Код
<div class="col-lg-6">
разве не заметил?
какого фига ячейка вне таблицы
Код
<td width="200" valign="top">
?
и уж раз нравится свой рип то
Код
line-height:1.42857143;
посмотри
в учебнике хтмл что это


No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 21:51
Страна: (RU)
Angerfist
Воскресенье, 31 Июля 2016 | Сообщение 7
Оффлайн
Vip
Сообщений:767
Награды: 21
biggrin ладно я смотреть фильм День независимости, может после каркас кода попроще чтоб мог стили менять, делать такую же форму?

No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 21:53
Страна: (RU)
trem200
Воскресенье, 31 Июля 2016 | Сообщение 8
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Angerfist ()
ладно я смотреть фильм День независимости, может после каркас кода попроще чтоб мог стили менять, делать такую же форму?


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

Насчёт каркаса буду очень рад, а то я не очень в css и html понимаю happy
Страна: (RU)
Angerfist
Воскресенье, 31 Июля 2016 | Сообщение 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)
Angerfist
Воскресенье, 31 Июля 2016 | Сообщение 10
Оффлайн
Vip
Сообщений:767
Награды: 21
Десерт, и ещё по поводу hr я не ищу сложных путей поэтому линии с помощью
этого тега нарисовал, если хочешь поменять стиль линии вот Ссылка 1 и Ссылка 2


No regrets

Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 23:11
Страна: (RU)
Kosten
Воскресенье, 31 Июля 2016 | Сообщение 11
Онлайн
Администраторы
Сообщений:44268
Награды: 70
Цитата Angerfist ()
поводу hr

Можно вывести любой, но мне больше стандартный нравится, на сайте где то прописывал стили на разные.
Страна: (RU)
Форум » Веб-разработка » Вопросы про uCoz » Таблица кто добавил файл на сайт
  • Страница 1 из 1
  • 1
Поиск: