| |
 40.6 Кб |
|
| | Страница соостоит из трех колонок, в одной из которых имеется текст и изображение (Смотрите http://wowa55.pz9.ru/1-80.html ). При этом текст наползает на изображение на величину отступа, установленного в text-indent. Причем, этот неприятный дефект существует только в Опера (скриншот, слово "потом").
Как бы от него избавиться?
<!DOCTYPE html>
<html>
<head>
<title>Проверка верстки. С графикой. </title>
<meta name="description" content="Бизнес ">
<meta name="keywords" content="Россия">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ОЧИЩАЕМ УСТАНОВКИ БРАУЗЕРА ПО УМОЛЧАНИЮ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: middle;
background: transparent;
font:15px Arial,sans-serif;
}
#Contour_page {max-width:1000px; margin:0 auto; padding: 1%; background-color:#FFF;}
/* КОНТЕНТ ВЦЕЛОМ */
#Content {margin: 0 auto; padding-top:0; display:table;}
#string_content ul {display:table-row;}
#Left_column{width:28%; display:table-cell; vertical-align:top; background-color:#9FF}
#Central_column{width:50%; display:table-cell; vertical-align:top; padding: 0 2% 0 2%; background-color: #FCF}
#Right_column{width:20%;display:table-cell; vertical-align:top; background-color:#FF9}
.text_p {font-size:100%; text-indent:7%; text-align:justify; }
.img_center { width:40%; height:auto; padding:0 2% 0 2%;}
</style>
</head>
<body>
<div id="Content">
<div id="string_content">
<ul>
<li id="Left_column">-</li>
<li id="Central_column"> <!-- Начало кода средней колонки -->
<div class="text_p">
<p>Материалы публикуются на сайте в следующем порядке.</p>
<p>Сначала их пишут,
<img src="/1-my-images/328904408.jpg" style="float:right;" class="img_center" />
потом исправляют ошибки, потом регистрируют,
потом модерируют, потом публикую и
уже после всего этого их читают.</p>
</div>
</li> <!-- Конец кода средней колонки -->
<li id="Right_column">-</li>
</ul>
</div> <!-- Конец id="string_content" -->
</div> <!-- Конец id="Content" -->
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Владимир55
(08.01.2014 в 15:04)
| | | img нужно вынести из параграфа.
<div class="text_p">
<p>Материалы публикуются на сайте в следующем порядке.</p>
<img src="/1-my-images/328904408.jpg" style="float:right;" class="img_center" />
<p>Сначала их пишут,
потом исправляют ошибки, потом регистрируют,
потом модерируют, потом публикую и
уже после всего этого их читают.</p>
</div>
|
Внутри параграфов блочные элементы размещать НЕ ЕСТЬ ГУД! | |
| |
|
|
| |
|
|
| |
для: AlexShag
(09.01.2014 в 12:54)
| | | А картинка, как бы, не блочный элемент. И дело не в ней.
Это видно, когда уменьшить окно браузера. Тогда текст вылазит на правую колонку | |
| |
|
|
| |
|
|
| |
для: Yuriev
(09.01.2014 в 14:41)
| | | Ну не знаю, не знаю. У меня помогло для Оперы именно вынос картинки за абзац. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(09.01.2014 в 14:47)
| | | Какая у Вас версия Опера? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(09.01.2014 в 16:18)
| | | Последняя, 12.16
А Вы пробовали выносить картинку за абзац? По моему так нужно делать в любом случае, даже если бы и не глючило.
http://alexshag.16mb.com/index3.htm
Вот пример. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 12:29)
| | | Вроде бы уже давно решили, что табличная верстка это плохо, даже с таким громким завуалированным названием, как "Макет сайта без CSS и JavaScript" | |
| |
|
|
| |
|
|
| |
для: Valick
(10.01.2014 в 12:57)
| | | Кто решил? Шо за бред? Кто то ляпнул и все как попки подхватили? Как удобно так и надо делать. А не тупо вестись на то как "решили".
Это во первых. А во вторых МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ, а не про табличную вёрстку. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 13:02)
| | | удобно это было лет 10-15 назад, да и не умели по другому, да и сейчас некоторые свое неумение скрывают за словами "мне так удобно"
__
в свое время сайт http://www.csszengarden.com/ произвел на меня неизгладимое впечатление
а тут все дизайны этого сайта http://www.mezzoblue.com/zengarden/alldesigns/ контент у всех одинаковый (!) меняется только файл css, попробуйте сделать такое таблицами... | |
| |
|
|
| |
|
|
| |
для: Valick
(10.01.2014 в 13:26)
| | | Вам правильно говорят - таблицы никто не отменял. И все разговоры об их "неэтичности и архаичности" в коде ведутся в соновном вэб-юниорами, только-только освоившими CSS.
Для браузера нет абсолютно никакого напряра отрендерить таблицу.
Если она заменяет собой полсотни строк CSS, то почему бы ее не использовать? | |
| |
|
|
| |
|
|
| |
для: Deed
(10.01.2014 в 14:15)
| | | Только и утверждать, что "Для браузера нет абсолютно никакого напряра отрендерить таблицу." не стоит, если не понимать разницы вывода элементов в таблице и вне ее. | |
| |
|
|
| |
|
|
| |
для: Deed
(10.01.2014 в 14:15)
| | | таблицы никто не отменял, согласен, и нужны они для вывода табличных данных
Если она заменяет собой полсотни строк CSS, то почему бы ее не использовать?
чтобы заменить пол сотни строк CSS надо полторы тысячи строк на таблицах, в одних только вложениях таблиц в таблицы сами же себе "ноги переломаете"
все разговоры об их "неэтичности и архаичности" в коде ведутся в соновном вэб-юниорами, только-только освоившими CSS
это сугубо ваше мнение, я лично считаю, что все с точностью наоборот, качественная кросбраузерная верстка слоями гораздо сложнее для изучения, чем "верстка" таблицами | |
| |
|
|
| |
|
|
| |
для: Valick
(10.01.2014 в 13:26)
| | | МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ
МОЙ ПРИМЕР про КАРТИНКИ И АБЗАЦЫ | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 16:45)
| | | а это
Кто решил? Шо за бред? Кто то ляпнул и все как попки подхватили? Как удобно так и надо делать. А не тупо вестись на то как "решили".
про что?
и давай без капса, здесь глухих и тупых до недавнего времени небыло... | |
| |
|
|
| |
|
|
| |
для: Valick
(10.01.2014 в 17:10)
| | | Ну если нет тупых так читайте тему и суть моего ответа. Таблицы сами приплели вот и хлебайте. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 17:17)
| | | и где у вас там text-indent, о нем собственно и вопрос в заголовке темы ? | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 12:29)
| | | отлично. назад в 90-е. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(10.01.2014 в 12:29)
| | | Последняя, 12.16
Вот с этим и была проблема - и у меня 12.16! Только это отнюдь не последняя, а старая и ГЛЮЧНАЯ версия. Последняя версия - 18.0
И как только я версию обновил, глюк, явившийся предметом темы, исчез...
А Вы пробовали выносить картинку за абзац?
Код дает визуальный редактр, встроенный в ЦМС. Его вид невозможно изменить. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(11.01.2014 в 00:30)
| | | к счастью, на западе про этот браузер вообще практически никто не знает | |
| |
|
|
| |
|
|
| |
для: psychomc
(11.01.2014 в 00:43)
| | | сегодня поставил Оперу ради этой темы, лишний раз убедился что Опера говно, когда текст выделял на странице | |
| |
|
|
| |
|
|
| |
для: Valick
(11.01.2014 в 01:23)
| | | я бы вообще на месте Владимир55 не загонялся бы сильно о том, что не так отображается в Opera, у них там каких-то жалких ~1.5% процентов на рынке браузеров http://netmarketshare.com/ | |
| |
|
|
| |
|
|
| |
для: psychomc
(11.01.2014 в 02:06)
| | | я бы вообще на месте Владимир55 не загонялся бы сильно о том, что не так отображается в Opera
Оно конечно - доля этого браузере не велика. Но, поскольку это моя первая блочная верстка, то всякие косяки напрягают как бы в моральном плане.
Вы будете смеяться, но я скажу: для одной страницы, которую я столько времени верстаю, я сделал уже 87 вариантов верстки!... Но все равно пока еще нормально не получилось, хотя страница ничего сложного не имеет. | |
| |
|
|
| |
|
|
| |
для: Владимир55
(11.01.2014 в 00:30)
| | | Вот с этим и была проблема - и у меня 12.16! Только это отнюдь не последняя, а старая и ГЛЮЧНАЯ версия. Последняя версия - 18.0
А как Вы её получили, 18-ю то? Я говорю своей Опере "обновись" и она говорит что все самое последнее и версия 12.16 при этом. Вообще то Опера мне не нравится но зато она умеет отображать многоколоночный текст, а Фокс не умеет. Или Фокс тоже нужен 31 версии? :-)
А по поводу того что нельзя изменить текст - это полный изврат. Нахрен вообще эти ЦМС? Ни в жисть не буду ими пользоваться. | |
| |
|
|
