CSS: график по центру, но затем продолжить образец вправо - PullRequest
Новая
       0

CSS: график по центру, но затем продолжить образец вправо

1 голос
/ 16 октября 2011

Это странно ... Мне нужно отображать графику всегда, которая всегда центрирована в браузере. Легко.

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

Пример:

| --------- [Logo]]]]]]]]] |

Я думал, что смогу отцентрировать DIV, создать UL, а затем просто плавать LI влево ... но проблема заключается в том, что из-за ширины родительского DIV LI меня толкают на следующую строку, и я не уверен, как это остановить ...

Ответы [ 2 ]

1 голос
/ 16 октября 2011

Позиционируйте графику любым удобным для вас способом и вставьте за ней div с верхней границей линии.Расположите его абсолютно и установите слева: 0 и справа: 50%.Вот так: (попробуйте изменить размер окна браузера) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div style="position:absolute; border-top:solid 1px #CCC; left:0; right:50%; z-index:0; margin-top:20px;">&nbsp;</div>
<div style="position:absolute; width:200px; margin-left:-150px; left:50%; z-index:1; background:#CCC; padding:25px">this is a logo</div>
</body>
</html>
0 голосов
/ 16 октября 2011

Вы можете иметь несколько фоновых изображений, используя CSS3.

Примерно так 

#header{
    background-image: url(images/logo.img), url(images/logo_line.img);
    background-position: center;
    background-repeat: no-repeat, repeat-x;
}

Подробнее здесь: http://www.css3.info/preview/multiple-backgrounds/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...