Архив > Tag: css

Шутка дня

<!‐‐[if lte IE 7]> <style> * {font-family: "Comic Sans" !important;} </style> <![endif]‐‐>

Scrollbar и центрирование

Столкнулся сегодня с косяком, допустим есть однотипные страницы, на которых основной контент автоматически центрируется.

#content {
   margin: 0 auto;
}

Так вот, при загрузке страницы, до момента пока основной контент еще не подгрузился, а шапка уже появилась, то scroll'a справа нету, как только контент подгружается, то сбоку появляется scrollbar и весь контент из-за этого прыгает на несколько пикселей влево. В целом этот баг можно решить, если задать основному блоку min-height, но это не универсальное решение. Тем более это может вызывать косяки, если вдруг окажется, что контента у нас на странице нету, будет большой вентум.

Думали-думали, не знали что делать, в итоге решили сделать как у fb, что бы скроллбар был всегда на странице, не важно активный или нет.

body {
   overflow-y: scroll;
}

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

Может расскажите другие способы решения?


Еще немного про собеседования

Решил дополнить поднятую тему про собеседования и рассказать о вопросах которые задают чаще всего.

Изначально, я хотел в этом посте написать все самые интересные вопросы и дополнить их ответами, но когда начал его писать, то понял что ответы тут не нужны. Те кому это действительно надо, сами порешают данные задачи, остальные могут просто пролистать.

Первое на что хочу обратить ваше внимание, это то, что вопросы которые задают php(?) программистам, в основной своей сути имеют довольно академический характер и в жизненных циклах проектов встречаются не часто, но тем не менее, нужно уметь решать эти задачи. Это обусловленно тем, что у работодателей нету времени и желания давать вам типичные задачи, в стиле - "Напиши класс, который будет отвечать за работу с пользователями". 99 процентов всех вопросов задаются по заготовленному листку и должны быть решены на листке бумаги. Никаких IDE, никаких гуглов, никаких ответов типа "я не помню синтаксис". Если вы настроены решительно и хотите произвести хорошее впечатление, то уделите время, что бы потренироваться и чувствовать себя уверенно.

Все вопросы можно разделить на три категории: PHP, MySQL(?), все остальное.

Любой из этих пунктов, так же делится на две части: теория и практика. Начну пожалуй с PHP. С теоретическими вопросами, в целом, не сложно. Они почти везде одинаковые: Отличия между PHP 5.2 и 5.3, основные приципы ООП. Не частый, но вопрос с подвохом - "В каких случаях использование ООП, является убыточным?". Дальнейшие вопросы на теорию, в основном, зависят от ваших ответов, и несут цель узнать на сколько хорошо вы разбираетесь в материале о котором говорили выше.

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

function revert( $string ){ return strrev( $string ); } ?>

Но это не cамый лучший вариант ответа. Выучите алгоритм с обращением к символом строки как к объекту массива.

Очень частые задачи, на написание рекурсивных функций или на понимание работы операторов кода.

$a = 10;
echo ++$a + $a++ - ++$a + $a ;

На днях пока решал задачи, попалось интересное задание, у меня такое ни разу не спрашивали, но думаю что к такому надо быть готовым:

var_dump( 0123 == 123 );

Думаю, что на счет PHP я достаточно ясно изложил типовые вопросы, если что-то осталось не понятно, то спрашивайте в комментариях.

Теоретические вопросы про MySQL или любую другую СУБД почти всегда касаются индексов и насколько вы понимаете как их использовать, в каких случаях и на что их ставить и в каких случаях индексы могут быть вредны. Обязательно спросят про различия между версиями. Поинтересуются насколько глубоко вы знаете тонкости работы СУБД и вкурсе ли вы про то, что такое тригеры, хранимые процердуры, представления.

Практические задачи - это просьба нарисовать две таблицы с различными данными и просьба написать запрос, который покажет умеете ли вы использовать операторы HAVING, GROUP BY, ... etc. Обязательно знать разницу между JOIN запросами.

Еще часто спрашивают про верстку, про css, про javascript. Но расписывать это все не вижу смысла.


Ну вот и обновились

blog.rpsl.info

Мелочей еще конечно много, но буду править и постараюсь снова начать писать.


jQuery + label tag

Очередной, очень маленький, но ужасно удобный trick.

Суть очень простая, он автоматически делает  одинаковый width для всех элементов \<label>.

Изначально форма выглядит примерно вот так:

before

Добавляем стиль:

label, input[type="text"]{
    float:left;
    display:block;
}
label{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

Добавляем javascript:

$(document).ready(function() {
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);
});

И вуаля:

after


Клеви навигация.

Забыл? Бросил? Нет, я всё ещё тут, просто в последнее время многое поменялось и на посты время не оставалось. Ведь мой блог это не очередной "манимэйкерский" высер, а так, для себя в первую очередь.

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

Началось всё с того, что некоторое время назад, я прикрутил к блогу hotkey (hotkeys для wordpress), но какой в них смысл, если об этом никто не знает. Вот мне и захотелось вынести их на передний план.

Для этого, я чуть - чуть поиграл с css стилями, и теперь .footer выглядит следующим образом:

#container_foot {
    border-top:thin dashed;
    bottom:0;
    height:32px;
    left:0;
    padding-bottom:0;
    padding-top:5px;
    position:fixed;
    width:100%;
    z-index:1000;
}

Это то, что касается расположения. Стиль он и так унаследует от вашей темы.