Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 22.03.2012, 22:43   #1
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы Как реализовать DIVами?

Доброго вечера,
подскажите пожалуйста как реализовать CMS вот такие штуковины которые я обозначил на картинке цифрами 1 и 2. Если это возможно как сделать DIVами?

Заранее спасибо
Миниатюры
Как реализовать DIVами?-1.jpg  
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.03.2012, 22:48   #2
 
Аватар для Rotgar Sett
 
Сообщений: 662
FR (активность): 26,062

Доп. информация
По умолчанию

Покажи шаб в который ты хочешь это впихнуть. Дивами можно, свободно.
Rotgar Sett вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.03.2012, 22:52   #3
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы

шаблона ещё нет, как раз сейчас этим занимаюсь, делаю на joomla 2.5.3 точнее пытаюсь построить дизайн на стандартном шаблоне
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.03.2012, 22:55   #4
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы

вот в таком шаблоне хочу это реализовать
Вложения
Тип файла: zip beez_20.zip (259.4 Кб, 1 просмотров)
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.03.2012, 22:57   #5
 
Аватар для Rotgar Sett
 
Сообщений: 662
FR (активность): 26,062

Доп. информация
По умолчанию

Ну вообще тебе надо тупо вставить <div> </div> снизу и сверху блока с контентом. Присвоить правильные стилевые элементы, например, если использовался флоат, то надо будет очистить див, чтоб растягивался. Вообще htmlbook.ru в помощь, там все в подробностях.

П.С.
С телефона сижу, не могу скачать шаб. Попробуй сам, если не получится - пиши, разберемся
AntonV: сообщение полезно
Rotgar Sett вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
AntonV (22.03.2012)
Старый 22.03.2012, 23:07   #6
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы

Спасибо большое сейчас буду сидеть пробовать)
я просто в этом деле не силён

Добавлено через 54 минуты
Хочу в одном ДИВе это реализовать, но не могу понять как сделать отступ между верхней и нижней колонкой, дабы между ними можно было текст вставлять.
Делаю так, подскажите где ошибка, показывается только верхняя красная колонка.

Оффтоп:
.kolonka
{
width: 20px;
background: red;
padding: 5px;
padding-right: 200px;
float: left;


height: 300;


width: 20px;
background: black;
padding: 5px;
padding-right: 200px;
float: left;
}
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 23.03.2012, 00:49   #7
 
Аватар для neveRmind
 
Сообщений: 93
FR (активность): 1,600

Доп. информация
По умолчанию

ты немного неправильно структурировал стили, варианта два!

Либо ты разбиваешь блок на 3 блока с индвидуальным стилем типа

.kolonka_up - стиль верхней красной линии
{width: 20px;
background: red;
padding: 5px;
padding-right: 200px;
float: left;}

.kolonka - сама колонка
{height: 300;}

.kolonka_down -стиль нижней черной линии
{
width: 20px;
background: black;
padding: 5px;
padding-right: 200px;
float: left;
}


Либо ты в блоке верхние и нижние линии описываешь через border

.kolonka
{
border-top: 10px solid #ff0000; - верхняя граница красного цвета толщиной 10 пх


height: 300; - высота блока


border-top: 10px solid #000000; - нижняя граница черного цвета толщиной 10 пх
}

Оффтоп:
единственное, писал по памяти уже уходя в сон - могут быть ошибки, но суть логики я надеюсь передал. На край пиши в личку
AntonV: сообщение полезно
neveRmind вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
AntonV (23.03.2012)
Старый 23.03.2012, 11:28   #8
 
Аватар для neveRmind
 
Сообщений: 93
FR (активность): 1,600

Доп. информация
По умолчанию

Оффтоп:
.kolonka
{
border-top: 5px solid #ff0000; //- верхняя граница красного цвета толщиной 5 px
border-bottom: 5px solid #000000; //- нижняя граница черного цвета толщиной 5px
width: 10px; //- вот тут задаеться ширина блока, а не ширина линий!
border-top-width:25px ; // - вот так можно задать ширину линии

padding: 50px;
padding-right: 20px; // - эти отступы задаються на весь блок, не только на линии!
float: left;



}

Пишу сюда, так как не могу писать ЛС, скиллы не прокачаны))

точная инфа есть тут htmlbook .ru/css/border-top-width
neveRmind вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 23.03.2012, 16:47   #9
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы

почему то когда идут подряд
Оффтоп:
border-top: 5px solid #ff0000; //- верхняя граница красного цвета толщиной 5 px
border-bottom: 5px solid #000000; //- нижняя граница черного цвета толщиной 5px

почему то отображается только та которая стоит сверху, в данном случае красная
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 23.03.2012, 17:05   #10
 
Аватар для neveRmind
 
Сообщений: 93
FR (активность): 1,600

Доп. информация
По умолчанию

Либо ошибка -опечатка в символе, либо у тебя в коде встроенный стиль имеет приоритет!

Для примера накидал - точно работает!

Оффтоп:
<div style="border-top:10px solid #ff0000; border-bottom:4px solid #000000; height:200px;">Текст</div>
neveRmind вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
AntonV (23.03.2012)
Старый 23.03.2012, 17:25   #11
 
Аватар для AntonV
 
Сообщений: 323
FR (активность): 13,979

Доп. информация
По умолчанию Автор темы

да, спасибо большое всё работает, не могу только разобраться как установить фиксированную длину полосок
AntonV вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 23.03.2012, 17:34   #12
 
Аватар для DeTeron
 
Сообщений: 496
FR (активность): 10,040

Доп. информация
По умолчанию

Цитата:
Сообщение от AntonV Посмотреть сообщение
не могу только разобраться как установить фиксированную длину полосок
Довольно плавучая тема, я ,что бы не заморачиваться, использую фреймворки с 960 grid system, там все просто с длиной и использовать очень удобно.
DeTeron вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
AntonV (23.03.2012)
Старый 23.03.2012, 17:41   #13
 
Аватар для neveRmind
 
Сообщений: 93
FR (активность): 1,600

Доп. информация
По умолчанию

Цитата:
Сообщение от AntonV Посмотреть сообщение
да, спасибо большое всё работает, не могу только разобраться как установить фиксированную длину полосок
Длина полосок зависит от длины самого блока, задается свойством width, если тебе нужна разная длина полосок - то это реализуется через отдельные стили для каждой полосы или как вариант вырисовывать линии через <hr>, c описанием нужной длины и цвета
neveRmind вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
AntonV (23.03.2012)
Ответ

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 3706 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать "Вставить фото онлайн"? Denis3410 DLE 2 14.03.2012 23:09
Как реализовать подачу объявлений на ДЛЕ? SMMhit DLE 9 30.01.2012 11:06
как реализовать автоматическое скачивание файла Denssss Программирование 5 07.04.2011 11:12
Как реализовать выпадающее меню? jessica Joomla 1 03.07.2010 15:22
Как реализовать на Джумле 1.5 закрытые разделы? 19-9 Joomla 3 30.01.2010 17:42

Текущее время: 14:45. Часовой пояс GMT +3.