Проблема в сss коде

Всем привет!) У меня возникла проблемка в стиле css. На сайте стоит слайдер из-за которого, другие элементы страницы отображаются некорректно.

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}



.container {
	width: 100%;
	position: relative;
}

.clr {
	clear: both;
	float: none;
}

.main {
	width: 95%;
	max-width: 960px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}

.main > header {
	padding: 40px 0;
}

.main > header h1 {
	font-size: 34px;
	line-height: 38px;
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
}

.main > header h1 span {
	display: block;
	font-size: 20px;
	font-weight: 300;
}

.main p {
	padding: 30px 0 0;
	text-align: center;
	font-weight: 400;
	line-height: 22px;
}

/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	font-family: Cambria, Georgia, serif;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	text-shadow: 0 -1px 0 #fff;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Demo Buttons Style */
.codrops-demos {
	float: right;
	clear: none;
	padding-top: 10px;
}

.codrops-demos a {
    display: inline-block;
    margin: 10px 10px 10px 0;
    color: #666;
    font-weight: 700;
    line-height: 30px;
    border-bottom: 4px solid transparent;
}

.codrops-demos a:hover {
	color: #000;
	border-color: #000;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #aaa;
	border-color: #aaa;
}

.column {
	width: 50%;
	float: left;
	padding: 20px;
	min-height: 300px;
}

.column p {
	text-align: left;
}

.column-20 {
	width: 20%;
}

.column-80 {
	width: 80%;
}

.js .fixed-bar {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}

.js .gallery {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	border-radius: 20px;
	position: relative;
	background: #000 url(../images/black_denim.png);
	box-shadow: 0 2px 1px rgba(255,255,255,0.9), 0 -2px 1px rgba(255,255,255,0.9);
}

.lt-ie8 .elastislide-list {
	display: none;
}

@media screen and (max-width: 690px) {
	.codrops-demos {
		float: left;
		clear: both;
	}
}


Это, присваивается к другим элементам страницы и из-за этого формы авторизации съезжают. Вопрос: как присвоить эти строки только к слайдеру?

Сам слайдер:

<div class="registerblock">
		<div class="wrap">
			<div class="register-bl2">
				<h2>Войти</h2>
					<form action="ath.php"  method="post" name="form" id="registration"> 
					  <input name="email" class="input" type="text" maxlength="25" placeholder="Электронная почта"/>
					  <input name="password" class="input" type="password"  maxlength="25" placeholder="Пароль"/>
					  <br>
					  <br>
					  <input type="submit" value="Войти →" name="button" class="button" style="margin: 0 auto;"> 
					  <br>
					  <a href="log.php" style="text-align:center;">Забыли пароль?</a>
					  
					</form>
			</div>
		</div>
</div>
			
		<div class="container demo-3">
			<div class="fixed-bar">
					<!-- Elastislide Carousel -->
					<ul id="carousel" class="elastislide-list">
						<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
						<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
						<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
						<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
						<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
						<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
						<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
						<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
						<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
						<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
						<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
						<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
						<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
						<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
						<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
						<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
						<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
						<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
						<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
						<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
					</ul>
					<!-- End Elastislide Carousel -->
			</div>
		</div>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquerypp.custom.js"></script>
		<script type="text/javascript" src="js/jquery.elastislide.js"></script>
		<script type="text/javascript">
			
			$( '#carousel' ).elastislide( {
				minItems : 2
			} );
			
		</script>					
</header>	
					


</body>
  • Вопрос задан
  • 2722 просмотра
Пригласить эксперта
Ответы на вопрос 4
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
#carousel *,
#carousel *:after,
#carousel *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
Ответ написан
CSS для .elastislide-list покажите
Ответ написан
@cactuss
Да выкладываете код куда-то.. а не сюда заливайте.
Ответ написан
Комментировать
напишите перед стилями, нужными только слайдеру класс контейнера слайдера (для всех стилей)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы