css изображение / содержимое более 2 <div>и по центру - PullRequest
Новая
       0

css изображение / содержимое более 2 <div>и по центру

2 голосов
/ 17 октября 2011

Мне нужно разделить фон HTML-страницы на 2 (по горизонтали).Верхняя и нижняя часть будут иметь различное фоновое изображение / текстуру, которая будет повторяться, другими словами, расширяемая с размером окна.Помимо этого «разделенного фона» я хочу отобразить некоторый контент, например тексты или изображения.

Этот код генерирует «разделенный фон», как я хочу, но я не могу / не знаю какчтобы поместить контент поверх этого ... 

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; }
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
</body>

</html>

Контент должен быть центрирован по вертикали и по горизонтали поверх этого "разделенного фона".Я попытался использовать третий div, поиграть с z-indexes и использовать функцию css3 множественный bg, но я не смог получить желаемый результат.Есть предложения?

Ответы [ 3 ]

0 голосов
/ 17 октября 2011

Пример использования position:fixed:
http://jsfiddle.net/LBQbb/3/

Для вертикального центрирования контента с неизвестной высотой вы можете использовать эту технику:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

0 голосов
/ 17 октября 2011

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

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

Вот HTML: 

<html>
<head>
<link href="css/reset-min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $(window).resize(function(){

                $('.content').css({
                    position:'absolute',
                    left: ($(window).width() 
                      - $('.content').outerWidth())/2,
                    top: ($('body').height() 
                      - $('.content').outerHeight())/2
                });

            });

       //To initially run the function:
       $(window).resize();

    });
    </script>

</head>

<body onload="$(window).resize()"> <!-- needed to correct loading bug -->

    <div class="top"></div>
    <div class="bottom"></div>

    <div class="content">
         <img alt="Content" src="img/01_illustration.png" /> 
    </div>
</body>
</html>

и css: 

html, body { width:100%; height: 100%; }

body { min-height: 768px; min-width: 1024px; }


.top { width: 100%; height: 50%; background-image:url('img/01_texture_top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/01_texture_bottom.jpg'); }

.content {}
0 голосов
/ 17 октября 2011

Просто создайте третий div. как это происходит потом, оно должно отображаться сверху без необходимости использования z-индексов. 

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; min-width:950px; min-height: 950px;}
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
.third { position: absolute; top:50%; left:50%; width: 900px; margin-left: -450px; margin-top: -450px; }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="third"> add content here</div>
</body>

добавив абсолютную позицию и установив ее сверху, влево = (0,0), вы можете работать с ней без проблем. Не обращая внимания на другие div, которые дают цвет фона.

Edit:

Исправлено, чтобы ответить на ваш комментарий. Например, он создаст окно размером 900 на 900 пикселей, всегда с центром в центре экрана.

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

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

...