Возникла проблема с парением CSS с другим размером парения - PullRequest
Новая
       1

Возникла проблема с парением CSS с другим размером парения

2 голосов
/ 26 апреля 2011

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

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

Я хочу это например ..

enter image description here

Но в настоящее время я получаю это:

enter image description here

Фоновое изображение nav имеет ширину 87px, поэтому, очевидно, оно переносится, потому что у нас недостаточно места. Но мы также получаем различное количество места между каждым элементом навигации, потому что каждый установлен на 87px.

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

Я пытался наложить разные ширины на разные состояния, но навигация просто прыгала и выглядела ужасно.

Есть идеи сделать то, что я хочу?

Если вы хотите увидеть мои текущие HTML и CSS, они указаны ниже:

HTML: 

<div class="nav_wrapper">
    <ul class="nav">
        <li><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT US</a></li>
        <li><a href="services.php">SERVICES</a></li>
        <li><a href="our_process.php">OUR PROCESS</a></li>
        <li><a href="portfolio.php">OUR WORK</a></li>
        <li><a href="">BLOG</a></li>
        <li><a href="free_quote.php">FREE QUOTE</a></li>
        <li><a href="contact_us.php">CONTACT US</a></li>
    </ul>
    <!-- Nav Ends -->
    <div class="contentClear"></div>
</div>
<!-- Nav Wrapper Ends -->

CSS: 

#header .nav_wrapper {
    float: left;
    width: 597px;
    margin: 30px 0 0 50px;
}

#header .nav_wrapper .nav {
    list-style-type: none;
    list-style-image: none;
}

#header .nav_wrapper li {
    float: left;
    height: 23px;
    min-width: 87px;
    font-family: "Zurich Cn BT", Tahoma;
    font-size: 12px;
    text-align: center;
}

ul.nav li a, ul.nav li a:visited, ul.nav li a:focus {
    display: block;
    line-height: 23px;
    color: #764422;
    text-decoration: none;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #fff;
    text-decoration: none;
    background-image: url(../images/nav-bg.png);
}

Ответы [ 3 ]

2 голосов
/ 26 апреля 2011

Требуются ли изображения?Если нет, вы можете попробовать использовать CSS3 (или фильтр для т.е. как запасной вариант): 

  background-color: #FCC051;
  background-image: -moz-linear-gradient(top, #FCC051, #FAA200); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #FCC051, #FAA200); /* IE10 */
  background-image: -o-linear-gradient(top, #FCC051, #FAA200); /* Opera 11.10+ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FCC051), to(#FAA200)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #FCC051, #FAA200); /* Chrome 10+, Saf5.1+ */
  background-image: linear-gradient(top, #FCC051, #FAA200);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FCC051', EndColorStr='#FAA200'); /* IE6–IE9 */

Пример можно найти здесь: http://fiddle.jshell.net/Shaz/7X3qw/2/

Если вам не требуется поддержка> IE6,это должно работать.:)

2 голосов
/ 26 апреля 2011

я бы сделал так, чтобы ширина каждого <li> соответствовала размеру фонового изображения (т.е. 87px).Если пространство становится проблемой, то я бы создал несколько разных фоновых изображений (например, 70px, 87px и 95px) и соответственно установил ширину их <li> s.Это простое решение, которое хорошо работает и не добавляет сложностей с JS.

1 голос
/ 26 апреля 2011

Вот ваше исправление, просто вставьте фоновое изображение http://jsfiddle.net/samccone/7zELD/

background: url('path here') center center no-repeat transparent;

Я равный интервал между размерами каждого li, используя процент 1/8 от общего размера

...