Не удается получить контент для показа в разделе

Question

Не удается получить контент для показа в разделе

0

Здесь мой HTML

<!DOCTYPE html>
    <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
    <!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
        <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />
        <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
    </head>
    <body >
        <section id="page">
            <ul class="cb-slideshow">
                <li>
                    <span style="background: #009dff;">Image 01</span>
                    <div><h3>Colourity</h3></div>
                </li>
                <li>
                    <span style="background: #003840;">Image 02</span>
                    <div><h3>Colourity</h3></div>
                </li>
                <li>
                    <span style="background: #02A676;">Image 03</span>
                    <div><h3>Colourity</h3></div>
                </li>
                <li>
                    <span style="background: #4FAAC9;">Image 04</span>
                    <div><h3>Colourity</h3></div>
                </li>
                <li>
                    <span style="background: #FF5952;">Image 05</span>
                    <div><h3>Colourity</h3></div>
                </li>
                <li>
                    <span style="background: #96D6D9;">Image 06</span>
                    <div><h3>Colourity</h3></div>
                </li>
            </ul>
        </section>
    </body>
</html>

И мой CSS довольно длинный, поэтому я подумал, что я вставляю его здесь. Это то, чего я пытаюсь достичь. Я хочу, чтобы иметь возможность прокрутки вниз и добавьте контент ниже, чем вы сейчас видите здесь (Это демо, где я получил код). Я пробовал работать с CSS в течение нескольких часов, и ничто не смогло его исправить. Есть идеи?

MjrKusanagi 22 март 2014, в 00:35

Источник

0

Гораздо проще отладить ваш код, если вы используете JSFiddle.net . Я скопировал ваш код здесь: jsfiddle.net/3yxUP
MjrKusanagi 21 март 2014, в 23:25
0

Спасибо. @MjrKusanagi
user3444414 21 март 2014, в 23:27
0

Итак, когда вы говорите «добавить контент ниже», вы имеете в виду, что хотите добавить контент под текстом большими буквами («Colourity»)? Вы хотите использовать "Colourity" как заголовок?
MjrKusanagi 21 март 2014, в 23:30
0

Я имею в виду возможность прокручивать вниз и иметь больше картинок, ссылок и тому подобного. Я вроде хочу, чтобы это было похоже на заголовок. Это занимает всю страницу, когда вы видите это. Но вы сможете прокрутить вниз и там больше контента. @MjrKusanagi
user3444414 21 март 2014, в 23:33
0

Хорошо, вы хотите, чтобы фоновое изображение также прокручивалось вверх и в конечном итоге находилось вне области просмотра?
MjrKusanagi 21 март 2014, в 23:35
0

Именно так. Я хочу, чтобы все прокручивалось вверх, и под ним были бы другие вещи. @MjrKusanagi
user3444414 21 март 2014, в 23:36
0

Итак, может быть немного так: google.com/nexus/5 . Ну, просто часть заголовка ..
MjrKusanagi 21 март 2014, в 23:37
0

На самом деле что-то вроде этого thepetedesign.com/demos/onepage_scroll_demo.html Я не хочу заголовок, но я хочу, чтобы вся «верхняя» часть отображалась при загрузке. Тогда есть другие вещи под ним. @MjrKusanagi
user3444414 21 март 2014, в 23:39

Показать ещё 6 комментариев

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Гораздо проще отладить ваш код, если вы используете JSFiddle.net . Я скопировал ваш код здесь: jsfiddle.net/3yxUP
Итак, когда вы говорите «добавить контент ниже», вы имеете в виду, что хотите добавить контент под текстом большими буквами («Colourity»)? Вы хотите использовать "Colourity" как заголовок?
Я имею в виду возможность прокручивать вниз и иметь больше картинок, ссылок и тому подобного. Я вроде хочу, чтобы это было похоже на заголовок. Это занимает всю страницу, когда вы видите это. Но вы сможете прокрутить вниз и там больше контента. @MjrKusanagi
Хорошо, вы хотите, чтобы фоновое изображение также прокручивалось вверх и в конечном итоге находилось вне области просмотра?
Именно так. Я хочу, чтобы все прокручивалось вверх, и под ним были бы другие вещи. @MjrKusanagi
Итак, может быть немного так: google.com/nexus/5 . Ну, просто часть заголовка ..
На самом деле что-то вроде этого thepetedesign.com/demos/onepage_scroll_demo.html Я не хочу заголовок, но я хочу, чтобы вся «верхняя» часть отображалась при загрузке. Тогда есть другие вещи под ним. @MjrKusanagi

MjrKusanagi · Accepted Answer · 2014-03-21T21-18-00.000Z

Самый простой способ выполнить то, что вы хотите, - изменить стиль позиции класса.cb-slideshow с фиксированного на абсолютный. Итак, эта часть CSS будет выглядеть так:

.cb-slideshow,
.cb-slideshow:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

Следующая проблема, о которой вам придется беспокоиться, - это убедиться, что ваш контент не сидит поверх вашего фона. Один из способов сделать это - также полностью позиционировать ваш контент (position: absolute) и смещать его сверху на 100% (top: 100%; или любое другое значение, соответствующее высоте слайдов.cb).

html,body{
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#content{
    top: 100%;
    position: absolute;
}

Я обновил JSFiddle, чтобы продемонстрировать эти идеи: http://jsfiddle.net/3yxUP/3/. Существует некоторое совпадение между фоном и контентом, но я думаю, что это может быть проблемой с пользовательским интерфейсом JSFiddle. Чтобы решить эту проблему, вы можете просто добавить #content{padding-top:15px;} или что-то в этом роде.

EDIT: Я вижу, почему есть пробелы над фоном - потому что элемент, который вы используете, является ul, который обычно отображается как список с некоторым запасом до (и после?). Во всяком случае, чтобы разрешить это, я добавил:

ul{
    margin:0;
}
li{
    list-style: none;
}

Вы должны подумать о том, чтобы больше узнать об этих стилях CSS и о том, как они влияют на рендеринг вашего контента. Во всяком случае, обновленный JSFiddle находится здесь: http://jsfiddle.net/3yxUP/5/.

Вы мне очень помогли. Большое спасибо!