Тема: [Twitter Bootstrap]. Carousel. Проблема з розмірами.[Вирішено]
Доброго дня. Створюю шаблон - html+css.
Виникли проблеми з розмірами каруселі - ось:
тобто стрілки навігації повинні бути на зображенні а не на полях и кружки котрі показують вибраний слайд змістились вниз - якщо поставити зображення більшого розміру то вони стануть видимі . Як "впихнути" карусель в мій дів?
▼Код html
<!DOCTYPE html>
<html>
<head>
<title>Weblog</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="containerS">
<div class="headerS">
<a href="#"><img src="css/images/logo.gif"></a>
<div class="social_right">
<ul>
<li><a href="#" class="rssS">Rss</a></li>
<li><a href="#"class="fbS">Facebook</a></li>
<li class="lastS"><a href="#" class="twitterS">Twitter</a></li>
</ul>
</div>
</div>
<div class="navigationS">
<ul>
<li class="activeS"><a href="#">ГОЛОВНА</a></li>
<li><a href="#">ПРО</a></li>
<li><a href="#">ПРОЕКТИ</a></li>
<li><a href="#">КОНТАКТУВАТИ</a></li>
</ul>
</div>
<div class="mainS">
<div id="slaid">
<div class="carousel-slide" id="main-carousel" data-ride="carousel" style="width:940px; height:300px;padding: 0px;">
<ol class="carousel-indicators">
<li data-target="#main-carousel" data-slide-to="0" class="active"></li>
<li data-target="#main-carousel" data-slide-to="1"></li>
<li data-target="#main-carousel" data-slide-to="2"></li>
<li data-target="#main-carousel" data-slide-to="3"></li>
<li data-target="#main-carousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="css/images/01.jpeg" />
</div>
<div class="item">
<img src="css/images/02.jpeg" />
</div>
<div class="item">
<img src="css/images/03.jpeg" />
</div>
<div class="item">
<img src="css/images/04.jpeg" />
</div>
<div class="item">
<img src="css/images/05.jpeg" />
</div>
</div>
<a class="left carousel-control" href="#main-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#main-carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="contentS">
</div>
<div class="sidebarS">
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
▼css
body {
background: url(images/body-bg.gif) repeat white;
}
.containerS {
width: 980px;
margin: 0 auto;
background: white;
border: 1px solid #dbd4d4;
}
.headerS {
width: 980px;
margin:0;
height:109px;
background: white;
display: inline;
}
.social_right {
padding: 23px 11px 0 0 ;
float:right;
dislay:inline;
}
.social_right ul {
list-style:none;
}
.social_right ul li {
display: inline;
float: left;
border-right: 1px dotted black;
padding: 2px 17px 2px 0;
margin: 0 15px 0 5px;
}
.social_right ul li.lastS {
border:none;
}
.social_right ul li a{
padding: 0 0 0 25px;
text-decoration:none;
color: #444444;
font-weight: bold;
font-family: Garamond, Georgia, serif;
}
.social_right ul li a:hover{
color: #777777;
}
.social_right ul li a.rssS {
background: url(images/soc-rss.gif) no-repeat;
}
.social_right ul li a.fbS {
background: url(images/soc-fb.gif) no-repeat;
}
.social_right ul li a.twitterS {
background: url(images/soc-twit.gif) no-repeat;
}
.navigationS {
height: 45px;
background: white;
border-top: 1px solid #dbd4d4;
}
.navigationS ul {
list-style:none;
padding: 0px;
margin:0px;
}
.navigationS ul li {
dislpay: inline;
float: left;
margin:0px;
height: 45px;
}
.navigationS ul li.activeS {
background: #dbd4d4;
color: red;
}
.navigationS ul li.activeS a{
color: red;
}
.navigationS ul li a{
text-decoration:none;
height: 45px;
line-height: 45px;
padding:14px 25px;
border-right: 1px solid #dbd4d4;
font-family: Garamond;
font-weight: bold;
}
.navigationS ul li:hover {
background: #dbd4d4;
color: red;
}
.navigationS ul li a:hover{
color: red;
}
.mainS {
background: white;
padding: 0px;
margin: 0px;
border-top: 1px solid #dbd4d4;
}
#slaid {
border: 1px solid #dbd4d4;
margin: 15px auto;
padding: 0px;
width: 940px;
height: 300px;
}
.contentS {
border: 1px solid black;
width: 675px;
margin: 19px;
float: left;
}
.sidebarS {
border: 1px solid black;
width: 100px;
margin:15px;
float: right;
}
Потрібно карусeль вмістити в div id="slaid".
З повагою A.N.Onim.