|
Таблица кто добавил файл на сайт
|
|
| trem200 | Воскресенье, 31 Июля 2016, 20:06 | Сообщение 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;}
Ссылка на материал, чтобы наглядно всё показать: Сайт
| | [ RU ] |
| |
| fanya | Воскресенье, 31 Июля 2016, 20:53 | Сообщение 2 |
| Десерт, сайт закрыт на тех работы...
попробуй вместо этого
Код .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, 21:12 | Сообщение 3 |
|
| fanya, Вот откуда я брал.
Сайт откуда был позаимствован код
Может я что-то неправильно сделала?
| | [ RU ] |
| |
| Angerfist | Воскресенье, 31 Июля 2016, 21:46 | Сообщение 4 |
| Десерт, то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.
No regrets
| | [ RU ] |
| |
| trem200 | Воскресенье, 31 Июля 2016, 21:50 | Сообщение 5 |
|
| Цитата Angerfist (  ) то что ты рипнул это полный бред, во первых не всё выцепил, в дивы таблицы завёрнуты, во вторых
к этим дивам идут классы стилей, в третьих сотри эту табличную вёрстку нахрен от неё уже все давно избавляются...
Сверстай на дивах или посмотри на сайте в каталоге, если есть желание могу завтра накидать тебе дивную структуру.
Значит я не всё зацепил? Надо быть внимательнее. Я просто в CSS и HTML не мастер, и пытаюсь разобраться.
Цитата Angerfist ( ) если есть желание могу завтра накидать тебе дивную структуру
Буду рад, хотя бы буду в курсе как всё правильно сделать 
| | [ RU ] |
| |
| Angerfist | Воскресенье, 31 Июля 2016, 21:51 | Сообщение 6 |
|
| Десерт, в середине Код <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, 21:53 | Сообщение 7 |
|
|  ладно я смотреть фильм День независимости, может после каркас кода попроще чтоб мог стили менять, делать такую же форму?
No regrets
Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 21:53 | | [ RU ] |
| |
| trem200 | Воскресенье, 31 Июля 2016, 21:55 | Сообщение 8 |
|
| Цитата Angerfist ( ) ладно я смотреть фильм День независимости, может после каркас кода попроще чтоб мог стили менять, делать такую же форму?
Смотри фильм, фильм классный.
Насчёт каркаса буду очень рад, а то я не очень в css и html понимаю 
| | [ RU ] |
| |
| Angerfist | Воскресенье, 31 Июля 2016, 22:55 | Сообщение 9 |
|
| Десерт, вообщем я по быстрому накидал подобие того шаблона, но на 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, 23:09 | Сообщение 10 |
|
| Десерт, и ещё по поводу hr я не ищу сложных путей поэтому линии с помощью
этого тега нарисовал, если хочешь поменять стиль линии вот Ссылка 1 и Ссылка 2
No regrets
Сообщение отредактировал
Angerfist - Воскресенье, 31 Июля 2016, 23:11 | | [ RU ] |
| |
| Kosten | Воскресенье, 31 Июля 2016, 23:43 | Сообщение 11 |
| Цитата Angerfist ( ) поводу hr
Можно вывести любой, но мне больше стандартный нравится, на сайте где то прописывал стили на разные.
| | [ RU ] |
| |
