1 Тема від A.N.Onim Востаннє редагувалося A.N.Onim (05.02.2015 20:07:58)

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Тема: [HTML].Div. Проблема з позицією.[Вирішено]

Доброго дня! власне той самий шаблон - http://replace.org.ua/topic/4285/
Але тепер проблема з дівами - знизу там дві чорних полоси - то два діви :) - .contentS .sidebarS

І вони не мов не в основному блоці -  .mainS

Як їх впихнути в основний? Точніше основний не хоче під них розширюватись вниз :)

З повагою A.N.Onim.

2 Відповідь від A.N.Onim Востаннє редагувалося Replace (05.02.2015 19:22:35)

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Трохи виправив:
http://replace.org.ua/extensions/om_images/img/54d3a6e36d6ac/I0RrelE1.png
знизу два діви - самий нижній повинен бути зправа. пробував через float , position. не допомогло :-(

3 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2105

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Може він просто по розмірам не підходить? Достатньо для обох прописати float: left; і потім після них clear: both;

Replace вебсайт

4 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Тобто після них?
Після них більше дівів не буде :-)
А ось якщо обом float:left; :
http://f5.s.сайт-злодій/I0RrelE3.png

5 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Replace слушно зауважив, спробуйте зменшити розмір обох div-ів.

6 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

http://f6.s.сайт-злодій/I0RrelEm.png
Нічого не дало.  :(

7 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2105

Re: [HTML].Div. Проблема з позицією.[Вирішено]

A.N.Onim, весь код блоків покажете? (шматок html + css) :)

Replace вебсайт

8 Відповідь від Invader Востаннє редагувалося Invader (04.02.2015 22:28:11)

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: [HTML].Div. Проблема з позицією.[Вирішено]

9 Відповідь від Ярослав

  • Ярослав
  • Гість

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Replace, http://replace.org.ua/topic/4285/

10 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

▼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" data-interval="3000">
                        <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" style="width:940px; height:300px;">
                                <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: 65px;
    margin: 19px;
    height: 10px;
}

.sidebarS {
    border: 1px solid black;
    width: 24px;
    margin:15px;
    height: 10px;
}

11 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2105

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Ось так повинно все ок бути:

.contentS {
    border: 1px solid black;
    width: 65px;
    margin: 19px;
    height: 10px;
    float: left;
}
 
.sidebarS {
    border: 1px solid black;
    width: 24px;
    margin:15px;
    height: 10px;
    float: left;
}

Replace вебсайт

12 Відповідь від A.N.Onim

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Ось результат:
http://f6.s.сайт-злодій/I0RrelF5.png
вони стають в ряд але основний дів під них не розтягується.  :(

13 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2105

Re: [HTML].Div. Проблема з позицією.[Вирішено]

після:

 <div class="sidebarS">
 
                </div>

додайте:

<div style="clear: both;"></div>
Подякували: A.N.Onim1

Replace вебсайт

14 Відповідь від A.N.Onim Востаннє редагувалося A.N.Onim (05.02.2015 20:06:08)

  • A.N.Onim
  • A.N.Onim
  • Користувач
  • Поза форумом
  • Дата реєстрації: 18.01.2013
  • Повідомлень: 287
    • Репутація: 25

Re: [HTML].Div. Проблема з позицією.[Вирішено]

Дякую, дякую, дякую!!!
Допомогло. І хоча ви вище радили вже таке рішення, але я не додумався що для того щоб прописати після них style="clear: both;" потрібен додатковий дів. Дякую!  :)  *THUMBSUP*  *DANCE*  *YAHOO*  *HI*
http://f5.s.сайт-злодій/I0RrelF9.png

15 Відповідь від Анатолій

  • Дата реєстрації: 14.05.2014
  • Повідомлень: 894
    • Репутація: 275

Re: [HTML].Div. Проблема з позицією.[Вирішено]

в мене досить часто буває малюнок і щоб стильно йшов текст збоку а не знизу, то в властивостях малюнку я прописую align="left", пізніше прописую <div style="clear:both"></div>

<img src="http:....../1/011.png" alt="птх!!!" width="321px"  hspace="15"  align="left" >

Анатолій вебсайт