maa

Ребята, вопрос вот в чём: задача: прибить футер книзу(с этим проблем нет), в центре футера меню, а по бокам логотипы. нужно сделать, чтобы футер тянулся, в случае добавления пунктов меню, а боковые логотипы выравнивались по центру высоты футера. Подозреваю, что выравнивать боковые логотипы можно, задав отступ от верха в 30%. А вот сделать резиновый футер - это впервые слышу. Подскажите, пожалуйста.

Здравствуйте, ребята. У меня проблема с оформлением меню и сам я в этом разобраться что-то не могу, а посему прошу помощи у опытных людей. Меню организовано стандартным образом - списком. Левая граница меню оформлена как изображение прибитое к левому краю ul. Между пунктами меню разделители оформлены в виде изображений прибитых к правому краю li: <ul> <li><a href="#" >ГЛАВНАЯ</a></li> <li><a href="#" >ГЛАВНАЯ</a></li> <li><a href="#" >ГЛАВНАЯ</a></li> <li><a href="#" >ГЛАВНАЯ</a></li> <li><a href="#" >ГЛАВНАЯ</a></li> <li><a href="#">БАЗА ГЛАВНАЯ</a></li> <li class="menu_rb" ><a href="#">RED ГЛАВНАЯ</a></li> </ul> #menu ul{ height:57px; background:url(../img/menu_lbrd.png) left no-repeat; border-right:1px solid green; } #menu li{ float:left; line-height:57px; background:url(../img/menu_lbrd.png) right no-repeat; list-style:none; } #menu li a{ text-decoration:none; color:#385600; padding:20px 30px; } #menu li a:hover{ background:url(../img/menu_hover.png) repeat-x; color:#fff; } #menu li.menu_rb a{ background:url(../img/menuRB_bg.png) repeat-x; color:#385600; } На выходе имею вот что: http://clip2net.com/s/1PoXL http://clip2net.com/s/1PoZk http://clip2net.com/s/1Pp1T Проблемы: 1. Последняя li и правая граница ul имеют зазор. На сколько я представляю, ul должен обтягивать лишки. Почему возникает этот зазор? 2. На hover стоит заполнение цветом(репитится картинка). При этом забивается разделитель-изображение в li, а в первом и левая граница ul. Как мне реализовать меню так, чтобы разделители не забивались заливкой на hover? Полагаю, что проблема здесь не в оформлении, а в логике.

есть блок, в нём изображение. если увеличивать масштаб, картинка тянется по горизонтали (и по вертикали), соответственно ,едет. нужно закрепить как-то картинку, чтобы её, например, центр (или другая точка) оставались на месте, а изображение за счёт масштаба ползло вбок-верх-низ. реально ли сделать так средствами css?

решил вот так: сделал блок .car в него вложил изображение и css .car{ position: absolute; top: 0px; width: 100%; height: 750px; min-width: 1200px; z-index: -3; overflow: hidden; } .car img{ width: 100%; } работает так, как нужно, только вот при масштабировании изображение двигается. как сделать, чтоб закрепить центр, а "росло" оно в бока и верх-низ?

ребят. выскажите любые предположения.

очередная проблема. на рисунке красным обрисован футер. зелёным - по размеру футера полоса, которая должна растягиваться по длине экрана. я то же делал для верхнего меню. но для подвала почему-то не прокатывает (полоса отображается правильно при маленьком масштабе, но если увеличивать - она ползёт вверх и "торчит где-то в центре браузера"). что не так? </div><!-- #footer --> <div class="bottom"></div> /*расположена за футером, перед закрывающим body*/ </body> *************************************************** .bottom{ position: absolute; bottom: 0px; left: 0px; width: 100%; min-width: 1200px; height: 187px; /*высота подвала*/ background-image: url(img/b_foot.png); background-repeat: repeat-x; z-index: -4; }

спасибо. решение как всегда элементарно. моя невнимательность: я был уверен в том, что уже проверял этот вариант.

не помогло. <div class="bttl"> <a href="#">Customized web development latest Belarus</a> <div class="sales"><div class="salleftpart"> </div><div class="salcentrpart"><a href="#">SALES 100%</a></div><div class="salrightpart"> </div></div><!--sales--> </div><!--bttl--> /*********************************************************/ .bttl{ height: auto; float: left; margin: 0 0 18px 0; } .bttl a{ font-size: 1.125em; font-family: Arial, Helvetica, sans-serif; color: #006699; float: left; } .sales{ margin: 0 0 0 10px; height: 16px; float: left; display: inline-block; } .sales a{ color: #fff; font-size: 0.7em; font-family: Arial, Helvetica, sans-serif; text-decoration: none; padding: 2px 0 0 0; } .salleftpart{ width: 7px; height: 100%; float: left; background: url(img/sales_left.png) no-repeat; } .salcentrpart{ height: 100%; width: auto; float: left; background: url(img/sales_center.png) repeat-x; } .salrightpart{ width: 8px; height: 100%; float: left; background: url(img/sales_right.png) no-repeat; }

картинка-ссылка реализована таким образом по определённым причинам. иначе нельзя сделать. это значит, что в такой реализации картинки, я не смогу добиться того, что нужно?

да, ссылки разные. <a href="#">Customized web development latest Belarus</a> <a href="#"><div class="salleftpart"> </div><div class="salcentrpart">SALES 100%</div><div class="salrightpart"> </div></div></a> этот метод не сработал. видимо нужно обязательно учесть, что вторая ссылка реализована тремя блоками(потому что закруглённая и должна тянуться) а с самого начала я делал так: <a href="#">Customized web development latest Belarus</a> <div class="sales"><div class="salleftpart"> </div><div class="salcentrpart"><a href="#">SALES 100%</a></div><div class="salrightpart"> </div></div> то есть за ссылкой шёл блок. который и не слушался. и сейчас не слушается. у ссылок display не указаны вообще.

ещё одна задачка,не могу решить. помогите. есть сслыка. сразу же за ней нужно вставить изображение-ссылку. но она сползает под блок, который образует ссылка. вторая ссылка должна "ползать за основной". то есть в зависимости от наполнения строки. я сперва реализовал отрицательным отступом, но тогда ссылка стоит на месте, а текст заползает под неё. вставлять ссылку в ссылку тоже глупо. на изображении красным показан блок, который первая ссылка отводит себе при переносе. не могу придумать. подскажите, пожалста.

и впрямь. огромное спасибо.

красным выделен блок .cont, в который вложен .block. видно, что зелёный(вложенный) вылазит из родительского. почему так? структура такая: <div class="cont"> <div class="block"> контент блока </div><!--block11--> </div><!--cont--> css: .cont{ width: 1100px; margin: 0 0 0 50px; min-height: 350px; border: 1px solid red; } .block{ width: 340px; height: 375px; float: left; border: 1px solid #0F3; }

.car{ background-image: url(img/body_car.jpg); background-repeat: no-repeat; background-position: center; width: 100%; height: 750px; min-width: 1200px; z-index: -3; border: 1px solid red; } изображение не растягивается. есть мнение, что таким образом (через background) растянуть не получится. можно сделать через вставку тегом img, задать ему ширину 100%. картинка будет растягиваться в ширину блока(=браузера), НО её высота пропорционально увеличится и картинка вылезет из блока внизу. а это как раз и является одной из задач, чтобы не дать ей вылезти (!!нельзя применять скрипты и canvas!! только html+css). ну и вторая задача, которую я, видимо,невнятно описал сперва : - ДОПУСТИМ, центром изображения является значок на капоте. так вот нужно сделать так, чтобы при масштабировании центр=значок оставался на месте, а картинка ползла вширь и ввысь. плюс к этому блок картинки не должен тянуться, а изображение ползти(скрываться) под тёмную полосу вверху и белую полосу внизу блока(здесь она не нарисована ещё). нечто похожее реализовано на http://planeta-kino.com.ua. +/- масштаб - главная картинка стоит.

ребята, совсем нет никаких предположений, как сие сделать?

добрый день. Фоновое изображение по ширине должен растягиваться на 100% ширины окна браузера(по высоте – пропорционально растяжению по ширине). Центр фонового изображения должен оставаться на одной и той же высоте. Таким образом, при большой ширине окна браузера верх изображения должен «срезаться» верхним меню; низ – белым градиентом; пропорции должны оставаться неизменными. можно ли как-то закрепить центр изображения? оО можно ли как-то обрезать изображение (вложенное в блок тегом img)?