pizzZ

Проблема решена. Изменили размер зеленого блока по высоте, и сделали его inline-block

Больше вариантов нет?

К сожалению не работает. Я уменьшил ширину до 220 И поменял текст на Белила были очень белыми Получилось: В опере самое то. Если убрать отступ 10px то блок redBox будет прижиматься к самому тексту. В ие, и crome блок redBox уехал за страницу. В ff блок прилипает не к тексту

Данный вариант, практически ни чем не отличается от того, к которому я пришел. В опере все ок. А вот в остальных браузерах, если текст переходит на новую строчку, то зеленый блок, прибит не к краю текста. А к правому краю, за щет чего получается большой отступ. А когда таких блоков 10 на странице, и блок зеленый (в нем выводиться количество сообщений) прыгает на разной стороне от текста, получается не очень хорошо. + если все зеленые блоки выровнять по правому краю, то получается если новость короткая, а разрешение экрана большое, то получаем что количество комментариев будет расположено очень и очень далеко от новости.

Потому что ширина красного блока не фиксирована. А задана в %. А вот зеленый блок имеет фиксированную ширину в 40px

Не могли бы Вы подробнее написать. Я пробую как Вы сказали, и ничего не получается.

Сделал так: <div style="width:200px; background-color:#FF9;"> <div style="float:left; clear:left; position:relative; padding-right:30px; background-color:#F00"> 12345 67890 12345 67890 12345 67890 <div style="position:absolute; right:0; top:0; background-color:#3CC"> 1234 </div> </div> </div> В opera все ок. В остальных все тоже ок, но блок obl прижат не полностью к строчке, если строчка состоит из двух строк. Как сделать чтоб в остальных браузерах было как в опере? Вот пример: В опере блок прижат к тексту, а в других браузерах, вначале задаеться текст, и только потом он смещаеться за счет padding.

как вычислить max-width если контейнер не имеет заданной ширины? Он в %. Если задавать max-width тоже в процентах, то в каких? Если красный блок 30px а все остальное текстовый блок

Привет, в общем имеется задача: Где контейнер имеет плавающую ширину. Красный прямоугольник имеет фиксированную ширину. Блок с текстом имеет плавающую ширину В первом варианте, случилось чудо, и строка ровно такая чтобы прижать красный блок к контейнеру. Во втором варианте, текста совсем мало. Поэтому красный блок уезжает вместе с границей блока с текстом влево. В третьем варианте, текста слишком много, и он опускается на новую строчку, не сгоняя при этом красный блок вниз. (По идеи если в первом блоке строк много, и красный будет выровнен еще и по вертикале на середину то это будет в обще просто супер. Но об этом приходиться только мечтать.) Кто нибудь может натолкнет на мысль как это сделать? (Можете код даже не писать. Сам напишу)

Вступление Всем привет. Возможно для Вас это не проблема, но я уже себе весь мозг сломал, пальцы стерты до дыр после гугления, и все что имеется у меня на данный момент это несколько совсем некрасивых решений . Задача У нас есть меню, состоящее из 5 (количество пунктов может меняться) пунктов. Нужно чтобы первый пункт выл у самого левого края. А последний у правого. И расстояние между пунктами было одинаковым. Вот пример: |[u]Главная страница[/u] [u]Форум[/u] [u]Новости[/u] [u]Гостевая книга[/u] [u]Войти[/u]| Где | это край к которому должны быть прибиты элементы. Если использовать выравнивание по центру то получим: | [u]Главная страница[/u] [u]Форум[/u] [u]Новости[/u] [u]Гостевая книга[/u] [u]Войти[/u] | к краям. Проблема в том что они не прибиты Вы скажете, а что если правому задать выравнивание по правому краю, левому, по левому, а остальным по центру. Я скажу что это не подходит, так как между 1 и 2, 4 и 5 ссылкой, будет больше пространство, чем между остальными. Плохие решения Первое придуманное мной решение, банальное но самое неудобное. Это задать всем элементам отступ на глаз, а потом когда меню измениться, вспомнить что я задавал отступы на глаз. Мне это решение не нравиться... Универсальности нет. Второе решение уже получше Допустим что ширина блока в который нам нужно вставить это меню, фиксированная, тогда получаем такую формулу: (Ширина блока - (количество символов в меню*среднюю ширину символа))/среднюю ширину символа/(количество пунктов меню - 1) то получим количество символов которое надо вставить между пунктами. Проблемы этого решения в том, что буквы Щ и ь имеют разную ширину... + много лишних пробелов... В общем тоже не подходит. Третье решение. Совсем хорошо, но не радует наличие картинки... Нашел здесь Код: .menu { text-align:justify !important; width:1000px; background-color:#CCC; overflow:hidden; } <div class="menu"> <a href="#">Главная</a> <a href="#">Дизайн</a> <a href="#">Верстка и кодинг</a> <a href="#">pro100design.net</a> <img src="blank.gif" width="99%" height="1" alt=""> </div> Вот что пишет автор: "Использовать выравнивание текста justify. Если объяснять коротко, то после применения выравнивания justify все строки текста, кроме последней растягиваются на всю возможную ширину блока, по этому, для получения нужного эффекта нам нужно растянуть только одну строку. Мы добавляем длинный строковый inline элемент, который не помещается в первой строке и, следовательно, переносится на вторую, заставляя тем самым первую (наше меню) растянутся по всей ширине. В качестве такого элемента можно использовать пустой рисунок (Обычной называют blank.gif имеющий размер 1×1 пиксель) или любой строковый элемент с большим значением отступа." Сколько не пытался вставить любой строковый элемент с большим отступом, у меня последний пункт уезжает на следующую строчку. Если кто нибудь знает как сделать правильно, пишите. И тогда это будет Идеальное решение. Идеальное решение Пока не найдено, но надеюсь, что мы его найдем. Найденные ссылки по теме. Блок картинок выровненный по левой и правой стороне P,S, Ушел дальше думать, найду решение, отпишусь здесь.

Всем спасибо за помощь Проблема решена З.ы. Спрошу здесь, хотя к теме не относиться. Вобщем только на этом сайте(который сейчас верстаю) у меня странная проблема в опере Версия: 10.01 Сборка: 1844. суть проблемы в том что после тега html появляеться тег br. Причем проблема плавающая, 10 раз нажмешь обновить и этот тег появиться в 9 из 10 случаев. В коде везде проверял, нигде нету намека даже на это. У дизайнера в опере все ок. Как вы думаете куда копать??

Переделал Думал на нижних фоновых изображениях возникнет проблема, а нет. Прижались к футеру, а не к низу браузера. Вобщем все ок. Только беспокоит меня то что в опере в консоли ошибок появляються вот такие строки: CSS - http://site/pub/css/index.css Linked-in stylesheet _width is an unknown property Line 16: _width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "aut ——--^ CSS - http://site/pub/css/index.css Linked-in stylesheet Declaration syntax error Line 16: dth:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto"); ——————————————————————————--^ CSS - http://site/pub/css/index.css Linked-in stylesheet _zoom is an unknown property Line 67: _zoom:1; ———-^ Я вообще больше программист, чем верстальшик, и на других сайтах видел в этой консоли еще больше ошибок. Но все равно, хочется чтобы было красиво и без этих сообщений. Вот например сообщения с этого много уважаемого форума CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet Selector syntax error Line 927: } -^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-border-radius is an unknown property Line 1457: -moz-border-radius: 5px; ——————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-outline is an unknown property Line 1612: -moz-outline: none; ————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet Declaration syntax error Line 1676: filter:alpha(opacity=75); ————————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-border-radius is an unknown property Line 1708: -moz-border-radius: 5px; ——————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet Declaration syntax error Line 1715: filter:alpha(opacity=85); ————————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-border-radius is an unknown property Line 1739: -moz-border-radius: 5px; ——————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet marginh is an unknown property Line 2149: color: #c35301;marginh: 2px; ————————^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-opacity is an unknown property Line 2154: .btn A IMG{opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);} ————————————-^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet Declaration syntax error Line 2154: .btn A IMG{opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);} ——————————————————————--^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet -moz-opacity is an unknown property Line 2155: .btn a:hover img {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);} ———————————————^ CSS - http://forum.htmlbook.ru/style_images/css_4.css Linked-in stylesheet Declaration syntax error Line 2155: .btn a:hover img {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);} —————————————————————————-^ CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css Linked-in stylesheet -moz-border-radius is an unknown property Line 65: -moz-border-radius: 3px; ——————--^ CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css Linked-in stylesheet Invalid value for property: clear Line 91: clear: all; ————^ CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css Linked-in stylesheet -moz-border-radius is an unknown property Line 202: -moz-border-radius: 3px; ——————--^ CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css Linked-in stylesheet -moz-border-radius is an unknown property Line 214: -moz-border-radius: 3px; ——————--^ CSS - http://forum.htmlbook.ru/index.php?showtopic=16959&st=0&gopid=121949& HTML style attribute word-wrap is an unknown property Line 1: word-wrap:break-word; ———-^ Ладно, если уж здесь игнорируют ошибки, то и мне не стоит так волноваться

Локально. Если сообщения не будет, пошел переделывать под свой шаблон

Оно. Только из за _width:expression(document. ie просит включить активное содержимое. Есть ли способы отучить его от этого? Вобщем идея ясна, ушел искать способ эмулировать min-width без предупреждения безопасности.

Посмотрел. К сожелению это не то что мне надо, идея понятна, но она не подходит по условиям. Как я уже говорил, фоновые изображения являються продолжением фона шапки, и продолжением фона подвала. Более того. Левое и правое фоновое изображение не одинаковы. В Вашем примере, фоновые изображения прикрепляються к окну браузера. А мне надо чтобы они прикреплялись к краю шапки и футера. Если непонятно, я могу более подробно обьяснить

Что я могу сказать? Спасибо Будем разбираться.

Подумалось мне еще чуть чуть. Решил более четко сформировать проблему. Получилось так: Как убрать горизонтальную прокрутку? Ответ на который быстро нашел (overflow-x у тега body), попробывал, получилось. Только теперь у оперы и при разрешении меньшем 1024 полоса прокрутки не поевляеться. Думаю сделать так: C помощью js менять этот параметр. По умолчанию полоса прокрутки будет Есть ли у Вас какие нибудь замечания по данному решению?

Подумалось добавить max-width для header. Только кросбраузерность теряеться... Я правда еще не пробывал, можнт вообще работать не будет пойже отпишусь о результатах.

Всем привет. Прошу вашей помощи, как говориться одна голова хорошо, а много лучше. И так, описание проблемы дальше. 1. Дизайнер сделал фиксированный макет с одной колонкой. Колонка 1000px. Выставлена по середине. Проблем нет, сделал. Колонку выровнял margin:0 auto; 2. Дизайнер попросил добавить фоновый рисунок повторяющийся до бесконечности к боковым колонкам(пустое место справа и слева от колонки) при разрешении более 1024 по горизонтали. Проблем нет, сделал. К body background-image прикрепил. 3. Дизайнер попросил сделать как показанно на схеме: То есть при разрешении 1024 * 768 фоновые изображения не должны отображаться. При увеличении разрешения фоновые изображения должны появляться из за края браузера. Верхние фоновые изображения имеют фиксированный размер, нижнии повторяються до конца. Чтобы было понятнее фоновые изображения это продолжение картинки на шапке и футере. Вот тут я призадумался... И пришло мне в голову, почему бы не поместить 2 дива в шапку, задать им абсолютное позиционирование, и сместить на их размер*-1 от краев дива родителя. Сделал, слева, все как надо. А вот справа, див растягивает своего родителя. Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style> * { margin:0; } #all { width:1000px; background-color:#CC6699; margin:0 auto; } #header { width:1000px; height:400px; background-color:#009933; position:relative; } #content { width:1000px; background-color:#009999; position:relative; } #left { width:400px; height:400px; background-color:#FFFF99; position:absolute; top:0; left:-400px; } #right { width:400px; height:400px; background-color:#9999FF; position:absolute; top:0; right:-400px; } </style> </head> <body> <div id="all"> <div id="header"> <div id="left"></div> <div id="right"></div> </div> <div id="content">Много много текста</div> </div> </body> </html> Подскажите пожалуйста, как избавиться от полосы прокрутки?