Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как сделать вот такие блоки?
 
 автор: Footer   (30.01.2011 в 14:37)   письмо автору
 
 

Вот образец: http://nullspace.ru/uploads/posts/2009-09/1253415506_screen.png

На этой странице есть слева и справа блоки, например Навигация по сайту, Календарь, реклама. Как их сделать? Нужно такие же использовать на своём сайте. Систему управления сайтом использовать не нужно. Нужно просто знать, как вот такие блоки сделать. И именно чтобы были именно такие блоки и чтобы тоненькая рамочка тоже была, как вот в этом примере. Напишите, плиз, код такого блока.

  Ответить  
 
 автор: Агамемнон   (30.01.2011 в 15:01)   письмо автору
 
   для: Footer   (30.01.2011 в 14:37)
 

http://ktonanovenkogo.ru/category/html/div-verstka-html - для новичков самое то.

  Ответить  
 
 автор: Footer   (30.01.2011 в 15:41)   письмо автору
 
   для: Агамемнон   (30.01.2011 в 15:01)
 

А всё-таки. Мне нужно создать вот такой блок или контейнер, как в примере. Там же код, наверное, небольшой. Напишите, плиз, конкретный код.

  Ответить  
 
 автор: elenaki   (30.01.2011 в 18:25)   письмо автору
 
   для: Footer   (30.01.2011 в 15:41)
 

http://studioad.ru/index/0-10

  Ответить  
 
 автор: Footer   (30.01.2011 в 18:39)   письмо автору
 
   для: elenaki   (30.01.2011 в 18:25)
 

Мне не нужно верстать полностью сайт на дивах. Думаю основную разметку сделать при помощи таблиц, а вот эти блоки вставить при помощи дивов. Нужен вот именно такой блок как в примере. Один в один. Как его сделать? Напишите, пожалуйста, просто код.

  Ответить  
 
 автор: elenaki   (30.01.2011 в 18:54)   письмо автору
 
   для: Footer   (30.01.2011 в 18:39)
 

тут так - или все на таблицах или все на дивах.

  Ответить  
 
 автор: Footer   (30.01.2011 в 18:57)   письмо автору
 
   для: elenaki   (30.01.2011 в 18:54)
 

Почему? А по-другому разве никак? Ну тогда всё на таблицах. Мне с таблицами проще работать. Как при помощи таблиц этот блок можно реализовать? Там для закругления тонкой рамки нужны картинки? Может приведёте пример такого сайта или этого в хтмл?

  Ответить  
 
 автор: elenaki   (30.01.2011 в 19:05)   письмо автору
 
   для: Footer   (30.01.2011 в 18:57)
 

ах, так все это только для закругленных углов?
тут много способов - и CSS (без картинок) и javascript и картинки ...

http://www.softtime.ru/forum/srch.php?id_forum=4&name=%F3%E3%EB%FB&numberthemes=30&srchwhere=1&id_forum=4&logic=1&send=%CD%E0%E9%F2%E8

  Ответить  
 
 автор: Агамемнон   (30.01.2011 в 19:07)   письмо автору
 
   для: Footer   (30.01.2011 в 18:57)
 

Закругление углов:
http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html,
http://www.webmasters.by/articles/html-coding/104-css3-border-radius-property.html,
http://web-standards.ru/articles/cross-browser-rounded-corners/

  Ответить  
 
 автор: Footer   (30.01.2011 в 19:09)   письмо автору
 
   для: Агамемнон   (30.01.2011 в 19:07)
 

Нет. Не только. Нужен вот один в один такой блок на своём сайте. Вот, например, блок навигация. нужен такой блок. Как его сделать? Чтобы и дизайн такой, и рамочка с закруглениями была и вообще вот чтобы всё также выглядел этот блок? Может поможете код написать?

  Ответить  
 
 автор: elenaki   (30.01.2011 в 19:17)   письмо автору
 
   для: Footer   (30.01.2011 в 19:09)
 

а это называется "нарежьте мне этот макет, сверстайте мне страницу". в чем сложность?
найдите, как делаются блоки с круглыми углами (вам тут дали кучу ссылок), вставьте внутрь таблицу с названием раздела в первой строке и фоном-картинкой и ссылками в остальных. что тут помогать?

  Ответить  
 
 автор: Footer   (30.01.2011 в 19:19)   письмо автору
 
   для: elenaki   (30.01.2011 в 19:17)
 

спасибо.

  Ответить  
 
 автор: Footer   (30.01.2011 в 19:32)   письмо автору
 
   для: Footer   (30.01.2011 в 19:19)
 

И опять же. Получается всё придётся верстать на дивах? Нужно верстать на таблицах. Запутался совсем.

  Ответить  
 
 автор: Footer   (30.01.2011 в 19:36)   письмо автору
 
   для: Footer   (30.01.2011 в 19:32)
 

И ещё. В примерах уже есть готовые изображения, картинки с уголками. Они серого цвета. А мне нужны белого.

  Ответить  
 
 автор: Yuriev   (31.01.2011 в 13:00)   письмо автору
 
   для: elenaki   (30.01.2011 в 18:54)
 

>тут так - или все на таблицах или все на дивах.

Почему, скажите пожалуйста?

  Ответить  
 
 автор: Красная_шляпа   (31.01.2011 в 13:13)   письмо автору
 
   для: Footer   (30.01.2011 в 14:37)
 


div - контейнер для выравнивания по центру
____div шапка
____div навигация
____table
________tr
____________td левая колонка
____________td основное содержимое
____________td правая колонка
____div ноги


За такую бы вёрстку я взял тыщи 2

  Ответить  
 
 автор: TavRoX   (31.01.2011 в 20:46)   письмо автору
 
   для: Красная_шляпа   (31.01.2011 в 13:13)
 

что за извращение див/табилца верстка
если делать таблицой то таблицой, див так див,
попробовав див я о таблицах забыл вообще

  Ответить  
 
 автор: Footer   (31.01.2011 в 22:32)   письмо автору
 
   для: TavRoX   (31.01.2011 в 20:46)
 

Так всё таки. Вот этот блок нужно сверстать. Помогите, плиз. Давайте всё сделаем на таблицах. Или если можно этот блок сделать на дивах и потом его вставить в мой табличный дизайн, то помогите сделать это на дивах.

Тут же наверняка десятки профессионалов сидят, для которых сверстать один такой блок - дело десяти минут. Ребят, помогите.

  Ответить  
 
 автор: Агамемнон   (31.01.2011 в 23:16)   письмо автору
13 Кб
 
   для: Footer   (31.01.2011 в 22:32)
 

Бедный,бедный Footer!Ну,ладно,так и быть:берем отсюда http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html вариант Блок с закругленными углами и сплошной рамкой.
<div class="corners"><div><div><div><div>
     Содержание блока
</div></div></div></div></div>
- тут ничего не меняем.

Тут кое-чего меняем:
.corners {
      background: #fff; /* белый цвет фона блока */
      border: 1px solid #b5c8d8; /* цвет рамки */
}
.corners div {
      background: url(t-l.png) top left no-repeat; 
      position: relative;
      margin: -1px; /* значение указываем равным толщине рамки */
}
.corners div div {
      background: url(t-r.png) top right no-repeat; 
      margin: 0px;
}
.corners div div div {
      background: url(b-r.png) bottom right no-repeat; 
}
.corners div div div div {
      background: url(b-l.png) bottom left no-repeat; 
}

Готово.Блок <div class="corners"> множим и запихиваем куда надо,например,как в варианте Красной шляпы:в ячейки таблицы.

  Ответить  
 
 автор: Footer   (16.02.2011 в 11:10)   письмо автору
 
   для: Агамемнон   (31.01.2011 в 23:16)
 

А вот там картинки, которые используются, они же серо-белые. То есть получается рамка будет с внешней стороны в сером цвете. А нужен белый. Получается нужно менять картинки?

  Ответить  
 
 автор: Агамемнон   (16.02.2011 в 12:13)   письмо автору
 
   для: Footer   (16.02.2011 в 11:10)
 

Угу,в любом графическом редакторе.

  Ответить  
 
 автор: Footer   (16.02.2011 в 18:35)   письмо автору
 
   для: Агамемнон   (16.02.2011 в 12:13)
 

Я не умею. Может поможите? Нужен белый фон. То есть чёрным должна быть только рамка.

  Ответить  
 
 автор: Footer   (16.02.2011 в 18:50)   письмо автору
111.5 Кб
 
   для: Footer   (16.02.2011 в 18:35)
 

Попробовал сделать как вы тут советовали, не получается то, что хотелось. Прикладываю скриншот сайта, на который нужно ориентироваться. Вот там справа например есть блок календарь. Ну и остальные блоки. Мне нужен код любого такого блока. То есть вот этот блок состоит из тонкой рамочки с чуть-чуть закругленными углами, названия блока на синем фоне, чуть смещённого сверху от рамочки и текста, который располагает на всю ширину почти в рамочек. Мне нужен код любого одного такого блока. Для шарящих в этом специалистов, сверстать такой код ведь не сложно. Помогите, плиз.

  Ответить  
 
 автор: Footer   (17.02.2011 в 12:33)   письмо автору
 
   для: Footer   (16.02.2011 в 18:50)
 

Никто не поможет?

  Ответить  
 
 автор: Агамемнон   (17.02.2011 в 18:13)   письмо автору
 
   для: Footer   (17.02.2011 в 12:33)
 

Завтра скину.

  Ответить  
 
 автор: Косорылый   (17.02.2011 в 18:43)   письмо автору
 
   для: Footer   (17.02.2011 в 12:33)
 

Может стоит открыть код страницы и вкусить тайну данного дизайна?

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования