Azadi
-
Posts
178 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Azadi
-
Компании Softline, работающей в области продаж широкого спектра программного обеспечения (авторизованный партнер Microsoft, Oracle, IBM, Novell) требуется верстальщик. Обязанности: Верстка макетов сайтов (от простых промо-страничек до многостраничных порталов). Переверстка уже существующих проектов. Работа с контентом. Требования: Хорошо владеть HTML/CSS. Знать старые и новые возможности браузеров. Умение работать с графикой на уровне вырезать/уменьшить/обработать готовое изображение. Умение писать валидный и логичный код, знать стандарты W3C. Умение ориентироваться в PHP-коде. Знание javascript, js-фреймворков (jQuery). Знание шаблонизаторов (Smarty), CMS Bitrix, SVN приветствуется. Высокая обучаемость. Условия работы: Полная занятость, работа в офисе. Оформлении в соответствии с ТК РФ, пятидневка, с 9.00 до 18.00. Возможность профессионального развития. Контакты: Просьба высылать резюме на email: job@softline.ru.
-
Ну вообще-то в их верстке нет ничего невозможного. Касательно темы можно посмотреть, как сверстана шапка. 2 колонки, 1-я фиксированной ширины, 2-я плавающей. Опять же рекомендую поразбираться в коде, можно много интересного найти
-
AKyHuH, посмотри как http://www.w3.org/ сверстано
-
line-height:40px; для блока с новостями, тогда можно будет внутренний H1 с помощью vertical-align двигать. position:relative; left:-20px; либо вставить внутрь еще один контейнер и подвинуть его влево отрицательным маргином.
-
Ну да, новые проекты верстать без DOCTYPE нельзя. Даже ребята с Яндекса признают, что использование для главной страницы Quirks mode было ошибкой. Вообще-то мое предыдущее сообщение как раз для тех, кому приходится работать с морально устаревшими версиями IE. А таких людей, увы, еще очень много. psywalker, IE5 (и даже IE5.5) официально сошел с дистанции, я бы рекомендовал не поминать его в суе
-
Стоит напомнить, что position:fixed; не будет работать в IE 6 и в IE7, переведенном в Quirks mode. Нужно будет решать данную проблему при помощи expression'ов.
-
Искренне удивляет отношение автора топика к верстальщику как к профессионалу своего дела. По-моему у вас в фирме, Verder, неправильно построены бизнес-процессы... Я уже и забыл когда последний раз такие макеты верстал. Хотя и верстал, когда фрилансил.
-
Видел на винграде давным-давно более элегантное решение, но первый черновой вариант примерно такой: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <style type="text/css"> * {padding:0; margin:0;} .wrap { overflow:hidden; background:#eee; zoom:1; padding:20px; } .wrapper { float:left; width:100%; margin-right:-100%; } .left, .right { float:left; width:50%; clear:right; } *HTML .left { width:50.09%; } .right .in { margin-left:250px; background:#f00; } .left .in { margin-right:250px; background:#0f0; } .in { padding:20px; } P {margin:1.12em 0;} .center { margin:0 auto; width:460px; background:#00f; position:relative; padding:20px; } </style> </head> <body> <div class="wrap"> <div class="wrapper"> <div class="left"> <div class="in"> <p>sagag</p> <p>sagag</p> <p>sagag</p> <p>sagag</p> </div> </div> <div class="right"> <div class="in"> <p>sagag</p> </div> </div> </div> <div class="center"> <p>sagag</p> <p>sagag</p> <p>sagag</p> </div> </div> </body> </html> А вообще советую пользоваться поиском. И не только по форуму, но и гуглом, яндексом и т.п.
-
почему моя html табличка ведёт себя так странно?(см внутрь)
Azadi replied to yummi's question in HTML Coding
У тебя 4 столбца в табличке, а не 3. Для первых 2-х строчек во второй ячейке пропиши colspan=2. А вообще, лучше с таблицами так не работать. Табличке проши table-layout:fixed. width:100%, все свойства вынеси в CSS. Примерно как тут описано: http://veerle.duoh.com/index.php/blog/comm...s_styled_table/ Ну или посмотри как на http://ya.ru/ раскладку таблицами сделали и делай по аналогии. -
vertical-align:top; пробовали? Или может быть возможно сделать элемент блочным и дальше от этого плясать? Сам такой проблемы никогда не замечал. И вообще, http://dowebsitesneedtolookexactlythesameineverybrowser.com/.
-
Статья с хабра в тему: Неофициальное ЧаВо по поводу непродления работы над XHTML2
-
В IE6 заработает, и я уже сказал что нужно для этого сделать И хватит уже письками тут мериться, все равно автор либо проблему уже решил, либо на нас забил Игра не стоит свечь, а результат труда.
-
psywalker По-моему ты опять не понял Пунктирная линия слева должна центрироваться внутри серых областей фона, ширина которых меняется динамически в зависимости от ширины окна браузера. skatadov Если мой вариант на дивах попилить напильником, то всё у тебя будет хорошо. Правда для IE6 придется понавешать expression'ы для эмуляции position:right; (хотя тут можно обойтись и CSS, читаем Чикуенка) и position:bottom;
-
Не знаю, я не понял ни из кода, ни из объяснений, что ты имел в виду
-
Если совсем отчаяшься, то можно пойти на компромисс с совестью и сделать каркас с помощью таблицы: <!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>[TITLE]</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } html { height: 100%; width: 100%; background: #9CA7B0; } body { position: relative; height:100%; min-width: 760px; max-width: 1280px; } .wrap { position: relative; background:#fff; width:760px; height:auto !important; min-height:100%; height:100%; margin:0 auto; } .leftborder, .rightborder { position:absolute; right:760px; left:0; height:100%; top:0; bottom:0; } .leftborder I, .rightborder I { width:50%; position:absolute; display:block; height:100%; background:#f00; } .rightborder { left:760px; right:0; } .rightborder I { left:50%; } </style> <body> <div class="leftborder"> <i></i> </div> <div class="rightborder"> <i></i> </div> <div class="wrap"> <div class="content"> content </div> </div> </body> </html> Я бы, наверное, сверстал на таблицах и не мучился.
-
Примерно так можно: <div style="background:#eee; margin:0 auto; overflow:hidden; padding-right:200px"> <div style="float:right; width:200px; background:#fff; margin-right:-200px; position:relative;"> right side </div> <div style="border:#000 1px solid">center text</div> </div> Но лично я предпочитаю более сложный, но в то же время и более надежный способ господина gordi: http://trifler.ru/blog/i/layouts/ideal/footer_gordi.htm
-
Можно ссылку на макет в личку? Интересно.
-
Советую почитать http://habrahabr.ru/blogs/webdev/50996/
-
Примерно так: <!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>[TITLE]</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> * { padding:0; margin:0; } body { text-align:center; } #container { width:80%; margin:0 auto; text-align:left; } #main { padding-right:200px; background:#f0f0f0; overflow:hidden; } #first { background:#c99; } #second { float:right; width:200px; display:inline; margin-right:-200px; background:#99c; } #first,#second { padding:10px; } </style> </head> <body> <div id="container"> <div id="main"> <div id="second"> 2 </div> <div id="first"> 1 </div> </div> </div> </body> </html>
-
Поэтому, возможно, посоветую то же самое — По первому рисунку ничего не посоветую, надо хорошенько подумать, как бы заставить центральный контент обтекать правую колонку. — По второму рисунку можно попробовать такой код: <!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>[TITLE]</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Robots" content="index,follow" /> <style type="text/css"> * { padding:0; margin:0; } html,body { height:100%; } body { padding:0 20px; } .wrap { margin:0 104px; min-height:100%; height:auto !important; height:100%; position:relative; background:orange; } .header { height:20px; background:#fff; } .left { float:left; width:100px; margin-left:-104px; background:#0f0; padding-bottom:24px; position:relative; display:inline; overflow:hidden; } .right { float:right; width:100px; margin-right:-100px; left:4px; background:#6f6; padding-bottom:24px; position:relative; display:inline; overflow:hidden; } .main { overflow:hidden; padding:4px 4px 24px; } .main .block { border:#000 1px solid; margin:0 0 20px; padding:5px 0; } .main .block .in { float:left; width:32%; display:inline; margin-left:1%; background:#c00; } .footer { height:20px; margin-top:-20px; background:#fff; position:relative; } .clear { height:1%; } .clear:after { display:block; content:'.'; height:0; visibility:hidden; clear:both; } </style> </head> <body> <div class="wrap"> <div class="header"> </div> <div class="left"> <p>П. Бурдье понимал тот факт, что информационно-технологическая революция сохраняет современный субъект власти, говорится в докладе ОБСЕ.</p> </div> <div class="right"> <p>Согласно данным Фонда "Общественное мнение", механизм власти существенно вызывает механизм власти, утверждает руководитель аппарата Правительства.</p> </div> <div class="main"> <div class="block clear"> <div class="in"> <p>Демократия участия вероятна. Политическое учение Платона определяет антропологический авторитаризм, отмечает Г.Алмонд.</p> </div> <div class="in"> <p>Социальная стратификация важно ограничивает бихевиоризм, на что указывают и многие другие факторы. П. Бурдье понимал тот факт, что политическое манипулирование постоянно.</p> </div> <div class="in"> <p>Политическое учение Руссо сохраняет постиндустриализм, что получило отражение в трудах Михельса. Политическая элита, с другой стороны, означает современный элемент политического процесса, подчеркивает президент.</p> </div> </div> <div class="block clear"> <div class="in"> <p>Политическое учение Руссо сохраняет постиндустриализм, что получило отражение в трудах Михельса. Политическая элита, с другой стороны, означает современный элемент политического процесса, подчеркивает президент.</p> </div> <div class="in"> <p>Социальная стратификация важно ограничивает бихевиоризм, на что указывают и многие другие факторы. П. Бурдье понимал тот факт, что политическое манипулирование постоянно.</p> </div> <div class="in"> <p>Демократия участия вероятна. Политическое учение Платона определяет антропологический авторитаризм, отмечает Г.Алмонд.</p> </div> </div> </div> </div> <div class="footer"> </div> </body> </html>
-
Картинки — это хорошо и наглядно. Но лучше код.
-
А можно ссылку на рабочую страничку чтобы со всеми картинками и можно было в Firebug'е верстку погонять? Тогда можно было бы страшный image replacement от DreamWeaver убрать и на CSS покрасивше сделать.
-
Делать горизонтальное меню при помощи display:inline - геморрой. Можно конечно, но в вашем случае лучше примерно так. И лучше будет, если вы начнете верстать сначала под FF, Opera и Safari, а потом уже под IE. Специально для ослика придумали много всяких хаков, CondComments, изучили его особенности и глюки.
-
Эхх, если бы без дополнительных оберток... целая одна дополнительная ссылка с примером Кстати, я этот метод почти не тестировал, фик знает как он ведет себя в боевых условиях.
-
А для IE display:inline работает так же, как и display:inline-block для остальных браузеров (исключая FF2, как писалось выше; но FF2 легко побороть при помощи display:-moz-inline-grid; и доли шаманства). Я в свое время больше суток убил, чтобы с этой проблемой разобраться... Могу показать свои костыли, если кому-нибудь интересно