Использование псевдокласса CSS до и после - PullRequest
Новая
       4

Использование псевдокласса CSS до и после

1 голос
/ 22 июля 2011

Итак, я попытался поэкспериментировать с псевдоклассом CSS до и после. Я попытался использовать эти псевдо для создания элемента заголовка. Это для уменьшения использования div для хранения левого и правого изображений. Это код для HTML 

    <header id="mastHead">
        <h1><a href="#">Branding</a></h1>
    </header>

Итак, у меня есть 3 изображения для создания традиционного элемента заголовка шириной 20 пикселей для левой и правой стороны с высотой 100 пикселей и для середины, шириной 1 пиксель и высотой 100 пикселей, которые будут повторяться по горизонтали. И вот мой CSS 

    #mastHead {
        background:url(images/headMiddle.jpg) repeat-x top left;
        width:1000px;
        height:100px;
        overflow:hidden;
    }

    #mastHead:before {
        content:"";
        display:block;
        background:url(images/headLeft.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:left;
    }

    #mastHead:after {
        content:"";
        display:block;
        background:url(images/headRight.jpg) no-repeat top left;
        width:20px;
        height:100px;
        float:right;
    }

    #mastHead h1 a {
        display:block;
        width:200px;
        height:41px;
        background:url(images/logo.png) no-repeat;
    }

Таким образом, проблема в том, что если я удаляю элемент h1, он будет идеально выровнен, но если я помещу эти элементы, он вытолкнет псевдокласс :: after и займет оставшееся пространство в соответствии с его высотой. Как я могу сделать этот элемент h1, чтобы занять только средний пробел, не влияя на пробел :: after?

1 Ответ

1 голос
/ 12 августа 2011

Я сделал скрипку на вашем примере: http://jsfiddle.net/3Dcw3/ (только установите ширину 500, чтобы поместиться в скрипку, и установите фон для их визуализации)

А вот фиксированная версия: http://jsfiddle.net/3Dcw3/1/

Точки:

  1. Добавьте position:relative; к заголовку.
  2. Используйте абсолютное позиционирование вместо плавающего.
  3. Добавьте отступы такблоки будут располагаться над ними.
...