Вход

CreativStudio · 12-12-2014, 09:49 PM

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

Я не прошу, что бы мне все сделали, а всего лишь хочу, что бы вы подсказали и указали на мои ошибки.

И так приступим: Big Grin

Вот то, как я вижу меню для своего сайта Smile

Так должно быть!

Но вот, что собственно получилось Big Grin

То что есть!

Вот сам код:

HTML

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="Content_Type" content="text/html; charset=utf-8" />

	<title>AAA</title>

	<meta charset="utf-8">

    <meta name="description" content="AAA">

    <meta name="abstract" content="AAA">

    <meta name="keywords" content="AAA">

    <meta name="fragment" content="!">



    <link href="style.css" rel="stylesheet" type="text/css">

</head>



<body>

<div id="menu-on" class="">

<ul id="menu">

    <li id="menu-a" class=""><a href="#" style="text-decoration: none;">Товары и услуги</a>

	<div id="cut" class="cut-a">

	</div>

	    <ul>

            <li><a href="#" style="text-decoration: none;">Название группы</a></li>

            <li><a href="#" style="text-decoration: none;">Длинное<br> название группы</a></li>

            <li><a href="#" style="text-decoration: none;">Название группы</a></li>

			<li><a href="#" style="text-decoration: none;">Название группы</a></li>

			<li><a href="#" style="text-decoration: none;">Название группы</a></li>

			<li><a href="#" style="text-decoration: none;">Название группы</a></li>

        </ul>

	</li>

    <li id="menu-a" class=""><a href="#" style="text-decoration: none;">О компании</a>

    </li>

    <li id="menu-a" class=""><a href="#" style="text-decoration: none;">Как заказать</a>

    </li> 

    <li id="menu-a" class=""><a href="#" style="text-decoration: none;">Контакты</a>

    </li>

    <li id="menu-a" class="basket"><a href="#" style="text-decoration: none;">Корзина</a>

    </li> 

	

	</ul>

</div>



</body>

</html>

CSS

Ну как то так Big Grin

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

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

CreativStudio · 12-16-2014, 03:28 PM

И снова я надеюсь на Вашу помощь Smile

При добавлении текста на изображение слайдера, текст сдвигает слайдер вниз.
Я подозреваю, что проблема в самой структуре html. (Но только подозреваю Smile

)

Пример

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>

css слайдера

Вход
Имя пользователя:
Пароль:	Забыли пароль?
	Запомнить меня