Учусь верстать!

[CreativStudio 0]

Добрый вечер уважаемые форумчане.
Решил освоить web-верстку, на данный момент возможности пойти на курсы нету, вот и приходится учить самостоятельно, с помощью различной литературы и практики.
Но разумеется появилась у меня куча вопросов, ответы на которые скорее всего в интернете есть, но не совсем понятные мне.
 
Я не прошу, что бы мне все сделали, а всего лишь хочу, что бы Вы подсказали и указали на мои ошибки.
 
И так, приступим  :
 
При добавлении текста на изображение слайдера, текст сдвигает слайдер вниз.
Я подозреваю, что проблема в самой структуре html. (Но только подозреваю )

 

 

 

 

 

 

 

 

 

<div class="slider">
<script type="text/javascript">
$(document).ready(function() {
 $(".slider").each(function () { 
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); 
   $(this).addClass("slider"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); 
 });
});
function sliderJS (obj, sl) { 
 var ul = $(sl).find("ul"); 
 var bl = $(sl).find("li.slider"+obj); 
 var step = $(bl).width(); // 
 $(ul).animate({marginLeft: "-"+step*obj}, 500); 
}
$(document).on("click", ".slider .nav span", function() { 
 var sl = $(this).closest(".slider"); 
 $(sl).find("span").removeClass("on"); 
 $(this).addClass("on"); 
 var obj = $(this).attr("rel"); 
 sliderJS(obj, sl); 
 return false;
});
</script>
<ul>
<li><a style="font: Arial; font-size: 32pt; font-weight: bold; color: #00aeef; line-height: normal;" href="">НАСЛАЖДАЙСЯ <br> ЖИЗНЬЮ С НАМИ!<br></a>
<a style="font: Arial; font-size: 10pt; font-weight: normal; color: #5f5f5c; line-height: normal;">Стартовала акция «Письма Деду Морозу»: уже пятый год <br> ищет волшебников для исполнения желаний ребят из детских домов. </a>
<img src="images/banner_1.jpg" alt="">
</li>
<li><a style="font: Arial; font-size: 32pt; font-weight: bold; color: #00aeef; line-height: normal;" href="">НАСЛАЖДАЙСЯ <br> ЖИЗНЬЮ С НАМИ!<br></a>
<a style="font: Arial; font-size: 10pt; font-weight: normal; color: #5f5f5c; line-height: normal;">Стартовала акция «Письма Деду Морозу»: уже пятый год <br> ищет волшебников для исполнения желаний ребят из детских домов. </a>
<img src="images/banner_2.jpg" alt="">
</li>
<li><a style="font: Arial; font-size: 32pt; font-weight: bold; color: #00aeef; line-height: normal;" href="">НАСЛАЖДАЙСЯ <br> ЖИЗНЬЮ С НАМИ!<br></a>
<a style="font: Arial; font-size: 10pt; font-weight: normal; color: #5f5f5c; line-height: normal;">Стартовала акция «Письма Деду Морозу»: уже пятый год <br> ищет волшебников для исполнения желаний ребят из детских домов. </a> 
<img src="images/banner_3.jpg" alt="">
</li>
</ul>
</div>

 

 

 

 .slider {
 z-index: 3;
width: 998px;
margin-left: auto;
margin-right: auto;
 height: 370px;
 overflow: hidden;
 position: relative;
 }
 .slider ul,
 .slider li {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }
 .slider ul {
 width: 9999px; 
 }
 .slider ul li {
 list-style-type: none;
 float: left;
 width: 1000px;
 height: 370px;
 }
 .slider .nav {
 position: absolute;
 left: 15px;
 bottom: 12px; 
 }
 .slider .nav span {
 opacity: 0.9;
 background: #fff;
 margin: 0 8px 0 0;
 width: 20px;
 height: 20px;
 cursor: pointer;
 overflow: hidden;
 display: block;
 float: left;
border: 1px solid #000000;
 }
 .slider .nav span.on {
 background: #00b2e2;
 }

 

 

 

Ну как-то так  

Всем спасибо за просмотр и потраченое время!

Надеюсь на Вашу помощь!

[AlexPS 7]

Курсы совершенно не нужны это полная чушь, самые лучше курсы это habrahabr.ru
А что касается сдвигания слайдера текстом, просто задайте родительскому блоку текста абсолютное позиционирование.

position: absolute;

Абсолютное позиционирование задаёт смещение от краёв родителя с помощью свойств top и left либо bottom и right.
Смещение отсчитывается от границ родителя если его позиционирование не равно normal. Т.е absolute/relative/fixed.
Если же позиционирование родительского блока normal то смещение будет задаваться от границ окна браузера.

[virusok 267]

позиционирование должно производиться по блокам. Вы используете БЛОЧНУЮ верстку (div) в связи с этим.

Ваша картинка - это блок. Ваш текст - тоже блок.

Вам нужно вставить блок в блок!

Для этого

*Пишем для текста стиль.

*Делаем тексту Абсолютное позиционирование, как вам уже написали выше. ( position: absolute;)

*блок текста помещаем в блок картинки.

Изменено 18 декабря, 2014 пользователем virusok