Как еще можно разделить страницу на блоки используя проценты?

Question

[nluparev]

Привет

Я недавно начал свое знакомство с CSS и сделал вот такую штуку codepen.io/SuperManEver/pen/Mwoadb?editors=110
Вопрос: правильно ли я это сделал? Есть ли еще как-ть другие способы это сделать?

Заранее спасибо.

Answer 1

[Константин Громов]

jsfiddle.net/Leg5mvsh

По пунктам:

• Не стоит использовать position: fixed без прямой необходимости.
  
• Как уже написали выше не лишним будет указать min-width/min-height.
  
• Два левых блока имеют одинаковую ширину, верно будет их обернуть в общий div. В дальнейшем это упростит расширение шаблона, если, например, под меню понадобится ещё один блок.
  
• Не стоит сильно увлекаться id. Они имеют свои плюсы в javascript'е и могут использоваться как якори, но в целом, даже для одиночных блоков, лучше использовать class.
  
• Со стилизацией меню проще работать, если добавить ссылкам display: block и все стили, включая :hover/:active, использовать на них.
  
• Ну и по мелочам: есть лишние свойства, такие как display: block у элементов с position: absolute/fixed и width: 100% у блочных элементов. Эти вещи по-умолчанию устанавливаются браузером.
  

Comments

[nluparev]

А как правильно установить mid-width я попрбовал, только не особо получилось codepen.io/SuperManEver/pen/Mwoadb

[Константин Громов]

У вас всё верно, просто #main перекрывает часть .menu-wrapper и кажется, будто min-width не работает, хотя ширина фиксируется и частично залезает под #main.

[nluparev]

да еще кое-что старался сделать как вы посоветовали, вроде получилось только теперь hover на li не работает

[nluparev]

Константин Громов: а это можно как-ть обойти ? Я имею ввиду когда main перекрывает

[nluparev]

Константин Громов: да действительно временно удалил #main и заработало. А как быть если я все-таки хочу сохранить #main ?

[Константин Громов]

nluparev: Нужно иначе подходить к задаче: либо задавать минимальную ширину общему контейнеру, чтобы блоки внутри не конфликтовали, либо делать один из блоков с постоянным размером а у другого постоянный отступ. То, что хотите вы, подразумевает, что #main изменит своё поведение как только .menu-wrapper достигнет определённого размера. Такие вещи отлавливаются только javascript'ом.

[nluparev]

Константин Громов: а если я попробую через media queries ?

[Константин Громов]

nluparev: Можно через них, но тогда min-width не нужен. Просто меняется ширина .menu-wrapper с процентов на пиксели и ставится фиксированный отступ у #main.

[nluparev]

спасибо за советы, я сегодня узнал много нового :-)

[nluparev]

может есть какой-ть туториал как подобные вещи можно отлавливать с помощью JS. Можно на английском :-)

[Константин Громов]

Слишком простая задача, чтобы по ней писали туториалы. На window вешается обработчик события resize и внутри него в общих чертах:
if ($(".menu-wrapper").width() > 400) /* ... */;
else /* ... */;

[Константин Громов]

Если и с этим не знакомы просто изучите основы работы с DOM.

[nluparev]

ааа, я думал все сложнее будет

[nluparev]

хм, странно, но заработало как надо codepen.io/SuperManEver/full/xGrOGE и это пока без JS

[Константин Громов]

min-width написан с ошибкой. Свойство вообще не обрабатывается.

[nluparev]

Константин Громов: ок, а как правильно ?

Answer 2

[Сергей]

Способы есть и разные (можно было и с float), сделали вы правильно, только min-width укажите (а то меню при уменьшении расширения съезжает).

Comments

[nluparev]

а как то же самое сделать с float? У меня при использовании float он не отображается