Центрирование конкретного DIV - пробовал много - постоянно терпит неудачу - PullRequest
Новая
       2

Центрирование конкретного DIV - пробовал много - постоянно терпит неудачу

1 голос
/ 05 января 2011

Добрый вечер, ребята,

Я впервые на этом сайте, поэтому я прошу прощения, если я ДЕЙСТВИТЕЛЬНО плохо это делаю.

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

Поэтому я решил, что я просто уменьшу отдельные кнопки, а затем центрирую их так, что даже если зрительУ меня нет того, что я использую (это IMPACT), тогда он просто отрегулирует их центрирование, а не опускается вниз.

Я попытался найти способ сделать этона ДНИ и я неоднократно терпел неудачу.Я использую «firebug» с firefox для проверки изменений кода, и я просто не могу найти способ сделать эту работу.

Веб-страница http://www.crapcast.com, а код - только верхстраница под логотипом.Я включу текущий CSS, который отформатирован таким образом, чтобы соответствовать текущему использованию страницы (но, опять же, в некоторых старых браузерах и в телефонных браузерах обычно отображается двойная строка). 

#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;

Ответы [ 2 ]

0 голосов
/ 05 января 2011

Я не вижу проблемы с двумя рядами ни в одном браузере, даже в IE6.

И если вы хотите, чтобы ваши посетители могли видеть, какой именно шрифт вы используете ... это может быть Impact или какой-либо другой необычный шрифт.Попробуйте использовать http://www.fontsquirrel.com/fontface/generator.

Просто загрузите нужный шрифт, скачайте комплект и следуйте невероятно простым инструкциям (^ _ ^)

0 голосов
/ 05 января 2011

Я думаю, что ваша проблема связана с вашими шрифтами: 

#navigation ul {
  font-family:Impact,Charcoal,Times New Roman;
  ...
}
...
...
#navigation li a {
  ...
  letter-spacing:2.45px;
  ...
}

Вы используете ширину шрифтов, чтобы установить ширину ваших пунктов в вашем меню. Поэтому, когда в системе нет шрифта Impact, элементы увеличивают свою ширину намного больше. Ширина каждого символа шрифта Impact слишком мала по сравнению с другими, которые вы там указали.

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

В iPhone, и я думаю, что Android, вы не можете найти там шрифт Impact.

Попробуйте Helvetica , Arial вместо Impact и измените межбуквенный интервал на 2.0px или что-то подобное. *

...