Непонятки с контейнерами <div>

Обсуждение смены дизайна, дополнительного функционала, SEO и т.п.

Модераторы: Xpycm, Koduc

Правила форума
ВНИМАНИЕ! Форум не является средством гарантированной поддержки клиентов и пользователей. Поэтому на быстрый ответ тут рассчитывать не нужно, как и на ответ вообще. Сотрудники отвечают по мере своих возможностей.

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

Непонятки с контейнерами <div>

Сообщение Leonaft » 04 дек 2016, 10:14

Здравствуйте, уважаемые, нужна помощь в решении такого вопроса.
На новой информационной странице, размещаю картинки и хочу их разделить по разным контейнерам, но столкнулся с такой непоняткой, в первом контейнере все в порядке, картинки располагаются внутри, а во втором контейнере, нивкакую картинки не хотят помещаться в контейнер, а располагаются как-бы вне его., вот так это выглядит на странице:
1.jpg
1.jpg (118.46 КБ) Просмотров: 17891

Что только не делал с кодом, все пересмотрел и перепробовал, но разницы в структуре контейнера не нашел между первым и вторым контейнером, кроме содержимого естественно. Привожу код, может кто укажет на мою ошибку?
Код: Выделить всё
<div style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); padding: 5px 10px;">Дополнительное меню<br />
<
a href="/menu/Блюда на банкет дополнительно к основному меню.pdf" target="_parent"><img alt="Блюда на банкет дополнительно к основному меню" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%91%D0%BB%D1%8E%D0%B4%D0%B0%20%D0%BD%D0%B0%20%D0%B1%D0%B0%D0%BD%D0%BA%D0%B5%D1%82%20%D0%B4%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%20%D0%BA%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%BC%D1%83%20%D0%BC%D0%B5%D0%BD%D1%8E" src="http://7.leonaft.ru/uploads/editor/623d4b775a19755860c907cf77352e6a.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Блюда на банкет дополнительно к основному меню" /></a><a href="/menu/Варианты банкетного меню.pdf" target="_parent"><img alt="Варианты банкетного меню" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B%20%D0%B1%D0%B0%D0%BD%D0%BA%D0%B5%D1%82%D0%BD%D0%BE%D0%B3%D0%BE%20%D0%BC%D0%B5%D0%BD%D1%8E" src="http://7.leonaft.ru/uploads/editor/1235dc88420da6eb9a7cd454f7731611.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px;" title="Варианты банкетного меню" /></a><img alt="Варианты поминального меню" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%92%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BC%D0%B8%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE%20%D0%BC%D0%B5%D0%BD%D1%8E" src="http://7.leonaft.ru/uploads/editor/614ec8219266e8f58c531fe7b33d1c92.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px;" title="Варианты поминального меню" /></a></div>


<
div style="background: rgb(238, 238, 238); border: 1px solid rgb(204, 204, 204); padding: 5px 10px;">Основное меню<br />
<
a href="/menu/Холодные и горячие закуски.pdf" target="_parent"><img alt="Холодные и горячие закуски" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%A5%D0%BE%D0%BB%D0%BE%D0%B4%D0%BD%D1%8B%D0%B5%20%D0%B8%20%D0%B3%D0%BE%D1%80%D1%8F%D1%87%D0%B8%D0%B5%20%D0%B7%D0%B0%D0%BA%D1%83%D1%81%D0%BA%D0%B8" src="http://7.leonaft.ru/uploads/editor/1c7db715c159962a1dd0e0ccb893bf8b.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Холодные и горячие закуски" /></a><a href="/menu/Пиво.pdf" target="_parent"><img alt="Пиво" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%9F%D0%B8%D0%B2%D0%BE" src="http://7.leonaft.ru/uploads/editor/13a85911e70a23d7ff7347878da97595.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Пиво" /></a><a href="/menu/Вторые блюда.pdf" target="_parent"><img alt="Вторые блюда" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%92%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0" src="http://7.leonaft.ru/uploads/editor/0bd6a4ed90bac4ef3f9fcd779bd48fe4.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Вторые блюда" /></a><a href="/menu/Напитки и десерты.pdf" target="_parent"><img alt="Безалкогольные напитки и десерты" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%91%D0%B5%D0%B7%D0%B0%D0%BB%D0%BA%D0%BE%D0%B3%D0%BE%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D0%BD%D0%B0%D0%BF%D0%B8%D1%82%D0%BA%D0%B8%20%D0%B8%20%D0%B4%D0%B5%D1%81%D0%B5%D1%80%D1%82%D1%8B" src="http://7.leonaft.ru/uploads/editor/fca3b1b084ef522f1ce1e8c8caaf4ac2.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Безалкогольные напитки и десерты" /></a><a href="/menu/Закуски к пиву.pdf" target="_parent"><img alt="Закуски к пиву" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%97%D0%B0%D0%BA%D1%83%D1%81%D0%BA%D0%B8%20%D0%BA%20%D0%BF%D0%B8%D0%B2%D1%83" src="http://7.leonaft.ru/uploads/editor/40ae4dc302c93ce4528a8dfc1c5919fb.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Закуски к пиву" /></a><a href="/menu/Вторые блюда Рыба и гарниры.pdf" target="_parent"><img alt="Вторые блюда из рыбы и гарниры" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%92%D1%82%D0%BE%D1%80%D1%8B%D0%B5%20%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%20%D0%B8%D0%B7%20%D1%80%D1%8B%D0%B1%D1%8B%20%D0%B8%20%D0%B3%D0%B0%D1%80%D0%BD%D0%B8%D1%80%D1%8B" src="http://7.leonaft.ru/uploads/editor/b9a490b2cc67e387b2d50042d9b4f040.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Вторые блюда из рыбы и гарниры" /></a><a href="/menu/Салаты.pdf" target="_parent"><img alt="Салаты" longdesc="http://7.leonaft.ru/infopages/backend/main/%D0%A1%D0%B0%D0%BB%D0%B0%D1%82%D1%8B" src="http://7.leonaft.ru/uploads/editor/7f1cf1ce2ed30a86a64caeff35ab833d.jpg" style="opacity: 0.9; width: 247px; height: 350px; margin: 5px; float: left;" title="Салаты" /></a></div>


Адрес страницы где наглядно можно посмотреть как выглядит: http://7.leonaft.ru/page/menyu-kafe-7-morej-7.html
*WRITE*
Аватара пользователя
Leonaft
Незнакомец
 
Сообщения: 24
Зарегистрирован: 03 окт 2016, 07:57
Откуда: Тула
Очки репутации: 0

Re: Непонятки с контейнерами <div>

Сообщение Xpycm » 04 дек 2016, 13:00

Здравствуйте.

После "Основное меню" добавьте "<br />" и уберите уже нафиг float:left из тэгов style элементов img. Если мне не изменяет память, img - инлайновый элемент.
Dropbox
Open Real Estate CMS: FAQ | FAQ 2 | FAQ 3
Изображение
Xpycm
Разработчик
Разработчик
 
Сообщения: 1592
Зарегистрирован: 30 дек 2011, 11:06
Откуда: Йошкар-Ола
Очки репутации: 50

Re: Непонятки с контейнерами <div>

Сообщение Leonaft » 04 дек 2016, 13:23

Xpycm писал(а):Здравствуйте.

После "Основное меню" добавьте "<br />" и уберите уже нафиг float:left из тэгов style элементов img. Если мне не изменяет память, img - инлайновый элемент.

Спасибо, но это отчасти помогло, т.к. сам контейнер остался меленьким и если поменять местами контейнеры, получается совсем всё печально
Снимок.JPG
Снимок.JPG (64.26 КБ) Просмотров: 17887
*WRITE*
Аватара пользователя
Leonaft
Незнакомец
 
Сообщения: 24
Зарегистрирован: 03 окт 2016, 07:57
Откуда: Тула
Очки репутации: 0

Re: Непонятки с контейнерами <div>

Сообщение Xpycm » 04 дек 2016, 13:32

Не укладывается в голове такой момент:
leonaft.ru - ваш сайт. Вроде как вы зарабатываете делая сайты.
Я вам сейчас помогаю заработать денег, а вы не желаете даже удалить все float: left и почитать основы html и css: http://htmlbook.ru/html

Предлагаю тогда такой вариант: вы можете написать нам и мы за дополнительную плату сделаем вам эту страницу "как нужно"
Dropbox
Open Real Estate CMS: FAQ | FAQ 2 | FAQ 3
Изображение
Xpycm
Разработчик
Разработчик
 
Сообщения: 1592
Зарегистрирован: 30 дек 2011, 11:06
Откуда: Йошкар-Ола
Очки репутации: 50

Re: Непонятки с контейнерами <div>

Сообщение Leonaft » 04 дек 2016, 14:42

Xpycm писал(а):Не укладывается в голове такой момент:
leonaft.ru - ваш сайт. Вроде как вы зарабатываете делая сайты.
Я вам сейчас помогаю заработать денег, а вы не желаете даже удалить все float: left и почитать основы html и css: http://htmlbook.ru/html

Предлагаю тогда такой вариант: вы можете написать нам и мы за дополнительную плату сделаем вам эту страницу "как нужно"

7.leonaft.ru сайт для друга, без оплаты. Ну впрочем не буду оправдываться. Спасибо за ценный совет.
P:S float: left наплодил движок Open Business Card, при вставке рисунков через стандартный редактор страниц. По этому не спешу его убрать, но раз вам будет легче от этого, я уберу.
PP:S и да, после того как убрал float: left, все встало как нужно, так что двойное спасибо за подсказку.
*WRITE*
Аватара пользователя
Leonaft
Незнакомец
 
Сообщения: 24
Зарегистрирован: 03 окт 2016, 07:57
Откуда: Тула
Очки репутации: 0

Re: Непонятки с контейнерами <div>

Сообщение Xpycm » 04 дек 2016, 14:59

Это форум - здесь оправдываться не нужно. Я лишь подтолкнул вас убрать таки все float :-)

Вставляет не движок, а визивиг редактор CKEditor (http://ckeditor.com/). В визивиг-редакторах вообще беда с лишними тэгами.

Совет: если вы собираетесь вводить на страницах более-менее сложную верстку, а не только править текста, то не используйте визивиг.
Как раз у нас есть рекомендации в одной из статей: https://monoray.ru/86-yii/115-yii-tips-chapter-19. Пункт 4 CViewAction. Статические страницы в Yii.
Dropbox
Open Real Estate CMS: FAQ | FAQ 2 | FAQ 3
Изображение
Xpycm
Разработчик
Разработчик
 
Сообщения: 1592
Зарегистрирован: 30 дек 2011, 11:06
Откуда: Йошкар-Ола
Очки репутации: 50


Вернуться в Вопросы и помощь по изменениям

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 4