Red Planet

Есть вопрос. Как организовать картинку с текстом? Понятно, что здесь имеет место обтекание. Но вопрос не в этом. Текста может быть много (высота больше высоты картинки), мало (высота меньше высоты картинки). Как сделать так, чтобы величина отступа (показан стрелкой) между первым и вторым (обозначено цифрами) не зависел от того, сколько текста?

Спрашивал на одном форуме, можно ли ссылку добавить ссылку с помощью псевдоэлемента after. Сказали, что нельзя. На данном макете после каждого абзаца встречается сслыка "orci luctus et". Выходит, что вручную писать?

Здравствуйте. Вопрос в следующем: если я прижимаю "подвал" к низу, то не поползет ли на экранах с низким разрешением контент на футер (показано стелкой на приложенном рисунке), если вышеупомянутого контента слишком много?

psywalker, так и сделал. Блоку с контентом и правой колонке нужно задавать фиксированную высоту или лучше прижать футер к низу?

psywalker, смотрите скриншоты. Резльтатат в браузерах за исключением IE 6. Результат в Internet Explorer 6 без применения стиля специально для него. Если написать стиль для IE, то в нем все отображается правильно.

Добрый день. Сейчас занимаюсь переоформлением блока с коробкой и текстом. Есть вопрос. Internet Explorer 6 при установке padding'ов растягивает саму картинку вместо того чтобы увеличивать размер блока путем установки отступов (показано на рисунке). Нужно писать отдельные правила для него. Ничего не придумал кроме абсолютного позиционирования для картинки-заголовка и абзаца. Стиль для Internet Explorer 6. #h1-replace, #top-grey-bar p { position: absolute; top: 30px; } img#h1-replace { padding: 0; } #top-grey-bar p { top: 90px; width: 460px; } Стиль для других браузеров. #top-grey-bar { position: relative; height: 200px; background: url('images/top-grey-bg.jpg'); } img#box { float: right; margin-right: 105px; } #h1-replace, #top-grey-bar p { margin-left: 175px; } img#h1-replace { padding: 35px 0 27px 0; } Из HTML. <div id="top-grey-bar"> <img src="images/box.jpg" alt="box" id="box" /> <img src="images/h1-replace.png" alt="Lorem ipsum dolor sit amet, consectetur tadipiscing elit. Nulla pharetra sagittis varius." id="h1-replace" /> <p>Sed mi ipsum, gravida eget volutpat nec, auctor et nisl. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ante ipsum primis in faucibus<strong> <a href="#">orci luctus et.</a></strong></p> </div> <!-- top-grey-bar --> Правильно ли так делать? Оптимально ли? Какие другие варианты решения проблемы есть?

psywalker, klierik, ЦУ уяснил. Сверстаю, только как появится время.

Стоп. Я думал, что использовать нужно id, когда применение один раз, class - когда два или более. Считал это некой парадигмой. Нужно всегда использовать class?

Даже и не ожидал, что будут такие баталии. Огромное спасибо за замечания и критику, я переделаю то, на на что мне было указано, но перед этим хотелось бы выяснить несколько моментов. Не понимаю. В блочный <ul> завернуты строчные <li>. Что здесь плохого? Есть способ лучше сделать элементы списка не в столбик, а в строчку? А как поступать, если нет таких блоков, у которых бы полностью повторялись все свойства?

vvsh, в принципе так и должно быть, так минимальная ширина равна 1200 пикселей. Вопрос в том, хорошо ли задавать такую ширину?

Здравствуйте, сверстал свою первую страничку и разместил. В процессе создания использовались средства HTML и CSS, также java-скрипт для Internet Explorer 6 (для адекватного отображения прозрачности в png). Проверял на браузерах: Mozilla Firefox 3.6.10 Opera 10.62 Internet Explorer 8 Google Chrome 6.0.472.63 Mozilla Firefox 2.0.0.17 (Portable) Opera 9.63 (portable) Internet Explorer 6 (portable) Меня интересует: Работают ли как положено скрипты для IE 6 на других сборках? Качество верстки в общем. Отображение на разных экранах (имел возможность проверить только лишь на ноутбуке (1366*768) и на настольном (1280*1024). Верстка Макет Жду комментариев, критики, пожеланий.

Здравствуйте. Проблема в следующем. Блок, в котором находятся input-ы, спозиционирован абсолютно. Только в Mozilla Firefox кнопка и поле ввода соответствуют друг другу. В остальных криво как показано на скриншоте. В то же время (если для верстки это принципиально) текст в поле ввода в старом Firefox 2.0.0.17 и в Internet Explorer 8 выравнивается по верху в поле ввода, а хотелось бы, чтобы был посередине. Посередине он в Google Chrome, Opera.

И снова ноль эффекта.

Не помогло.

Здравствуйте. Обнаружил при верстке одну неприятность, наблюдается в IE 6, в других не замечал. Google Chrome, Opera, Mozilla Firefox, Internet Explorer 8. Internet Explorer 6. По бокам у оранжевого блока видны небольшие зазоры. CSS. body { font-family: Arial, Helvetica, sans-serif; color: #333; background: #fe6; } * { margin: 0; padding: 0; } p { padding: 10px 30px; } #container, #left-col, #right-col { height: 300px; } #container { background: #F63; margin: 0 100px 0; } #left-col { float: left; width: 100px; background: #ffe; } #right-col { float: right; width: 100px; background: #aa5; } В чем причина?

Есть неясность с размером шрифта. В body указываю размер 11pt, текст "Fusce nec eros augue, ut hendrerit erat. Nam dapibus sed semper blandit. Fusce cursus neque suscipit semper", что находится по центру шапки, в макете 13pt. Перевожу одни единицы в другие. 13pt/11pt=1.181818...em. Однако, если прописать следующий код, размер становится слишком большим, совсем не как на макете. То же самое касается и заголовка "Aliquam Etiam Tempus" (16pt на макете). 16pt/11pt=1.45em. p#header-text { font-size: 1.18em; } h1 { font-size: 1.45em; color: #fff; padding: 25px 0 13px 34px; } Результат. Где моя ошибка и что нужно сделать, чтобы правильно соотнести размеры на макете и в верстке?

Great Rash, спасибо. Заменил <span> на <p> и все получилось.

Верстаю макет, возникла проблема с левой колонкой, текст в ней не подчиняется свойству padding. Почему так происходит? <div id="sidebar"> <div id="top-sdbr"> <h2>Aliquam sed veroeros</h2> <img src="images/sdbr_top_pic.png" alt="Aliquam sed veroeros" /> <span class="sdbr">Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum dolor suscipit semper. Lorem amet consequat.</span> </div> <div id="bottom-sdbr"> <h2>Lorem ipsum sed amet</h2> <img src="images/sdbr_bottom__pic.png" alt="Lorem ipsum sed amet" /> </div> </div> Из прикрепленной таблицы стилей. #sidebar { position: absolute; top: 413px; left: 55px; width: 300px; height: 614px; } #sidebar img { border: #fff solid; margin-left: 30px; } #top-sdbr { height: 290px; background: url(images/h2_bg.gif) no-repeat #dde7f8; } #bottom-sdbr { height: 324px; background: url(images/h2_bg.gif) no-repeat #dde7f8; } span.sdbr { padding: 30px 33px; color: #4e7379; } Результат.

Использовал <br />. document.getElementById("content").innerHTML="Width: "+window.screen.width+"<br />Height: "+window.screen.height;

Здравствуйте. Управляющие последовательности работают в методе alert, но не работают при попытке записать что-либо в документ, а хочется всего лишь записать в столбик две строки. Скрипт. function f1 () { if (f1.done) return; document.getElementById("content").appendChild(document.createTextNode("Width: "+window.screen.width+"\nHeight: "+screen.height)); f1.done=true; } Подключенный сss. #content { background: #999; }

Я новичок и не знаю всех нюансов.

Это и есть ответ на мой вопрос, спасибо.

Главное, чтобы не было неприятных сюрпризов, когда буду выкладывать свои сайты. Объясню на примере. Оранжевый блок находится внутри серого. Файл *.css выглядит так: right: 350px; top: 200px; и left: 50px; bottom: 100px; в то время, как на положение внутреннего блока не влияет, напишем первое или второе. Опять же все ради корректного отображения у других людей на различных браузерах. Рисунок для наглядности.

Здравствуйте! Есть блок некоторой высоты и ширины, внутри него хочу разместить элемент. Я должен задать два свойства (bottom и left или bottom и right или top и left или top и right) для размещения моего элемента. Имеет ли принципиальное значение, откуда брать отступы: сверху или снизу, слева или справа? Понятное дело, что, если элемент, скажем, сдвинут на 10 пикселей от верхнего края и на 20 от левого, то нужно написать: position: absolute; top: 10px; left: 20px; и не заморачиваться насчет того, чему же будут равны отступы справа и снизу. А если элемент где-то в середине? Имеется блок с фоном некоторого цвета, внутри него размещены другие блоки, фон внутренних блоков должен быть таким же, как и у родительского блока. Нужно ли писать свойство background: inherit; в описании внутренних блоков, предварительно задав цвет фона в описании родителя, или это лишнее?

Еще один вопрос. Как сделать отступы от одного элемента до другого в том маркированном списке, что в строчку (Home, Services, Request a Question)? Пользоваться padding'ами или есть способ лучше?