Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Вид материалов CSS стиль (Как создать динамический блок через CSS)
Вид материалов CSS стиль
Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 1 | 20:35:35
Привет. Подскажите как создать целый блок через CSS
У меня есть группа картинок:

Левый верхний угол
Правый верхний угол
Верхняя горизонтальная полоска
Левый нижний угол
Правый нижний угол
Нижняя горизонтальная полоска
Левая вертикальная полоска
Правая вертикальная полоска

Середину будут заливать цветом.

Помогите начать делать блок а дальше я подхвачу
killbit
Сообщений: 317
Репутация: 104

Сообщение # 2 | 21:11:25
все зависит от задач.если в одном блоке то можно попробовать
так , но полоски бордером
Код

<!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>
Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 3 | 21:22:17
Дело в том что у полосок есть тень и без них стиль будет утерян

Добавлено (24 Мар 2015, 21:16:19)
---------------------------------------------
Я взял стандартный шаблон сайта и из правого блока меню, хочу сделать динамический блок для вида материалов.
Взял нарезал углы и полоски которые будут повторять края. А как теперь их все в месте собрать не помню. Как то делал, кажись переделывал выпадающие меню укоз. Где то были там эти трудные коды.

Добавлено (24 Мар 2015, 21:22:17)
---------------------------------------------
Вот думаю может сделать таблицу в которой 9 ячеек и по краям сделать фоны а в середине залить просто цветом.
Но таблица будет очень тяжёлая и учитывая что это будет вид материалов которых может быть очень много, сайт станет тяжёлым.

Как такое сделать на Css не знаю, помню прошлый раз возился дня 3 пока здесь не помогли исправить и всё отредактировать.

killbit
Сообщений: 317
Репутация: 104

Сообщение # 4 | 21:24:22
полоски это рисунки ? или box-shadow?
может не стоит заморачиваться, а склеить все в одно фоновое изображение? smile

Добавлено (24 Мар 2015, 21:24:22)
---------------------------------------------
можно блоками и позиционированием.можно таблицей)

Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 5 | 21:52:25
Ну фоновое будет весить много, и как его сделать динамичным? Описание будет разной длины и все новости будут разного размера.

Добавлено (24 Мар 2015, 21:27:11)
---------------------------------------------
Хотя можно сделать 3 полоски верхняя, средняя и нижняя

Добавлено (24 Мар 2015, 21:29:00)
---------------------------------------------
Как тогда сделать это?

Верхняя фиксированной ширины и высоты
Затем средняя ширина фикс. высота динам.
и нижняя фикс. высота и фикс. ширина

Добавлено (24 Мар 2015, 21:30:16)
---------------------------------------------
А ещё в верхней будет название новости и рейтинг
а в нижней свойства новости, просмотры комменты дата.

Добавлено (24 Мар 2015, 21:52:25)
---------------------------------------------
Сделал три полоски
как сделать динамический класс и как его реализовать?

killbit
Сообщений: 317
Репутация: 104

Сообщение # 6 | 21:56:54
что такое динамический класс ? покажите хоть примерно что хотите) вы вид материалов лепите?
Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 7 | 22:30:30
Да делаю вид материалов. Динамический значит сам принимают размер. Ну как резиновый блок. Я туда описание а он сам размер высоты подберёт.

вот 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)
---------------------------------------------
Вот как теперь вывести код так что бы post-boy повторялся и тем самым был динамической высоты.

Добавлено (24 Мар 2015, 22:02:23)
---------------------------------------------
Создать таблицу?

Добавлено (24 Мар 2015, 22:03:54)
---------------------------------------------
В верхнюю полоску мне надо добавить НАЗВАНИЕ и Рейтинг (звёзды)
В средней будет описание и картинки ссылки и прикрепления
В нижней будет свойство - просмотры, дата, количество комментов.

Наверно надо таблицу ?

Добавлено (24 Мар 2015, 22:04:25)
---------------------------------------------
Или под название описание и свойство тоже лучше Div стиль написать?

Добавлено (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)
---------------------------------------------
Так как сделать что бы класс post-body повторялся ?

killbit
Сообщений: 317
Репутация: 104

Сообщение # 8 | 23:32:21
а дивы причем?у вас же таблица вроде
div.post-body
Цитата Freeliman ()
Так как сделать что бы класс post-body повторялся ?

вы же ему высоту задали
height:1px
Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 9 | 23:50:47


Как убрать эту муть ? Текст вылезает за края если я сам на строку не переступаю. Ну в редакторе типа зажал и вот фигня (
Прикрепления: 1653251.jpg(128Kb)
Freeliman
Сообщений: 36
Репутация: 0

Сообщение # 10 | 23:58:11


А вот скопировал текст и вставил и всё это через визуальный html редактор Ucoz
Прикрепления: 2745747.jpg(274Kb)
killbit
Сообщений: 317
Репутация: 104

Сообщение # 11 | 00:01:31
вот по теме

Код
http://htmlbook.ru/css/overflow
http://htmlbook.ru/css/white-space


---------------------------------------------
ну и про padding можно вспомнить

Добавлено (25 Мар 2015, 00:01:31)
---------------------------------------------
редактор зло)
Сообщение отредактировал killbit - Среда, 25 Мар 2015, 00:06:17
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Вид материалов CSS стиль (Как создать динамический блок через CSS)
Страница 1 из 11
Поиск: