|
|
Модератор форума: Yuri_G |
Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Вид материалов CSS стиль (Как создать динамический блок через CSS) |
Вид материалов CSS стиль |
Привет. Подскажите как создать целый блок через CSS
У меня есть группа картинок: Левый верхний угол Правый верхний угол Верхняя горизонтальная полоска Левый нижний угол Правый нижний угол Нижняя горизонтальная полоска Левая вертикальная полоска Правая вертикальная полоска Середину будут заливать цветом. Помогите начать делать блок а дальше я подхвачу |
все зависит от задач.если в одном блоке то можно попробовать
так , но полоски бордером Код <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: #fff; } .block { background: url( рисунок.gif) 0 0 no-repeat, url(рисунок.gif) 0px 100% no-repeat, url(рисунок.gif)100% 100% no-repeat, url(рисунок.gif) 100% 0 no-repeat; border:1px dotted; height:900px; } .center p{ text-align:center; display:block; margin-left:20%; margin-right:20%; } </style> </head> <body> <div class="block"> <div class="center"><p>что то в центре</p></div> </div> </body> </html> |
Дело в том что у полосок есть тень и без них стиль будет утерян
Добавлено (24 Мар 2015, 21:16:19) Добавлено (24 Мар 2015, 21:22:17) |
Ну фоновое будет весить много, и как его сделать динамичным? Описание будет разной длины и все новости будут разного размера.
Добавлено (24 Мар 2015, 21:27:11) Добавлено (24 Мар 2015, 21:29:00) Добавлено (24 Мар 2015, 21:30:16) Добавлено (24 Мар 2015, 21:52:25) |
Да делаю вид материалов. Динамический значит сам принимают размер. Ну как резиновый блок. Я туда описание а он сам размер высоты подберёт.
вот css который я накидал Код div.post-header {background:url('/images/post/post-header.jpg') no-repeat;height:40px;width:510px;margin:0px 0 0 0;padding:0px 0px 0 0;} div.post-body {background:url('/images/post/post-body.jpg') no-repeat;height:1px;width:510px;margin:5px 0 0 0;padding:0px 0px 0 0;} div.post-down {background:url('/images/post/post-down') no-repeat;height:26px;width:510px;margin:5px 0 0 0;padding:0px 0px 0 0;} Добавлено (24 Мар 2015, 22:01:35) Добавлено (24 Мар 2015, 22:02:23) Добавлено (24 Мар 2015, 22:03:54) Добавлено (24 Мар 2015, 22:04:25) Добавлено (24 Мар 2015, 22:14:33) Код <table border="1" cellpadding="" cellspacing="" style="width: 510px;"> <tbody> <tr> <td class="post-header">НАЗВАНИЕ</td> </tr> <tr> <td class="post-body">ОПИСАНИЕ</td> </tr> <tr> <tdclass="post-down">СВОЙСТВО</td> </tr> </tbody> </table> Добавлено (24 Мар 2015, 22:24:44) Добавлено (24 Мар 2015, 22:30:30) |
Как убрать эту муть ? Текст вылезает за края если я сам на строку не переступаю. Ну в редакторе типа зажал и вот фигня ( Прикрепления:
1653251.jpg
(127.9 Kb)
|
Прикрепления:
2745747.jpg
(274.2 Kb)
|
вот по теме
Код http://htmlbook.ru/css/overflow http://htmlbook.ru/css/white-space --------------------------------------------- ну и про padding можно вспомнить Добавлено (25 Мар 2015, 00:01:31) --------------------------------------------- редактор зло) Сообщение отредактировал killbit - Среда, 25 Мар 2015, 00:06:17
|
| |||
| |||