cul8er

Спасибо Единственный косяк, что отрицательные значения top'a, создают такой же,по размеру, отступ от footer'a ..

Помогите разобраться, как следует выполнить следующее задание: Длинна блока контейнера (Container) Зависит от большего по размеру блока Menu или Content. При этом Menu вылезает за пределы блока Container на 20px , а блок Content вылезает за блок Container на 10px. Сейчас все это обернуто в еще один контейнер, который имеет position: relative , а контейнеры Menu и Content position: absolute. Но при таком решении длинна Container остается не изменой. Как лучше справиться с этой задачей?

Точно,спасибо, я ложанулся Ранее применял для ul li.active a запутался

Имеется страница, на которой размещен блок отзывов. У блока реализована постраничная листалка. <div id="response"> <div id="response-box"> какой-то текст </div> <div id="response-p"> <a class="active">1</a><a>2</a><a>3</a><a>4</a><a>5</a> </div> </div><!-- response --> К активной ссылке должен применяться такой же стиль как и к hover, но что-то не срабатывает #response-p a:hover,#response-p.active a{ height: 27px; min-height: 27px; width: 15px; color: #FFF; background: url(resp_a.png) no-repeat top left; text-decoration:none; } #response-p a{ padding-top: 4px; display: inline-block; color:#a71212; padding-left: 5px; }

Всем спасибо за помощь! Разобрался.. К футеру relative, а к блоку картинки абсолют с bottom = высоте футера. Ранее не понимал как наследуются, поэтому работа с блоком контейнера, и позиционированием там, не давала должного результата ввиду разметки фреймворка цсс.

Ну и что? Это же абсолют. Почему у меня получается, а у вас нет? http://jsfiddle.net/uRxVT/ Не получается ничего с абсолютом из-за разметки фреймворка видимо Сделал в div'e футера position:relative;bottom:260px; и для контейнера с текстом min-height задал, чтобы на меню блок с картинкой не находил. Получилось как и хотелось. Осталось устранить сползание других div'ов в футере. После position какая очистка есть, или еще что? Код <div id="footer"> <div id="bottom-image" style="position:relative;bottom:260px; left:0px"> </div> <div id="footer-left"> (с) 2007-2011 Название проекта<br/> mail: adress@mail.ru </div> <div id="footer-right"> Копирование материалов с сайта, без согласия администратора, запрещено.<br/> Все права принадлежат “<?php echo Yii::app()->name; ?>” </div> </div><!-- footer --> для footer-right и footer-left задано float:left и соответствующие padding'и

Проблему с разрастанием меню можно всегда решить (большим размером контента ) Но вот, что-то не срабатывает ваш пример. У меня ведь футер в своем блоке сидит, за пределами контейнера (в котором: меню, блок-текста), мне кажется в таком случае картинка уходит под контейнер. П.С. код выкладывать думаю слишком-много букв.. (там два стиля - один мой, другой от фреймворка с его разметкой). Но если это поможет могу всё выложить Еще вот как вариант: если предположить, что блок с текстом всегда будет по высоте больше блока меню и картинки, то можно как то растянуть overloffom колонку меню и картинку по высоте равной блоку текста. И у картинки задать отрицательный отступ?

Помогите прибить блок Image книзу (к блоку Footer соответственно). Все блоки кроме Footer, находятся в контейнере. Контейнер состоит из двух колонок. В одной находится блок с меню и блок с картинкой (которую необходимо прижать), во втором блоке соответственно текст страницы. Насколько я понял необходимо для большого контейнера задать position: relative, а для блока с картинкой position: absolute; bottom: 0px; right: 1000px; (отступ правого края с учетом размера всего документа 1020px) Но вот что-то как то не работает. Правильно ли делаю? Или может есть другой способ решить данную проблему. П.С. использую Blueprint CSS Framework, может из за его разметки так не выходит и где то , что-то перекрывает?

Это как?) (что за зум) Сделал следующим образом <div><a><img></a></div> <div><a><img></a></div> <div><a><img></a></div> <ul> <li><a>Link1</a></li> <li><a>Link2</a></li> <li><a>Link3</a></li> </ul> Для меня не критично такое написание: картинки с ссылками по отдельности. Осталась проблема с вертикальным позиционированием ссылок в синем блоке заданной ширины и высоты. Ссылка может быть как в одну строку, так и в две строки. Если задавать li абсолютом и задавать "координаты отступов" (top,left etc), то это актуально для однострочной ссылки. Если будет две строки, то начало ссылки будет так же положено в центре блока, а вторая строка уйдет далеко вниз. Что еще можно придумать?)) Не хотелось бы делать для каждой ссылки свою картинку еще и с текстом.

Размер шрифта и сам шрифт подобраны так, что необходимое количество слов в ссылке влезает Размер ссылки ограничен 40 высота и 90 ширина (картинка бэкграунда именно такого размера) text-align:center; - Работает для горизонтального позиционирования. Необходимо же выполнить еще вертикальное позиционирование ссылки (текста), чтобы она размещалась в центре синего блока. Поэтому я разделял блок LI на две ссылки html <li> <a><img></a> <a>link1</a> </li> css #mainmenu ul li { float: left; display: block; background:white url(btbg.jpg) no-repeat bottom; width: 90px; height: 130px; margin-right: 5px; margin-left: 5px; text-align: center; } P.S. размер каждого LI равен: w90 x h130 из них: картинка с бабочкой 90x90 синий блок с ссылкой 90x40 Пример того как должно выглядеть меню я привел выше в посту.

На данном этапе это не важно, но на конечном сайте, может быть картинка это ссылка на общий раздел, а при нажатии на ссылку, выпадение подменю.. Хотя вы правы, можно как и у всех, ссылка одна на общий раздел, а при наведении - выпад. меню. Что-то с позиционированием никак не соображу, как в списке это реализуется Уже сделал на дивах, но мне такой вариант подхода не нравится. Кол-во строк у ссылки может быть от 1 до 3ех, т.е. всякие жесткие паддинги не подходят, нужно отцентровать в синем блоке как то.. Есть идеи?

А если помимо ссылки там еще тэг с картинкой или еще одна ссылка? Мое мнение задавать размеры нужно к блокам, а не к тексту (ссылкам) Спасибо за идею насчет отображения блоками плавающими Необходимо вот такое меню сделать, где картинки так же являются ссылками: Правильно такое решение?: CSS #mainmenu ul li { float: left; display: block; background:white url(btbg.jpg) no-repeat bottom; width: 90px; height: 130px; margin-right: 5px; margin-left: 5px; text-align: center; } HTML .. <li> <a><img></a> <a>link</a> </li> .. Только вот не хватает отцентровки вертикальной, ссылке в блоке синем. Буду дальше ковырять

Именно инлайном Горизонтальная менюшка

Возможно задать минимальную высоту и ширину у тэга <li> ? Есть меню навигационное. У каждой кнопки прописан background (размер которого width:90; height:40) Пробовал #mainmenu ul li { width: 90px; height: 40px; min-height: 40px; min-width:90px; } Не выходит. Задать можно только размерность UL

Благодарю) margin затерялся..

Вроде бы простейший пример, не соображу где накосячил Необходимо разместить отображение сайта по центру. Пример: <body> <div class="wrapp"> <div id="left"> </div> <div id="right"> </div> </div> </body> *css style html,body { font: normal 10pt Arial,Helvetica,sans-serif; background:#D0DCF4 url(bg.jpg) repeat-x top; } .wrapp{ width: 1200px; } #left{ float: left; /*min-height для IE*/ height: auto !important; height: 100%; min-height:650px; width: 400px; background:#D0DCF4 url(menu.jpg) no-repeat top; } #right{ float: right; width: 800px; } Что-то к левому краю клеит

Переделать никогда не поздно Напишите на будущее, как такие подвалы склеивают,- буду признателен

Вопрос с футером решен: Картинку бэкграунда футера увеличил (включил высоту листа), соответственно и сам бэкграунд стал больше по высоте. В футер добавил див с листком без всяких position. Единственное не нравится что текст заканчивается над листом..Буду шаманить дальше, чтоб хоть на пару строк наезжал. Остался последний не решенный вопрос: <div id="main"> <div id="sidebar"> Менюшка, которой может и не быть (FLOAT:LEFT; WIDTH:100px;) </div> <div id="content"> Много много текста (WIDTH:AUTO;) </div> </div> В данном случае, там где заканчивается меню, текст уходит под него. Как заставить текст идти блоком с одинаковым отступом? Если нет меню,- текст контента должен занимать всю ширину MAIN.

Вот здесь можно посмотреть, что мы имеем (лишний контент со страницы и разметку убрал, но не весь, чтоб не разъехался весь шаблон) Ссылка на страницу Вкратце разъясню: Есть контейнер "container" (растянутый на всю страницу вниз и имеющий заданную ширину) в который входит: логотип, меню, и основная часть + контейнер "push", который резервирует место снизу (для футера). За пределами "container" у нас только контейнер "footer" (который, с отрицательным отступом сверху, занимает зарезервированное место "push"ем). Стандартная схема прилипания футера вроде бы Сам контейнер footer растянут уже на всю страницу с background'ом. Задача сделать футер как я показывал ранее: т.е. наложить листик с тенью поверх футера П.С. Возможно я не так начал это делать, тогда укажите как правильно. Еще один небольшой вопросик этого шаблона: Как убарть обтекание sidebar'a (меню слева), которого может вовсе и не быть на старницах. Если его нет, то текст должен занимать всю область "container", а если он есть, то текст должен по всей высоте иметь отступ от него. Запутался честно с float'aми, и могу только с заданной шириной блока текста это сделать, но тогда будет пусто место где нет sidebar'a.

Дело в том, что если новый блок с листом расположить в блоке футера, то верхняя часть листка с тенью будет под блоком wrapp'ера (и мы сможем увидеть только нижнюю часть, которая находит на серый фон). Еще один минус этого способа - это позиционирование изображения относительно середины страницы. Проще всего было бы расположить этот конец листа в блоке wrapp'ера, тогда позиционироваться относительно центра, он будет как и другие блоки. Но вот не могу заставить его наехать на определенную часть прибитого футера (

В отдельный блок, внутри блока футера? И точно абсолютом, а не relativ'ом?)

Подскажите как реализуется такой вот футер: В моей верстке футер уже прижат книзу страницы. В этом диве(футера), находящимся за пределами wrapp контейнера, указана background картинка(сероватый фон). Теперь нужно на этот футер, наложить как то лист с тенью (чтоб получилось как на картинке). Если я указываю во wrapp контейнере как background картинку(лист с тенью) с позиционированием снизу, то она естественно прижимается книзу, а отступ margin'a действует и на прижатый футер(серый фон). Или подскажите адреса сайтов , где есть подобный подвал

Вот здесь то чего удалось уже добиться Футер прижат книзу, но внутренний блок с текстом заканчивается там же где и текст (это видно по border'ам серым, которые обрываются вслед за текстом). Если div'у (content_inside), в который заключен текст, поставить min-height 100%, то футер уходит за страницу и появляется прокрутка. Теперь два вопроса: 1. Как подправить, чтобы бордеры div'a(content_inside) прилегали к футеру? 2. Будет ли тогда возможным разместить контент в правом нижнем углу, прижатым к футеру (нижняя часть колонки где флэш с погодой - div.content_inside_sidebar) ? Вот пример разметки: <div id="total"> <div id="content_inside"> <div id="content_inside_sidebar"> Колонка справа от текста (информеры итд) </div> <div id="content_inside_main"> Много много текста </div> </div> <div id="footer_space"> </div> </div> <div id="footer"> FOOTER </div Выдержка из CSS * {margin:0; padding:0;} html {height: 100%;} body{min-height:100%;height:100%} #content_inside{ border-left:1px solid #BBB; border-right:1px solid #BBB; margin:0 auto; width:800px;} #content_inside_sidebar{ border-left:1px solid #BBB; float:right; line-height:175%; margin:5px 0 5px 570px; padding:0 0 0 10px; position:absolute; width:200px;} #content_inside_main{letter-spacing:-1px; line-height:175%; margin:0 auto; min-height:100%; padding:10px 235px 10px 10px; width:550px;} #total {height: auto !important; min-height:100%; height:100%; width:100%;} #footer { height: 50px; clear: both; margin: auto; margin-top: -50px; height:50px; width:100%;} #footer_space{height: 50px;clear: both;}