Проблемы с div'ами при изменении масштаба браузера

[PavelK]

Уважаемые друзья!

Только начал изучать вёрстку и столкнулся с серьёзной проблемой.

Сверстал макет, ещё не наполнил, а нужные блоки просто подсветил разными цветами. Налепил кучу дивов, всё красиво и круто как хотел.

Но при изменении масштаба в FireFox все эти дивы куда то разъезжаются, при чём не имеет значения + или - к масштабу.

Мои догадки. Покурив интернеты и этот форум,, ответа на вопрос не нашёл, но пришёл к выводу, что проблема кроется в 2 моментах:

1. Эти дивы лежат в других блоках див. Ну например есть 6 плашек с категориями товара. Создал шесть дивов и положил их в один большой див. Задал родительскому position relative, а внутри лежащим - absolute. Таким образом это помогло мне спозиционировать эти блоки как я хочу. Но видимо тут то и кроется какая та бяка. А если не делать через это, то как их позиционировать тогда? С другой же стороны много блоков, у которых не заданы position и там та жа самая фиговина.

2. Позиционируя при абсолюте элемент свойствами top и left я задавал значения в px (тоже относится к тем, где я обошёлся без позишн, а задавал отступы margin) соответственно при изменении масштаба размер пикселя меняется и всё съезжает.

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

К сожалению не понял как можно загрузить файл, а вставлять код слишком много, не думаю, что у вас будет желание в нём копаться, надеюсь из опыта сможете подсказать, но если скажете выложить код, то всё сделаю сразу))

[npofopr]

Из опыта можно сказать, что вам нужно еще учиться.

И прекратите проверять верстку масштабированием, путём + и -.

С абсолютным позиционированием у вас конечно всё разъедется.

Это у вас еще только чистые дивы, а вставите текст, еще и он "гулять" начнет.

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

В общем учитесь еще... И пробуйте искать сперва свои проблемы как в интернете так и на форуме.

[PavelK]

Ну да я понимаю конечно, что учиться учиться и ещё раз учиться)) К тому же это вообще первый макет в жизни.

Не понял момент про прекратить проверять вёрстку масштабирование? А почему? Как проверять?

Про что надо погуглить что бы избавиться от позиционирования?

Я выложил вот сюда код html и css и тут же всё видно сразу. Вот даже если это окно + - всё разъедется.

http://jsfiddle.net/7E3T4/ Буду признателен за критику кода и его структуры, старался оформить всё что бы было понятно. Там где в CSS блоки отступают вправо означает что они относятся к вышестоящему стилю.

И ещё, хотел спросить, получается слишком много дивов и у каждого свой стиль. Плохо ли большое их количество? Или в принципе при вёрстке дивами это норма что их много?

Благодарю Вас!

Edited June 12, 2013 by PavelK

[ulteriormoon]

И ещё, хотел спросить, получается слишком много дивов и у каждого свой стиль. Плохо ли большое их количество? Или в принципе при вёрстке дивами это норма что их много?

Много div-ов это вполне нормально. Можно для теста и т.п. использовать span, обычно так и делают.

Не понял момент про прекратить проверять вёрстку масштабирование? А почему? Как проверять?

А позиционирование проверяют, меняя размер окна браузера (за угол таскают).

[PavelK]

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