DjTarik
-
Posts
698 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by DjTarik
-
Возможно... Я давненько не был у Лебедева, но точно знаю одно - если я сам до этого додумаюсь - пользы будет гораздо больше, нежели просто юзать чьё-то решение. Ща гляну, что там у него и как.
-
А де код или ссылка?
-
Блин... IE 6 и bottom: 0; Кто знает, как пофиксить? С position: absolute; right: 0; - разобрался, а вот с bottom: 0; - пока никак... Хотя проблема идентична. http://www.tarik.kasperovich.ru/test_4/index.html
-
Половину решил... Ща попробую добить оставшуюся)))
-
1. Читал, и не один раз... там вроде как резина ограничена, используется скрипт для прозрачности и что-то там мне еще не понравилось))) точно уже не помню... А мы ищем гибкое решение, подходящее НЕ под конкретный случай. Исправьте меня, если что не так. 2. Центрирование на скриптах - тож всем известно. А без них? =) Да и уже не про попап разговор...
-
могу... Ток чуть попозже, как до дома доберусь... P.S. Мне в нем не нравиться ток то, что в ie6 вылазят странные однопиксельные глюки то справа, то снизу... ХЗ отчего, почему и как это фиксить. Предположение ток одно - из-за процентов...
-
По теме - наконец доделал это коварный блок. Круглые полупрозрачные уголки, тянется во все стороны, 3 спрайта. По идее - работает везде. Если кто-нить может протестить и высказать замечания - буду очень рад. http://www.tarik.kasperovich.ru/test_4/index.html P.S. Спецом для psywalker: как тебе такой вариант? Может есть что лишнее? Можно как-нить упростить?
-
Блин, так и хочется написать готовый вариант)))
-
Нету... Элементы грузяться "сверху вниз", так, как они идут в коде. Правильно сказали, что нужно залить скрипт к себе, и вызывать его в самом низу. Еще как вариант твой див (в котором комменты, или что там у тебя =) тож расположить внизу, но отпозиционировать в нужное место. Тогда будет грузиться в последнюю очередь. Еще можешь проверить фаербагом, что, когда и сколько грузится. Возможно и не в скрипте дело...
-
Согласен c @LEXXX_NF - на карте со скриптом можно сделать. Так часто делают, когда выделяют области, штаты и т.д. на картах стран...
-
Ну как тебе сказать) Можно, но я не уверен, что кроссбраузерность будет полной. Т.к. в любом случае, мы используем блок с margin: 0px auto; - то центрировать будет не ровно. Так что даже ХЗ. Может попробовать использовать широкую тень на боди - и абсолютно позиционировать див-обертку? Тогда, по идее, должно быть нормально... Будет время - попробую.
-
Спасибо - теперь все предельно понятно)
-
Проверил - вроде работает. У родителя с паддингами и маржинами тож работает. Но еще потестирую. Слушай, раз уж тут такой разговор - А чем отличается expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto"); от expression(document.body.clientWidth < 1000 ? "1000px" : "auto"); ??? Спасибо) Блин... =) Не знаю, как те объяснить... Не в красном фоне дело - он там только для наглядности. Все дело в смещении - оно ж есть и с фоном, и без фона. Там в центральной части может быть что угодно - и это что угодно будет тянуться до футера, который прибит к низу. Плюс еще будут теньки. И если инфы мало - футер остается снизу, теньки видны, а центральная часть тянеться до футера. В таком случае, при ресайзе окна - 1пиксель справа. Поэтому метод с позиционирование подходит, т.к. решает проблему практически везде... Но как быть с ie7?
-
Спасибо, попробую... Максим, ответь на вышенаписанное, плиз...
-
Слушай, Мих, а можно ли как-нить отсыитывать не от боди, а от родителя таким же способом? O_o
-
Слушай, Макс... А в IE7 смещение есть... Или это только у меня? P.S. Я убрал "shadow_wrap" - он там особо не пригодится, если фон однородный... Какая-то хрень O_o У меня вот этот код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Однопиксельное смещение при центрировании фона - Tarik (15.11.09.)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="img/default.css" rel="stylesheet" media="all" /> <!--[if lte IE 7]> <link type="text/css" href="img/styles_ie.css" rel="stylesheet" media="all" /> <![endif]--> <style type="text/css" media="all"> /* <![CDATA[ */ /* — global — */ html { font-size: 100.01%; } body { min-width: 1000px; font-size: 62.5%; /* - '1em' = '10px' - */ } /* — // global // — */ /* — test — */ .windows { min-height: 100%; height: auto !important; height: 100%; overflow: hidden; position: relative; } .shadow { width: 1000px; height: 100%; margin-left: -500px; background: red; position: absolute; top: 0px; left: 50%; } /* — !!! — */ .shadow .left, .shadow .right { width: 50px; height: 100%; background: url(img/index_04/shadow.gif); position: absolute; top: 0px; border: 1px solid red; } .shadow .left { background-position: left top; left: -50px; } .shadow .right { background-position: right top; right: -50px; } /* — !!! — */ .wrapper { width: 1000px; padding-bottom: 200px; margin: 0px auto; background: white; overflow: hidden; position: relative; } .footer { width: 1000px; height: 200px; margin: 0px auto; margin-top: -200px; background: blue; overflow: hidden; position: relative; } p { margin: 1em; font-size: 1.6em; } /* — // test // — */ /* ]]> */ </style> </head> <body> <div class="windows"> <div class="shadow"> <div class="left"><!-- // --></div> <div class="right"><!-- // --></div> </div> <div class="wrapper"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p> <p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat. Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor. Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis. Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis. Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam. Aenean in quam eget dui tempus molestie.</p> </div> </div> <div class="footer"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p> </div> <!-- // © Tarik, 2009 // --> </body> </html> работает и в ie6 без экспрешенов и зет-индексов... O_o Какая-то фигня...
-
ok, ща еще попробую для себя сделать... Отпишу скоро... Но на счет height:expression(document.body.clientHeight+'px'); - хотелось бы узнать. А то мне кажется, что все-таки не от родителя...
-
Сорри, конечно, если вас обидела эта фраза, но я говорил только про себя и исключительно свое мнение. В ваших способностях и ничуть не сомневаюсь, т.к. я больше не знаю таких "маньяков верстки", и именно поэтому задаю тут свои вопросы. Тоже не верно - я задаю свои вопросы только после того, как сам уже пробовал решить проблему и пришел к какому-либо выводу. В данном случае я решил эту проблему с помощью заливки цветом тени всю центральную часть (поэтому смещение не заметно). Но т.к. это не решение проблемы - решил спросить, что да как... Теперь по теме: Спасибо за два оч классных решения - теперь буду знать, что такое возможно и буду стараться применять на практике. Решение Медведя - единственное, что мне не понравилось - много дополнительных элементов и свойство overflow-x: hidden;... А так все круто...) Максим - я раньше так думал делать - но отказался по 2-ум причинам: наличие overflow-x: hidden; (хотя я уже подумываю, чтобы с ним смириться, но условия пока не позволяют =) и expression для ie6. Но в целом - твое решения я, скорее всего, и буду юзать... Т.к. по коду "красивее"))) overflow-x: hidden; - не работает в Опере 9.2 - а у меня условия кроссброузерности - начиная с 9.0... Даж не знаю, что делать теперь( height:expression(document.body.clientHeight+'px'); - Максим - расскажи, плиз, как именно работает это свойство? Оно рассчитывает высоту от окна броузера, или от родителя? Просто, я смотрю, что без overflow его практически нем смысла использовать и нужно обрезать лишнее?
-
ok, жду...))) Но решения нету)))
-
1. нет! =) Я сделал такой рисунок только для наглядности - видно, что див с width: 1000px; margin: 0px auto; - на один пиксел смещается с центра. А должен быть по центру - т.к. у фона красная полоска - именно на 1000px. 2. Сделай мне такой блок посередине, чтобы тень появлялась при разрешении только >1000px и чтобы футер тянулся вниз... P.S. Можно залить вместо красного цвета цветом как у тени (я так всегда и делаю =) и тогда смещение не будет заметно. Но это не решение проблемы - я "обход", как сказал медведь)))
-
Да, в этом проблема. Там сверстано так: у боди есть фон на 1200 по ширине, который тянется. Центральная часть на 1000px (красного цвета) от нее теньки (они должны появлятьсяс только при разрешении больше 1000 пикселей) Если я сделаю див-обертку на 1000 и отцентрирую ее - при ресайзе появляется однопиксельная красная полоска справа - значит див-обертка лежит не ровно над фоном. А нужно ровно. =) Вот и вся проблема... При прибивании футера - эту тень кидаю в дополнительный див - но проблема вся равно остается. Как решить - не знаю. Что-то мне подсказывает, что это нормально, когда браузеры так себя ведут. Если кто-нить поскажет идею - было бы круто) Картинка с тенью - по ссылке выше... отлучусь ненадолго - думаю, что понятно описал проблему... ))) У меня таких "проблем" интересных - дофига))))
-
Да, футер должен прибиваться к низу.
-
Во, Медведь, сделал так, как ты написал: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html { height: 100%; } body{ height: 100%; margin:0; min-width:1000px; _width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto"); } #wrapper{ position:relative; overflow:hidden; min-height: 100%; height: auto !important; height: 100%; background: red url(img/index_04/body_bg.gif) repeat-y center top; } .wrap1{ position:relative; left:50%; width:1000px; } .wrap2{ position:relative; left:-50%; width:1000px; } #main{ width:100%; overflow:hidden; background:#3a76ca; } </style> </head> <body> <div id="wrapper"> <div class="wrap1"> <div class="wrap2"> <div id="main"> <p>Lorem ipsum dolor sit amet consectetuer metus ullamcorper elit vel habitasse. Consequat et id nunc Aenean.</p> <p>Vitae congue eros adipiscing Curabitur pellentesque ut eu eros quis ipsum. Sollicitudin quam faucibus elit interdum vel vel quis tincidunt interdum interdum. Maecenas dictum.</p> <p>Tellus Lorem lacus cursus felis ante nunc ac magna eget ac. Dui eu porttitor adipiscing Sed Pellentesque lobortis vel auctor.</p> <p>Nunc vitae consequat malesuada quam felis nulla Nam Curabitur porttitor Vestibulum. Id tincidunt quis ornare.</p> <p>Dignissim euismod Pellentesque eros auctor eros urna a pretium cursus Nam. Neque.</p> <p>Senectus justo congue ante quis augue tempus ridiculus ac interdum.</p> <p>Senectus pharetra vel Aenean hendrerit non id volutpat massa interdum sed. Convallis turpis.</p> <p>Pellentesque tellus sapien congue a elit Ut sapien pulvinar convallis mauris. Phasellus malesuada nec felis ut vitae Phasellus.</p> <p>Elit Quisque arcu enim congue Nulla ac nunc Sed Aliquam.</p> <p>Malesuada Pellentesque nisl vel eu dui Nam Vestibulum quam eget id. Urna.</p> </div> </div> </div> </div> </body> </html> Все равно при центрировании смещается... Или я чего-то недопер? O_o
-
Спасибо за вариант, завтра попробую разобрать и отпишу, что там да как...
-
Логично. =) Тогда получается, что все правильно? Так и должно быть и это не баг? Так я пробовал вешать фон на див, который растянут по всей ширине экрана, а в нем еще один див - margin: 0px auto; - та же фигня... Что ты подразумеваешь под "центрировать его с помощью релейтивов"?