Не могу получить нижний колонтитул поверх фонового изображения

-1

Я просто хочу, чтобы нижний колонтитул появился поверх фонового изображения. Существует фоновое изображение, которое является цветом и логотипом компании полноэкранным, за исключением дна 2 см. Там я хочу простой текст со ссылкой. Сделаю это сам, но не могу получить текст поверх фонового цвета или фонового изображения. Вот HTML:Не могу получить нижний колонтитул поверх фонового изображения

<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script> 
<script type="text/javascript" src="static_init.js"></script> 
</head> 
<body> 
<div id="bg1"></div> 
    <img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
    </div> 
    <footer> 
    <p><h2>Framing your memories. Enter here. </h2></p> 
    </footer> 
</body> 
</html>

А вот мой CSS:

@charset "utf-8"; 
/* CSS Document */ 

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    overflow-y:hidden; 

} 

#full-screen-background-image { 
    z-index: 2; 
    min-height: 90%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
    position: relative; 
    top: 0; 
    left: 0; 
} 

#wrapper { 
    position: relative; 
    width: 800px; 
    min-height: 400px; 
    margin: 100px auto; 
    color: #333; 
} 
#bg1 { 
    min-width: 1255px; 
    width: 100%; 
    height: 1090px; 
    background: url(images/bg1.jpg) top center no-repeat; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
} 

#footer { 
    position:relative; 
    bottom:0; 
    z-index: 3; 
}

источник

2015-05-27 Carel Kat

Не могли бы вы предоставить jsfiddle pls? [jsfiddle] (http://jsfiddle.net/) – Someone

Несколько основных вещей:

Какова цель пустых BG1 и оберток дивы?
У вас есть css для элемента с ID 'footer', но в вашем html нет такого элемента.
Обертка тега h2 в теге p семантически некорректна.

Быстрая очистка дает нам что-то вроде этого:

<body> 
    <div id="full-screen-background-image"></div> 
    <div id="footer"> 
     <h2>Framing your memories. Enter here. </h2> 
    </div> 
</body>

Попробуйте добавить рабочую jsfiddle так что люди могут помочь вам лучше. Я не могу получить доступ к вашему локальному изображению, поэтому использовал красный фон. См. Эту скрипту для базовой идеи позиционирования одного элемента поверх другого: https://jsfiddle.net/cp35y75z/1/

Если вы используете положение: абсолютное вместо положения: относительный элемент не займет места в DOM, то есть не будет пробела где нижний колонтитул был бы изначально.

источник

2015-05-27 21:28:25 evalunamain

Теперь я не знаком с jsfiddle, я выясню это, как только смогу. Вот ссылка на страницу на этом этапе: –

http://www.edmazeka.co.za/index2.html –

Хорошо, либо удалите '#' перед нижним колонтитулом в вашем css, либо добавьте нижний колонтитул id = 'для вашего тега нижнего колонтитула в вашем html, чтобы убедиться, что ваш стиль применяется к правильному элементу. В вашем css для нижнего колонтитула измените 'position: relative' to 'position: absolute'. Это должно быть хорошим началом. – evalunamain

стилизовать сноска убедитесь, что вы забрать # если у вас есть идентификатор на элементе. Правильный CSS должен выглядеть следующим образом:

footer { 
position:relative; 
bottom:0; 
z-index: 3; 
}

источник

2015-05-27 21:26:58

Не могу получить нижний колонтитул поверх фонового изображения

ответ

Смежные вопросы