1 Востаннє редагувалося A.N.Onim (04.02.2015 16:02:15)

Тема: [Twitter Bootstrap]. Carousel. Проблема з розмірами.[Вирішено]

Доброго дня. Створюю шаблон - html+css.
Виникли проблеми з розмірами каруселі - ось:
http://f6.s.сайт-злодій/I0RrelDK.png
тобто стрілки навігації повинні бути на зображенні а не на полях :) и кружки котрі показують вибраний слайд змістились вниз - якщо поставити зображення більшого розміру то вони стануть видимі :). Як "впихнути" карусель в мій дів? :)

Код 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.

2

Re: [Twitter Bootstrap]. Carousel. Проблема з розмірами.[Вирішено]

Вам допоможе це:
http://www.w3schools.com/bootstrap/boot … rousel.asp

3 Востаннє редагувалося A.N.Onim (04.02.2015 16:01:10)

Re: [Twitter Bootstrap]. Carousel. Проблема з розмірами.[Вирішено]

Ваше посилання не допомогло, але все одно дякую. А проблема була всього в одному "-". Замість

<div class="carousel-slide" id="main-carousel" data-ride="carousel" style="width:940px; height:300px;padding: 0px;">

потрібно:

<div class="carousel slide" id="main-carousel" data-ride="carousel" style="width:940px; height:300px;padding: 0px;">
Подякували: 0xDADA11C72