PanSoul
-
Posts
136 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by PanSoul
-
фиксированный бекграунд при определенной высоте
PanSoul replied to sergeyvolk's question in HTML Coding
min-height и min-weightwidth P.S. говорят эти правила помогут -
CSS 3 тебе в помощь, а именно background-size
-
Расчет ширины блока в IE после float и его перенос
PanSoul replied to voyager's question in HTML Coding
Назначь зелёному блоку тоже "float:left" поспешил - Хотя в принципе всё верно Назначь зелёному блоку тоже "float:left", и ЕЩЁ КОЕ-ЧТО: ты хочешь поместить 400px хапихать в блок шириной 300px!!! ИСПРАВЬ! -
Резиновая ширина, навигация слева в виде таблицы
PanSoul replied to bdshadow's question in HTML Coding
Возьмите за привычку на этом форуме: показывать скиншот того как ДОЛЖНО БЫТЬ и того, как НЕ ДОЛЖНО БЫТЬ. Вам многие будут благодарны, и Вы быстрее получите ответ на свой вопрос -
Ну здесь явно не через стандартный делать нужно Через фреймворк какой-нить или самому на JS )
-
Не вижу тут вообще никакого фанатизма, просто обычная логическая структура действий. Таблица - строка - ячейка. Кстати строки тоже нет, что в старых ФФ будет косяк. Тогда Я не вижу смысла в этих правилах - ибо по сути (как Вы утверждаете) создаётся тажа самая таблица! Разве не парадоксально?!
-
Именно для этого(и не только ) Я и создал div.F (который не являлся таблицей и её эмуляцией, т.к. в таблицах позиционировать, насколько Я помню, нельзя) в него же вложил ссылку a.fi4a с абсолютом и шириной и высотой, равной родителю, а так же вложил div.wrapper. И так как наш div.wrapper находится ниже, то естественно, имеет привилегию - тем самым он виден. Ах да, ещё обязательно, нужно чтоб у div.wrapper бэкграунд был равен none! А оно обязательно что ли? display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу! Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки! И тем самым рискуешь нарваться на косяки в разных браузерах. Наврятли, единственное, где могут быть проблемы- так это в Safari 3.1! Во всех остальных браузерах всё должно быть отлично. Ах, да, а ещё на моей стороне validator Валидатор не может тебя ругать, потому что твой код чистый и правильный. Он не может ругать за то, что например абсолют не помещён в релативный блок. Ну это да..., но разве в CSS предусмотрена придерживаются так сильно к семантике? К семантике придерживаюся со стороны HTML - а с ней всё в порядке! Просто считаю, что семантика - это хорошо, но не нужно доходить до фанатизма.
-
А оно обязательно что ли? display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу! Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки! И тем самым рискуешь нарваться на косяки в разных браузерах. Наврятли, единственное, где могут быть проблемы- так это в Safari 3.1! Во всех остальных браузерах всё должно быть отлично. Ах, да, а ещё на моей стороне validator
-
А оно обязательно что ли? display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу! Нет, Я её не эмулирую. Я лишь эмулирую свойство ячейки!
-
Да на здоровье P.S. Да, внезапность - мой конёк
-
А оно обязательно что ли?
-
Ну вот, могу предложить вот такое извращение <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ref</title> <style> .F{ width:130px; height:100px; float:left; margin:10px; position:relative; } .wrapper{ display:table-cell; width:130px; height:100px; vertical-align:middle; } .fi4a{ display:block; width:130px; height:100px; background:#e3e4c9; position:absolute; top:0; left:0; } .item { display:block; width:130px; height:auto; text-align:center; background:#e3e4c9; vertical-align:middle; color:black; font-family:Arial; overflow:visible; position:relative; } .r1{ position:absolute; top:100%; width:100%; } .r{ float:left; width:50%; background:gray; color:#fff; } .r:hover{ background:black; } </style> </head> <body> <div class="F"> <a href="index.html" class="fi4a"></a> <div class="wrapper"> <div class="item"> <a href="index.html">название</a> <div class="r1"> <a href="#" class="r">опция-1</a> <a href="#" class="r">опция-2</a> </div> </div> </div> </div> <div class="F"> <a href="index.html" class="fi4a"></a> <div class="wrapper"> <div class="item"> <a href="index.html">очень длинное название</a> </div> </div> </div> <div class="F"> <a href="index.html" class="fi4a"></a> <div class="wrapper"> <div class="item"> <a href="index.html">очень длинное название</a> <div class="r1"> <a href="#" class="r">опция-1</a> <a href="#" class="r">опция-2</a> </div> </div> </div> </div> </body> </html> P.S. Я не стал комментировать - думаю, Вы поймёте. Но если что, то спрашивайте.
-
Вот если честно, то не совсем ясно в чём именно Вам нужна помощь?! Вроде бы, в том примере, который Вы выложили - у Вас всё, как Вы и хотите, за исключением пляшущих ссылок подразделов (но может быть так и задумано), которое легко исправить многими способами, да даже хотя бы позиционированием... Покажите лучше на картинке, как должно быть (с 1 строчкой и с несколькими), фиксирована ли высота этой ОСНОВНОЙ ССЫЛКИ?
-
А код слабо СЮДА выложить? Или хотя бы на тестовую страничку свою?
-
Привет Всем Вот, как обычно, сижу верстаю - и тут встречается такая проблемка: нужно, чтобы ДИВЫ занимали всю высоту их РОДИТЕЛЯ. Ну или схожая ситуация - чтобы ДИВЫ были равны по высоте самому высокому(длинному) ДИВУ в РОДИТЕЛЕ (В общем-то ситуация одна и та же). Перепробовал кучу приёмов - безрезультатно... Вот код: <!DOCTYPE html> <html> <head> <style> body{ background:#e4e4e4; } .wrapper{ width:700px; background:silver; border:4px dashed gray; margin:0 auto; overflow:hidden; } .left, .right{ float:left; width:40%; margin:10px; background:#eee; padding:10px; } .right{ width:200px; border:2px solid red; } </style> </head> <body> <div class="wrapper"> <div class="left"> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro.<p /> Ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis ostrum exercitationem ullam corporis suscipit laborio sam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit,qui in ea voluptate velit esse, quam nihilmolestiae consequatur, vel illum. </div> <div class="right"> Dilema! </div> </div> </body> </html> - Как сделать, чтобы ДИВ в красной рамке был по высоте РОДИТЕЛЯ ( = самому длинному у родителя по высоте ДИВУ)? При этом высота родителя динамическая. Помогите, дайте подсказку! Или же такое нельзя, но можно только с помощью скрипта - если так, то тоже прошу помощи, ибо JS не знаю
-
Если у Вас ifframe со Страницы #2 грузит тот сценарий, в который Вы передаёте данные -то "ДА", это возможно!
-
Здесь явно наблюдается 2-колоночный макет сайта ПО ВЕРТИКАЛИ, а у Вас, видимо, по горизонтали (иначе как еще объяснить съезжание "крестика" при изменении размера браузера. P.S. просто код не смотрел.. )...В общем проблем не было бы, если бы сделать общий див (обёртывающий), а внутри него левый (фикс) и правый(%)... И полность согласен с psywalker, лучше переверстать - времени кучу сэкономите!
-
Не знаю, у меня во всех браузерах, кроме ИЕ всё норм...(ну по крайней мере с тем кодом, что Вы выложили...А выложили Вы явно не всё! - Я про css)
-
Пропиши еще в #container{ ... overflow:hidden; }
-
Спасибо Всем (: Вопрос к swetlana: А как же тогда быть? Ведь в этом "блоке" находится логотип и бэкграунд с изображением здания, ведь логично его было сделать в section или же...article? А если нет - то тогда как? Просто div что ли? Ну а span - не вижу ничего противоречащего, чтобы его там не было... Извините, но если бы всё было так просто, то мне бы было бы достаточно и одного input'a. Но из-за того, что Все браузеры нормально восприняли, к примеру такое как input{ ... background:#eee; ... }, КРОМЕ IE8 , -- мне Пришлось обернуть этот input в span, пришлось делать эти "новороты" p.s. А может у меня бэкгроунд не применялся, из-за того, что Я тестил под IE8 на IEtester'e ? (во всяком случае, Я оправдал использование данного span'a) Да, мне самому это не нравится, но Я решил, что это самый оптимальный выход из положения, а если нет, то что это значит: Создавать для каждого мнин-блока с картинкой свой класс, где и чистить обтекание? Зачем? Что это? Что несёт читателю этот абзац? Ничего не несёт, просто мне нужен был определенный отступ, вот Я и сделал этот параграф... Но как Я уже понял - это неверно( Значит, нужно было сделать класс для групп ссылок, и уже там прописать верхний маргин, верно? (: Serlutin, спасибо тебе, ты пролил немного света на эту тёмную сторону HTML5 (: И вот хотелось бы узнать у тебя, а такие теги, как <header>,<footer> - они могут использоваться только раз на странице или нет? и.. Это значит, что им нельзя задавать стили? Просто мне кажется, что как раз таки и аналоги, просто для семантики решили создать именно <header>, <aside> и др. теги, чтобы визуально было легче ориентироваться...
-
Да вроде Я над каждым дивом думал, стоит ли его писать или нет... Вот только над чем Я думал долго: это стоит ли div'ы оставлять как div'ы, или же их нужно в section - если данные div'ы служат для разметки?! Жду-жду
-
Вот этой фразой чтоли? Я что-то не понял...
-
Можно и поржать... Но прежде, пожалуйста, скажите что не так? Ведь ради этого Я и выкладываю, со стороны виднее ошибки...
-
Привет Всем Вот решил переходить на новые стандарты и сверстал на HTML5. Просьба оценить, в Первую очередь, верно ли Я употребил новые теги, по назначению ли? - конечно, Я прошу это у тех, кто смыслит в этом... Ну и по традиции, прошу оценки самой вёрстки... как же без этого Enter in P.S. источник "вдохновения"
-
Правый блок в основном контенте, при изменении масштаба, не растягивается на всю высоту... И..и надпись Aenean pede enim(которая со стрелочкой) скорее всего далжна быть ссылкой