Проблема позиционирования текста на изображение

Question

Выполнив отличный учебник, который я нашел на переполнение стека и из которых можно увидеть здесь: http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator/

Я создал свой собственный, который можно увидеть здесь; http://www.your-adrenaline-fix.com/

У меня возникли проблемы с текстом h2.

1. Когда вы загружаете первую страницу страницы, вы на короткое время увидите беспорядочный беспорядок всех h2. Я понятия не имею, с чего начать, и если кто-то не возражает, комментируя, как я могу это исправить, я был бы очень благодарен.

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

Я предоставил только css, который, как мне кажется, уместен, если вам нужно больше, не стесняйтесь просмотреть источник моей страницы здесь; view-source: http://www.your-adrenaline-fix.com/ или спросите, и я с удовольствием поделюсь.

#featured h2 { 
    border:none; 
    font-size:41px; 
    font-family:Helvetica; 
    color:#fff; 
    padding:5px; 
    margin-bottom:auto; 
    text-transform:uppercase; 
    height:auto; 
    overflow:hidden; 
    position:absolute; 
    top:310px; 
    text-shadow:1px 3px 2px #000; 
    text-align:center; 
    letter-spacing:-1px; 
    width:450px; 
} 

Я благодарю каждого из вас заранее, Стюарт K

Answer 1

У вас есть текст позиции сверху, поэтому она выходит за рамки изображения, вы должны расположить текст снизу так она не будет выходить за рамки

что-то вроде

#featured h2 { 
    bottom: 20px; 
    // remove top property 
} 

я только заменил верхнюю часть с нижней и отредактировали количество пикселя. Вы можете отрегулировать его по мере необходимости отсюда.

Для отображения вопроса при загрузке страницы. Вы можете сначала скрыть h2, используя js/jquery, после чего заставьте их появляться снова после загрузки страницы.

Вот основная структура, я оставляю кодирование для вас, так как я не знаю, насколько хорошо вы знаете/jsjquery

1) в вашем CSS, скрыть теги h2, это не требует Js

2) на окна нагрузки (поэтому изображения загружаются), показать h2 теги

$(window).load(function() { 
    // show desired content now 
    // you could do transitions here but I will leave that up to you to figure out 
    $('#featured .container h2').show(); 
}); 

Update

Вам нужно настроить слайд-шоу немного по-другому в CSS, его не работает прямо сейчас, потому что все в вашем контейнере контента помещается абсолютно, то есть оно удаляется из обычного потока. Это дает вашему контенту контента высоту 0, поэтому ваш текст находится над контейнером. То, что я сделал, делает изображения не абсолютными, поэтому это дает вашему контейнеру высоту и не отображает их, чтобы скрыть их, потому что мы не хотим видеть их всех сразу. Так как ваши скрипты отмечают текущий контейнер с классом .current. Нам просто нужно настроить таргетинг на img.С контейнер, имеющей высоту положения текста теперь установить 20px из нижней части контейнера, в этом случае в нижней части изображения, потому что изображение все, что мы имеем в контейнере

// only the current slide image will show up 
#featured div.container.current img { 
    display: block; 
} 
// remove position absolute and hide the images 
#featured div.container img { 
    display: none; 
    position: absolute; // remove this line 
} 

Обновления:

для h2 тега, в вашем CSS сделать

visibility: hidden; 

, а затем добавить

#featured div.container.current h2 { 
    visibility: visible; 
} 

таким образом, текст скрыт, пока вы не нажмете на текущее изображение, посмотрите, работает ли это