vadimon

Грубо говоря, у меня есть конструкция Меню - Контент - Сайдбар. Если я поменяю, зачем мне Контент - Меню - Сайдбар?? Высота блоков разная

Имеются три блока. Например: HTML <div id="container"> <div id="block1"> <h2>Блок №1</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div id="block2"> <h1>Блок №2</h1> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div id="block3"> <h3>Блок №3</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> </div> </div> CSS #container { width:900px; margin:0 auto;} #block1, #block2, #block3 { width:300px; float:left; background:#CCCCCC;} #block1 p, #block2 p, #block3 p {padding:10px;} При просмотре исходного кода в браузере видно, что код расположен, как мы и прописывали его, т.е сначала идет код Блока№1, потом Блока №2 и Блока №3. Так вот, суть задачи в том, чтобы при том же самом расположении блоков на странице браузера Блок №1 - Блок №2 - Блок №3, в исходном коде в браузере код шел в таком порядке: Блок №2 - Блок №1 - Блок №3

Совершенно верно. Не совсем, конечно то, что надо получилось, но тоже симпатично и несложно.

HTML <div class="wrap"> <div class="wrap-middle-price"> <div class="pricecontent"> </div> </div> </div> CSS .wrap { width:850px; margin:0 auto;} .wrap-middle-price { border:4px solid #ec6701; background:url(images/price_repeat.jpg) repeat-y;} .pricecontent {padding:125px 25px 25px; background:url(images/price_area_bg.jpg) no-repeat top left; min-height:500px;} Конечно, диагональный градиент переходит в горизонтальный, но, думаю, тоже неплохой симпатичный вариант, причем совсем несложный. Демо можно посмотреть здесь

В принципе не самое плохое решение нашел вот такое: задал как фон всю картинку и под ним репител вертикально последний 1 пиксель из бэкграунда. Вроде, получилось неплохо.

Возникла проблема с версткой градиентного бэкграунда. Смысл в том, что градиент идет не строго по вертикали или по горизонтали, а из нижнего левого угла в верхний правый. Блок не строго фиксированный, а должен тянуться по вертикали вниз в зависимости от наполнения его контентом, при этом независимо от вертикального размера блока градиент должен быть строго по диагонали из нижнего левого угла в верхний правый. Скрин прилагаю. Изображением бэкграунд вставить нельзя, так как блок должен тянуться.

Главное, что работает )

Спасибо за совет. Но почему то работает с position: absolute;

Дружище, в твоем профессионализме я уверен и ничего против него не имею, спасибо тебе за рабочий вариант. Прикрутил я его, уж на это ума хватает. Дело в том, что не совсем кроссбраузерно получается, в особенности в ie6 по ширине.

Обнуление не помогает, текст все равно наезжает на футер.. ((

Твой код выше работает, вот только у себя его реализовать не получается (((. Вот мой код с фиксированным блоком "wrapper". HTML: <div id="wrapper"> <div id="header"> <div class="leftmenu"> <p>Пятница, 15 сентября 2010 года</p> </div> <div class="logo"></div> <div class="rightmenu"> <ul> <li><a href="" title="О компании">О компании</a></li> <li class="margin"><a href="" title="Прайс-лист">Прайс-лист</a></li> <li><a href="" title="Контакты">Контакты</a></li> </ul> </div> <div class="search"> <form name="search" method="get" action=""> <p class="searchtext">Поиск по сайту</p> <input type="submit" value="" class="searchbtn" /> <div class="searchfield"><input type="text" value="" class="searchnone" /></div> </form> </div> </div><!-- #header--> <div id="content"> <div id="slogan"></div> </div><!-- #content--> </div><!-- #wrapper --> <div id="footer"> </div><!-- #footer --> Не пойдет. Сделав блок position: relative и наполняя его контентом он должен увеличиваться вместе с текстом, а так как под этим блоком у меня футер прижатый к низу, то футер также должен ползти вниз. Поэтому блок с текстом накладывается на футер.

с position: absolute блок будет "плавать" при разных разрешениях экрана

Скорее всего хожу вокруг да около или просто туплю, но мне надо сделать два блока фиксированной ширины. Схематично это можно выразить так: Грубо говоря, у меня есть зеленый блок фиксированной ширины, а внего нужно запихнуть красный блок фиксированной ширины. Естественно, не получится запихнуть блок большей ширины в блок меньшей ширины, но вот как-то надо это сделать каким-то другим образом.... )))

Даже 175кБ это слишком много. Поэтому, видимо, резка тут неизбежна. Коричневые фиговины и клетка идет одним слоем, каждая такая отдельная коричневая фиговина весит около 100кБ.

Выложил бэкграунд полностью в формате psd здесь:http://narod.ru/disk/27356498000/background.psd.html В формате jpg:http://narod.ru/disk/27356597000/background.jpg.html

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

Спасибо, действительно помогло

Задал каждому рисунку абсолютное позиционирование и указал им в пикселах их местоположение, естественно при разных разрешениях экрана их начинает разбрасывать в разные стороны, указл в процентах - тоже самое... Какие единицы измерения следует указать или я совсем не так все сделал? <div id="tovar"> <a href=""><img src="images/kuh.jpg" title="Кухни" style="position:absolute; left:415px; top:240px;" /></a> <a href=""><img src="images/detsk.jpg" title="Детские" style="position:absolute; left:640px; top:270px;" /></a> <a href=""><img src="images/spaln.jpg" title="Спальни" style="position:absolute; left:330px; top:400px;" /></a> <a href=""><img src="images/stolov.jpg" title="Столовые" style="position:absolute; left:730px; top:380px;" /></a> <a href=""><img src="images/kuhni.jpg" title="Гарнитуры" style="position:absolute; left:550px; top:360px;" /></a> <a href=""><img src="images/stenki.jpg" title="Стенки" style="position:absolute; left:500px; top:525px;" /></a> <a href=""><img src="images/button.png" title="Кухни" style="position:absolute; left:385px; top:235px;" /></a> <a href=""><img src="images/stolov_button.png" title="Столовые" style="position:absolute; left:867px; top:370px;" /></a> <a href=""><img src="images/stenki_button.png" title="Стенки" style="position:absolute; left:720px; top:520px;" /></a> <a href=""><img src="images/spalni_button.png" title="Спальни" style="position:absolute; left:315px; top:387px;" /></a> <a href=""><img src="images/garnitur_button.png" title="Гарнитуры" style="position:absolute; left:535px; top:356px;" /></a> <a href=""><img src="images/kids_button.png" title="Детские" style="position:absolute; left:630px; top:254px;" /></a> </div>

скорее всего придется делать через map area, правда вес изображения при этом будет 170кБ (и так уже сжал насколько возможно), интерактивная карта не нужна, все намного проще, хотя и за нее спасибо, возможно пригодится мне в будущем.

нет, облако тегов не нужно, без скрипта, тем более артинки не цельные

Имеется такое вот изображение категорий товаров. Беда вся в том, что слой всего один. Уже принял решение верстать его как карты-изображния, но чутье мне подсказывает, что это не единственный выход. Как можно еще реализовать?

Правда, связка {position:relative; bottom:63px;} оказалась не кроссбраузерна, в ie6 работает коряво http://design.webtm.ru/demo/basket/index.html/ Чем можно исправить?

ну с position: absolute это слишком загнуто... вроде получилось вот так: HTML: .<div class="slide-foto"> <img src="images/slider_foto.jpg" alt="Новость дня" /> <div class="slide-desc"> <p>Великодушная "фурия"</p> <p>Испанцы упустили в матче с Гондурасом массу моментов, включая нереализованный пенальти, довольствовавшись победой 2:0. Теперь "красной фурии" надо побеждать Чили.</p> </div> </div> CSS: .slide-foto { margin:0 auto; width:369px; height:277px; border-bottom:1px solid #f09e33;} .slide-desc { height:62px; background: rgba(254, 251, 248, 0.85); position:relative; width:368px; bottom:63px; border:1px solid #f09e33;}

как сделать прозрачный фон с описанием и наложить его поверх картинки?

Верстаю страничку и столкнулся с такой проблемой: как сверстать слайдер, понятно, что на сайте он будет работать на jquery, но свойства нужно задать при верстке ( шрифт, размеры и т.д). Или может не стоит этого делать? Скрин прилагаю.