Подвинуть пункт меню налево.

[amelice]

Начала верстать макет от Verdera.

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

Попробовала два варианта решения:

1. Просто сделала как в макете - отрезала часть ширины первого пункта, задала ему text-align:left, а остальным text-align:center. Ссылка

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

В первом случае ширину первого пункта сократила до 15%, когда ширина остальных пунктов 20%.

Во втором подвинула на 130 пк.

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

Еще во втором случая при уменьшении окна

.nav{
overflow:hidden;}

.nav хладнокровно режет пункты.

Что вы посоветуете, может есть какие то другие решения, чтоб можно было контролировать?

Edited August 3, 2011 by cheburek

[ruslan.savenok]

Сам макет покажите пожалуйста

Вообще в таких случаях я не боюсь использовать display: table-cell; и фикс на expression

Около года назад писал об этом статью, если вам интересен вариант с expression — помогу его написать

Edited August 3, 2011 by ruslan.savenok

[amelice]

Сам макет покажите пожалуйста

Вообще в таких случаях я не боюсь использовать display: table-cell; и фикс на expression

Около года назад писал об этом статью, если вам интересен вариант с expression — помогу его написать

Да, интересно. Но, хотелось бы узнать еще варианты без экспрешнов. Так как я ниразу с экспрешнами не сталкивалась, то для меня такой вариант кажется сложным. А моежете прислать ссылку на вашу статью?

а вот ссылка на макет. _http://cheburek.nightmail.ru/Spitfire/img_/spit.png

Edited August 3, 2011 by cheburek

[ruslan.savenok]

Сам макет покажите пожалуйста

Вообще в таких случаях я не боюсь использовать display: table-cell; и фикс на expression

Около года назад писал об этом статью, если вам интересен вариант с expression — помогу его написать

Да, интересно. Но, хотелось бы узнать еще варианты без экспрешнов. Так как я ниразу с экспрешнами не сталкивалась, то для меня такой вариант кажется сложным. А моежете прислать ссылку на вашу статью?

а вот ссылка на макет. _http://cheburek.nightmail.ru/Spitfire/img_/spit.png

Вот это задача как раз для display: table-cell; т.к. вы не знаете сколько пунктов у меня будет, но они должны заполнять 100% окна браузера

Моя статья была в моем старом блоге, от которого сейчас осталась милая заглушка

Если коротко с помощью expression вы можете вызывать js код через css файл для ie6 и 7, иногда это жутко тормозит браузер, но у меня в данной задаче такого не наблюдалось

[amelice]

но у меня в данной задаче такого не наблюдалось

Может приведете пример? Меня экспрешны интересуют.

table-cell я знаю как применить. в моем случае прмименяется к элементам li. а самому списку display:table со свойством table-layout:fixed.

Правильно?

Edited August 3, 2011 by cheburek

[ruslan.savenok]

Сори не нашел в Google кода, пришлось вспоминать

Вот накидал

 <!--[if lt IE 8]>
   <style>
    ul li {
     float: left;
     width: expression(this.parentNode.offsetWidth / this.parentNode.children.length);
    }

    /* иногда бывает проблема что последний пункт выскакивает вниз, это можно пофиксить так */
    ul li.last {
     width: expression(this.parentNode.offsetWidth - (this.offsetWidth * (this.parentNode.children.length -1)));
    }
   </style>
 <![endif]-->

<style>
  * {margin: 0; padding: 0;}
ul {display: table; width: 100%;}
ul li {display: table-cell; text-align: center; height: 40px; background: Aqua;}
</style>

<ul>
<li>text</li>
<li class="last">text</li>
</ul>

Edited August 3, 2011 by ruslan.savenok

[amelice]

Сори не нашел в Google кода, пришлось вспоминать

Вот накидал

 <!--[if lt IE 8]>
   <style>
    ul li {
     float: left;
     width: expression(this.parentNode.offsetWidth / this.parentNode.children.length);
    }

    /* иногда бывает проблема что последний пункт выскакивает вниз, это можно пофиксить так */
    ul li.last {
     width: expression(this.parentNode.offsetWidth - (this.offsetWidth * (this.parentNode.children.length -1)));
    }
   </style>
 <![endif]-->

<style>
  * {margin: 0; padding: 0;}
ul {display: table; width: 100%;}
ul li {display: table-cell; text-align: center; height: 40px; background: Aqua;}
</style>

<ul>
<li>text</li>
<li class="last">text</li>
</ul>

Спасибо, попробую применить ваш вариант. Но хочется почитать вашу статью об экспрешнах. О чем конкретно вы написали, об этой технологии, то как она работает и где применятеся или больше практическая часть?

Edited August 3, 2011 by cheburek

[ruslan.savenok]

Спасибо, попробую применить ваш вариант. Но хочется почитать вашу статью об экспрешнах. О чем конкретно вы написали, об этой технологии, то как она работает и где применятеся или больше практическая часть?

Напишу на выходных

Статья вводит в теорию expression и показывает практический пример с display: table-cell;

Edited August 3, 2011 by ruslan.savenok

[SelenIT]

сheburek, а вариант из этой темы случайно не подойдет? Ссылки вроде чисто текстовые...

[buddah]

ruslan.savenok, подскажи какой шрифт в фотошопе использовал для кириллицы в заглушке?

[ruslan.savenok]

ruslan.savenok, подскажи какой шрифт в фотошопе использовал для кириллицы в заглушке?

a_FuturicaLt

Edited August 3, 2011 by ruslan.savenok

[amelice]

сheburek, а вариант из этой темы случайно не подойдет? Ссылки вроде чисто текстовые...

Посмотрела, потестила - не подходит.

в вашем примере ширина самих пунктов зависит только от содержимого. а расстояние между ними браузер равномерно сам распределяет.

а если задать явную ширину пунктам, допустим в %, и при этом область ширины списка полностью не заполняется, то опять таки браузер эту лишнюю ширину распределяет и равномерно добавляет к левой стороне пунктам.

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

Возвращаюсь к своему первому варианту.

А так все равно спасибо, я в копилку себе занесла.

[Softlink]

cheburek, так ты сделай свой первый вариант

1. Просто сделала как в макете - отрезала часть ширины первого пункта, задала ему text-align:left, а остальным text-align:center.

только через table-cell. Первый пункт меню чуть уже и выравнивание по левому краю. По-моему - это самое оптимальное решение.

[amelice]

cheburek, так ты сделай свой первый вариант

1. Просто сделала как в макете - отрезала часть ширины первого пункта, задала ему text-align:left, а остальным text-align:center.

только через table-cell. Первый пункт меню чуть уже и выравнивание по левому краю. По-моему - это самое оптимальное решение.

Попорбую применить... но мне кажется с первым пунктом будет проблема.

[Softlink]

cheburek, так ты сделай свой первый вариант

1. Просто сделала как в макете - отрезала часть ширины первого пункта, задала ему text-align:left, а остальным text-align:center.

только через table-cell. Первый пункт меню чуть уже и выравнивание по левому краю. По-моему - это самое оптимальное решение.

Попорбую применить... но мне кажется с первым пунктом будет проблема.

какая например?

[amelice]

какая например?

Работает. Спасибо всем кто участвовал.

Edited August 4, 2011 by cheburek

[Nekromancer]

А чё извращаться то, поставьте просто таблицу. Если в современном вебе таблицами не верстается это же не значит что их вообще надо стороной обходить.

[amelice]

А чё извращаться то, поставьте просто таблицу. Если в современном вебе таблицами не верстается это же не значит что их вообще надо стороной обходить.

Задача уже решена, тем более таблицу не очень хорошо знаю.

[Nekromancer]

А чё извращаться то, поставьте просто таблицу. Если в современном вебе таблицами не верстается это же не значит что их вообще надо стороной обходить.

тем более таблицу не очень хорошо знаю.

Зря, может пригодится.

[amelice]

Зря, может пригодится.

Пропустила слово "пока" вот тут -> тем более таблицу не очень хорошо знаю.

[ruslan.savenok]

Зря, может пригодится.

Пропустила слово "пока" вот тут -> тем более таблицу не очень хорошо знаю.

А каким способом в итоге решилась задача?

[amelice]

Зря, может пригодится.

Пропустила слово "пока" вот тут -> тем более таблицу не очень хорошо знаю.

А каким способом в итоге решилась задача?

table-cell, как вы изначально предложили.

[SelenIT]

в макете все пункты равномерно от бордюра распределены

Ну я вообще-то имел в виду тупейший вариант типа такого...

[amelice]

в макете все пункты равномерно от бордюра распределены

Ну я вообще-то имел в виду тупейший вариант типа такого...

Я выше отписалась по этому поводу. Это тоже самое что ты предложил в той теме. В моем случае не подходит.

Кстати, я не поняла как и что делает text-justify: newspaper?

[SelenIT]

Он делает какую-то магию для IE, в данном случае, возможно, и не нужен. Суть предложения была в том, чтоб не рассматривать разделители как бордеры . Ну не подошло - и ладно...

[amelice]

Он делает какую-то магию для IE, в данном случае, возможно, и не нужен. Суть предложения была в том, чтоб не рассматривать разделители как бордеры . Ну не подошло - и ладно...

Подойдет в другой раз. Когда не нужно будет двигать первый пункт.