Плывут блоки при масштабирование

[Chupachups]

Всем привет.
Я новичек в верстке, поэтому вопрос может быть глупым, но всё же. Собственно проблема возникает при масштабирование страницы, блоки начинают съезжать. Как это исправить? Буду благодарен за помощь.

и вот живой пример http://dofamin.tor.su/page/test/

и пользуясь моментом задам еще 1 вопрос. проблема заключается при работе со шрифтами. Как корректно подобрать размер шрифтов из PSD ? Например в PSD размер написан 16pt, но при верстке с указание размера шрифта в 16pt возникают разногласия с макетом.

[npofopr]

1. Под масштабированием вы понимаете кручение колесика?

2. Наложите поверх верстки картинку макета, да проверьте. PerfectPixel для браузеров есть.

[Zverushka]

В настройках фотошопа поставь отображение в пикселях и ставь пиксели. При увеличении или уменьшении масштаба страница не должна меняться - не должно ничего никуда уезжать.

[Chupachups]

Да, при прокрутки колесика.
Да я то понимаю, что ничего крашиться не должно, но что то у меня  не получается.

[npofopr]

Еще как должно все ломаться :-) 

Тем более в шрифтах. 

Не самый лучший способ для проверки верстки.

[Светлана Г.]

Блоки падают из-за того, что им в какой-то момент не хватает указанной ширины:  

.footer .contact {width: 510px;}

 

Нужно поместить контактную информацию в один общий блок, и при этом не указывать ширину этому блоку.

Edited December 8, 2013 by Светлана Г.

[Chupachups]

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

Для этого я указал 510px ширины и задал блоку margin:0 auto;, тем самым отцентрировав его в родительском, но шрифты протестуют всей красе и нагло валят верску. 

Так как я человек не опытный, вот хотел узнать, может есть еще какие либо способы реализации задуманного?

 

хех) пока делал чаёк посетила мысля.

Оказывается всё намного проще, чем я думал)

Нужно было сделать обвертку с нужной шириной ( в моём случае это 940 px) и задать ей padding-left:50%; width:370px; (что в сумме составило 940px), а после указать .footer .contact ; и убрать значение width

Всем спасибо за помощь)

Не самый лучший способ для проверки верстки.

 

А какой лучше?

Edited December 8, 2013 by Chupachups

[Z1gnet]

хех) пока делал чаёк посетила мысля. Оказывается всё намного проще, чем я думал) Нужно было сделать обвертку с нужной шириной ( в моём случае это 940 px) и задать ей padding-left:50%; width:370px; (что в сумме составило 940px), а после указать .footer .contact ; и убрать значение width

воу воу воу... палехче... что то тут у вас все слишком сложно. на самом деле все гораздо проще!

/* это все стили которые вам нужны для .footer .contact остальные можно смело удалить, он не нужны*/.footer .contact {    color: #FFFFFF;    text-align: center; /* центрируем содержимое */}.footer .contact div {    display: inline-block; /* делаем не float, а инлайн-блок и тогда центрирование родителя будет работать */    vertical-align: middle;}

итог: блоки отцентрированы, структура предельно простая, работает в ие8+ (ие7 не понимает, для него нужно через развилку задать display:inline;) и ничего не падает когда крутим колесико )))

Edited December 8, 2013 by Z1gnet

[Z1gnet]

Для этого я указал 510px ширины и задал блоку margin:0 auto;

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

 

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

навигацию, к примеру, можно было сделать так - http://codepen.io/anon/pen/vrhuq

Edited December 8, 2013 by Z1gnet

[veremey]

Попробуйте не  width:510px , а  min-width:510px;  Думаю эта проблема будет решена.

 

[Z1gnet]

Попробуйте не width:510px , а min-width:510px; Думаю эта проблема будет решена.

и толку? блок растянется на 100% так как он блочный.

[Chupachups]

Спасибо всем за помощь)

Вот пока решал одну проблему, появилась еще одна. Собственно суть в том чтобы текст отцентрировать но вертикали относительно textarea

 http://codepen.io/anon/pen/JxsFk

Как бы это реализовать?

[Zverushka]

Вместо placeholder сделать label - и немного javascript. Если речь идет о тексте в текстариа.

Edited December 9, 2013 by Zverushka

[Z1gnet]

я так понял что не про текст в текстарии (тавтология блин)

http://codepen.io/anon/pen/gkznq вот решение

[Светлана Г.]

http://codepen.io/anon/pen/gkznq вот решение

 

</form> пропустили. 

[Z1gnet]

пропустили.

спасибо за внимательность. правда я этот код не набирал, взял код @Chupachups, и подправил стили

[Chupachups]

Всем спасибо, очень помогли)