Попробуйте сделать врезку чуть больше по высоте прозрачный низ - Веб-строительство

95

Ткач

5 июля 2008, 10:31

#21

psylosss, выравнивание редактировать надо просто

вот например

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)

126

psylosss

5 июля 2008, 10:36

#22

Ткач:
psylosss, выравнивание редактировать надо просто
вот например

Вот ваш пример при высокой врезке. Ошибка: статья не обтекает врезку, начиная со второго абзаца.

Веб-разработка. Сложные проекты. Проектирование. Проект-менеджмент. Стартапы.

184

Prior

5 июля 2008, 10:38

#23

psylosss:
Вот контрпример. Ошибка: заголовок обтекает вторую картинку, выровненную по правому краю, а не должен.

Тогда так возможно.

Ответы на вопрос - https://answers.net.pl

95

Ткач

5 июля 2008, 10:40

#24

psylosss, удаляем clear: both

получаем

кто наполнять будет, тот просто должен знать html, чтобы в зависимости от высоты врезки, выравнивания картинок и т.д., чтобы было красиво - редактировать стиль.

126

psylosss

5 июля 2008, 10:49

#25

Prior:
Тогда так возможно.

Стоит увеличить ширину статьи, и получаем ошибку. То же самое, если увеличить объем первого абзаца - он не будет обтекать статью.

Ткач:
psylosss, удаляем clear: both
получаем

При уменьшении объема 2 абзаца получаем ошибку: подзаголовок не обтекает врезку.

Туго идет 🚬 я на эту задачу тоже немало времени потратил :)

Есть свежие идеи? Возможно, JS подключить? :)

psylosss добавил 05.07.2008 в 14:51

psylosss:
кто наполнять будет, тот просто должен знать html, чтобы в зависимости от высоты врезки, выравнивания картинок и т.д., чтобы было красиво - редактировать стиль.

Не катит. Врезка динамическая, как и текст. Слишком серьезное ограничение. К тому же ширина экрана и т.п....

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

95

Ткач

5 июля 2008, 11:00

#26

psylosss, если картинки одинаковые по высоте, то можно задавать блоку в котором они минимальный экспрешн, тогда заголовок будет всегда под картинкой, хотя можно написать скрипт, который будет в зависимости от размера картинки высчитывать

126

psylosss

5 июля 2008, 11:03

#27

Ткач:
psylosss, если картинки одинаковые по высоте, то можно задавать блоку в котором они минимальный экспрешн, тогда заголовок будет всегда под картинкой

увы :( картинки тоже произвольные...

386

dkameleon

5 июля 2008, 12:05

#28

Есть вариант, не требующий особых знаний ХТМЛ от наполнителя, но только один блок, который частично перекрывает низ врезки, не обтекает её.

Как вариант, можно попробовать решать задачу автоматически яваскриптом.

В общем clear:both; можно заменить на display:table; для блока, в котором лежит картинка и текст абзаца.

Последующий заголовок будет идти ниже, не обтекая картинку, но это нарушит обтекание текста вокруг врезки.

Дизайн интерьера (http://balabukha.com/)

126

psylosss

5 июля 2008, 13:02

#29

dkameleon:
Есть вариант, не требующий особых знаний ХТМЛ от наполнителя, но только один блок, который частично перекрывает низ врезки, не обтекает её.

В этом случае (если я все правильно понял), достаточно принудительно сделать врезку чуть больше по высоте + прозрачный низ. Какова реализация?

Как вариант, можно попробовать решать задачу автоматически яваскриптом.

сейчас как раз думаю именно над этим вариантом

dkameleon:
В общем clear:both; можно заменить на display:table; для блока, в котором лежит картинка и текст абзаца.
Последующий заголовок будет идти ниже, не обтекая картинку, но это нарушит обтекание текста вокруг врезки.

щас пойду почитаю отличие display:block от display:table. Но что-то мне подсказывает, что в данном случае разницы не будет

Размер блоков на сайте Google - Главная страница Почти все страницы на

386

dkameleon

5 июля 2008, 16:26

#30

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<style type="text/css">
.t { display: table; }
</style>
</head>
<body>
<div style="width: 500px;">

<div id="vrezka" style="padding: 10px; background: rgb(255, 153, 153) none repeat scroll 0% 0%; float: right; width: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
Вакансии
<br/>
Разработчики<br/>
    * J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>

* J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
* J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
* J2ME приложения<br/>

    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
</div>


<p class="t">
<img src="6_files/556746_101x80.gif" style="float: left; margin-right: 5px;"/>
Яндекс — крупнейший российский портал.
</p>

<h3>Подзаголовок</h3>

<p class="t">
<img src="6_files/556746_101x80.gif" style="margin: 0pt 5px; float: right;"/>
Яндекс — крупнейший российский портал, предлагающий пользователям ключевые веб-сервисы.
</p>



<h3>Подзаголовок</h3>

<p class="t">
Яндекс — крупнейший российский портал, предлагающий пользователям
ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов
человек. В компании «Яндекс» работает более тысячи сотрудников в шести
российских и украинских офисах.</p>

<h3>Подзаголовок</h3>

<p>Яндекс — крупнейший российский портал, предлагающий пользователям
ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов
человек. В компании «Яндекс» работает более тысячи сотрудников в шести
российских и украинских офисах.</p>

</div>
</body>
</html>

dkameleon добавил 05.07.2008 в 20:32

psylosss:
В этом случае (если я все правильно понял), достаточно принудительно сделать врезку чуть больше по высоте + прозрачный низ.

Типа того, а если у врезки нет рамки, особенно внизу, а только фон, то можно пойти ещё дальше и эмулировать высоту врезки цветом общего фона, как бы автоматически подгоняя до края последнего перекрывающегося с ней блока:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<style type="text/css">
p {
	display: table;
	border: 1px dotted #0ff;
	background-color: #fff;
	margin: 0;
	padding: 10px 0;
}
h3 {
	background-color: #fff;
	margin: 0;
	padding: 20px 0;
}

</style>
</head>
<body>
<div style="width: 500px; background-color: rgb(255, 153, 153);">

<div id="vrezka" style="padding: 10px; background: rgb(255, 153, 153) none repeat scroll 0% 0%; float: right; width: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
Вакансии
<br/>
Разработчики<br/>
    * J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>

* J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
* J2ME приложения<br/>
    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
* J2ME приложения<br/>

    * Яндекс.Почта<br/>
    * Windows Mobile приложения
<br/>
</div>


<p><img src="6_files/556746_101x80.gif" style="float: left; margin-right: 5px;"/>
Яндекс — крупнейший российский портал.</p>

<h3>Подзаголовок</h3>

<p><img src="6_files/556746_101x80.gif" style="margin: 0pt 5px; float: right;"/>
Яндекс — крупнейший российский портал, предлагающий пользователям ключевые веб-сервисы.</p>



<h3>Подзаголовок</h3>

<p>Яндекс — крупнейший российский портал, предлагающий пользователям
ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов
человек. В компании «Яндекс» работает более тысячи сотрудников в шести
российских и украинских офисах.</p>

<h3>Подзаголовок</h3>

<p>Яндекс — крупнейший российский портал, предлагающий пользователям
ключевые веб-сервисы. Ежедневная аудитория Яндекса — восемь миллионов
человек. В компании «Яндекс» работает более тысячи сотрудников в шести
российских и украинских офисах.</p>

</div>
</body>
</html>

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

Google: E-E-A-T не является фактором ранжирования

Задачка на тему верстки (CSS)