Войти
  1. ВКонтакте
  2. Facebook
  1. » » » многоугольные боксы
Новые публикации Скрыть панель справаПоказать панель справа

многоугольные боксы

2013-01-20T13:51:52+04:00 2013-01-30T23:18:45+04:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 13:51, 20.01.2013
Уважаемые мастера css, помогите, пожалуйста! Облазил уже всё что мог и до сих пор не могу разобраться как нарисовать вот такую фигуру! Мне нужно делать бокс в виде папки как показано на рисунке в правом верхнем углу.

Заранее благодарю!
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 23:09, 20.01.2013
может тут что найдешь
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 17:53, 21.01.2013
Спасибо за отклик, но вопрос не решился. Или я может чего не понимаю! Может есть какой-нибудь способ скрыть определённую область бокса?
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 23:01, 21.01.2013
сделай картинкой и не мучайся
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 5 отправлено 16:46, 22.01.2013
Нашёл способ!!!

<div id="content">

<div id="topline">
</div>

</div>

style:

body {
padding:0;
margin:0;
background:#8a8a8a;} здесь обращаем внимание на цвет фона страницы

#content {
background:#262944;
border: 2px solid #fff;
overflow:inherit; самая загвоздка здесь, до этого указывал overflow:hidden; что не позволяло использовать margin: -2px 0 0 -2px;
border-radius: 5px; }

добавляем полосу внутри блока "content"

#topline {
background:#8a8a8a; здесь такой же цвет как у фона страницы
width:800px; даём длину
height:40px; даём ширину
border-bottom: 2px solid #fff; важно также сделать обводку в нужном месте (в данном примере внизу и справа)
border-right: 2px solid #fff;
margin: -2px 0 0 -2px; и главное задать положение блока "topline" для того, чтобы он скрыл верхнюю и левую обводку в нужных местах блока "content"
border-radius: 0 0 5px 0; и задать скругление}

Так вроде всё сказал! Сам не мастер, но думаю кому-нибудь это пригодится! Всем спасибо!

Последний раз редактировал walterpistol 16:48, 22.01.2013
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 6 отправлено 14:48, 23.01.2013
А нет, ребята, эта фигня не работает, я ошибся!
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 7 отправлено 00:36, 24.01.2013

walterpistol (22.01.2013, 16:46) писал:body {
padding:0;
margin:0;
background:#8a8a8a;} /*здесь обращаем внимание на цвет фона страницы*/

#content {
background:#262944;
border: 2px solid #fff;
overflow:inherit; самая загвоздка здесь, до этого указывал overflow:hidden; что не позволяло использовать margin: -2px 0 0 -2px;/*это тут лишние*/
border-radius: 5px; }

добавляем полосу внутри блока "content"

#topline {
background:#8a8a8a; здесь такой же цвет как у фона страницы /*зачем добавлять такой же цвет блока если он и так прозрачный, и примет цвет по умолчанию от body*/
width:800px; даём длину /*'это вообще глупость которая постоянно у новичков на уме. Длина контента, текста в основном определяется рамкой ширина сайта+ отступы, и бордеры*/
height:40px; даём ширину/*читай выше), а если ты напишешь длинный текст? Куда по твоему он будет деватся? Правильно он вылезет за края, так как не надо указывать точную ширину, по умолчанию свойство растянет твой блок как надо.*/
border-bottom: 2px solid #fff; важно также сделать обводку в нужном месте (в данном примере внизу и справа)
border-right: 2px solid #fff;
margin: -2px 0 0 -2px; и главное задать положение блока "topline" для того, чтобы он скрыл верхнюю и левую обводку в нужных местах блока "content"
border-radius: 0 0 5px 0; и задать скругление}



вообщем читай книги по css, и больше практикуйся)
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 8 отправлено 17:32, 25.01.2013
<div id="content">
<div id="topline">
</div>
<div id="post">
Каникулы, как всегда, пролетели слишком быстро, и наступила самая нелюбимая школьниками пора - третья четверть. По утрам темно, на улице мерзкая погода, а учителя словно сговорились и заваливают домашними заданиями так, будто ЕГЭ уже завтра. Родители, как правило, не склонны идти на компромисс - «у тебя же были каникулы, давай, учись». Но важно не только хорошенько отдохнуть в праздники, но и взять правильный настрой на учебу. Особенности пропедевтического интегрированного курса естествознания для 5-6 классов курса в плане соотношения содержательной и процессуальной сторон обучения сказываются и на системе диагностики учебных достижений учащихся.
Каникулы, как всегда, пролетели слишком быстро, и наступила самая нелюбимая школьниками пора - третья четверть. По утрам темно, на улице мерзкая погода, а учителя словно сговорились и заваливают домашними заданиями так, будто ЕГЭ уже завтра. Родители, как правило, не склонны идти на компромисс - «у тебя же были каникулы, давай, учись». Но важно не только хорошенько отдохнуть в праздники, но и взять правильный настрой на учебу.

Прогулки и развлечения
Если в каникулы вы с ребенком не вылезали из музеев и с лыжных прогулок, это еще не значит, что с началом третьей четверти нужно забросить все развлечения. Как же детям любить школу, если, кроме учебы, у них и жизни-то нет? Психологи уверены: выгуливать ребенка необходимо с той же регулярностью, что и собаку. А не раз в неделю по выходным.

- Очень важно гулять с ребенком хотя бы час-полтора в день, - считает Марьяна Безруких, директор Института возрастной физиологии. - Без этого просто невозможно. Найти это время - задача родителей. Ученик младших классов должен гулять часа два - два с половиной в день. Особенно хорошо выйти с ребенком минут на сорок перед сном. В третьей четверти дети беспокойно спят, плохо встают и с трудом засыпают. Это все - характерные признаки перенапряжения.
Кроме того, не стоит переносить все запланированные развлечения на субботу и выходные. Иначе контраст с понедельником будет особенно удручающим, и ребенок будет чувствовать себя уставшим уже в начале учебной недели.

- Часто родители говорят: никаких мультиков и развлечений, пока не сделаешь уроки, - отмечает эксперт. - И дети приходят после уроков, кушают и сразу садятся за домашнее задание. Решают сперва самые сложные задачки, потом берутся за те, что попроще. А подход должен быть совершенно другим: сперва отдых и только потом понемногу браться за домашнюю работу, оставляя все самое сложное на конец.
Совет 1
Чтобы чадо дрыхло без задних ног и вставало без капризов, нужно гулять с ним хотя бы по часу в день. А чтобы дневник не пестрел двойками, стоит перекрывать доступ к любимым играм, но делать это в меру разумно.
</div>
</div>

style:

@charset "utf-8";
/* CSS Document */
body { padding:0; margin:0; background:#FFFF00;}
#content { background:#00FF00; width: 900px; margin: 10px auto; border: 3px solid #fff; overflow: inherit; }
#topline { background:#FFFF00; width: 700px; height:40px; border-bottom: 3px solid #fff; border-right:solid 3px #fff; margin: -3px 0 0 -3px; float:left;} можно добавить float:left для этого блока и при добавлении текста в контент он будет оставаться в рамках #content.
#post { width: 400px;} но тогда не получается к этому блоку добавить float:left, в этом случае текст выйдет за рамки #content.

Уважаемый arrow25, я как бы не давно начал заниматься разработкой дизайна, точнее начал только учиться, но мне кажется, что для блока #topline необходимо задавать такой же цвет как и у body, иначе он просто не перекроет верхний край блока #content таким образом, как это показано на рисунке.

Я конечно понимаю, что есть другой способ сделать такую форму, но пока я ещё его не выяснил.

Также я очень рад, что у нас завязалось общение с Вами, arrow25, я думаю в скором времени мы решим эту проблему. Спасибо за отклик!
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 9 отправлено 22:46, 25.01.2013
вообщем вот на скорую руку накидал нечто подобное, но я уверен что есть решение и лучше, просто долго не заморачивался, в боевых условиях не проверял, это тебе так точка опоры)
HTML code:
  1. <!doctype html>
  2. <html lang="ru">
  3. <head>
  4.         <meta charset="utf-8" />
  5.        
  6.        
  7.        
  8.         <style>
  9.                 .w-folder{
  10.                
  11.                 width:150px;
  12.                 height:100px;
  13.                 background:#ccc;
  14.                 padding:5px;
  15.                 }
  16.                 .top{
  17.                 width:50px;
  18.                 height:15px;
  19.                 float:right;
  20.                 background:white;
  21.                 border:#0CA3FF 2px solid;
  22.                 border-bottom:none;
  23.                 margin-top:-99px;
  24.                 font-size:7px;
  25.                 text-align:center;
  26.                 color:red;
  27.                 }
  28.                 .body{
  29.                 background:white;
  30.                 border:#0CA3FF 2px solid;
  31.                 margin-top:15px;
  32.                 width:146px;
  33.                 height:80px;
  34.                 clear:both;
  35.                
  36.                 }
  37.                 .body p{
  38.                 margin:2px 5px;
  39.        
  40.                
  41.                 }
  42.         </style>
  43.        
  44. </head>
  45. <body>
  46. <div class="w-folder">
  47. <div class="body">
  48. <p>тут какой-то текст, возможно даже много строчный</p>
  49.        
  50. </div>
  51. <div class="top">заголовок</div>
  52. </div>
  53.  
  54. </body>
  55. </html>

Последний раз редактировал arrow25 23:00, 25.01.2013
Абитуриент
  1. Офлайн
  2. Посетители
  3. 6 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 10 отправлено 07:40, 26.01.2013
Спасибо! Проверил, но не в боевых условиях)))) Работает! Буду применять!
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 11 отправлено 23:18, 30.01.2013
если блоки будут себя не правильно, или плохо вести)) сделай в конце(после того как выведешь все папки пустой <div style "clear: both;"></div> прям эту строку и вставь, потому что у меня там возможно ошибка есть и пару не нужных селекторов.
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011