Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.04.2017, 19:38   #1
gldas
Новичок
Джуниор
 
Регистрация: 15.04.2017
Сообщений: 1
По умолчанию учебная верстка проблемы с отступами

всем привет, помогите разрешить такую проблему:
не понимаю откуда возникли эти отступы? и как их убрать , кусок этот блока кода прикреплен ниже.

Код HTML:
<body>     
      <div class="bg_h">
           <header>
               <a href="index.php" > <img src="img/logo.png" alt=""></a>
               <ul class="sidebar_head">
                   <li><a href="">Features</a></li>
                   <li><a href="">About</a></li>
                   <li><a href="">Pricing</a></li>
                   <li><a href="">Reviews</a></li>
                   <li><a href="">Contact</a></li>
               </ul>
           </header>
       </div>  
    <div class="wrapper">       
       <div class="block_1 ">
          <div class=" modern">            
             <div class="form">
                 <ul>
                     <li>                 
                     <button class="but_1">Try Your FREE Trial Today</button>
                     </li>
                     <li><input type="text" placeholder="Name"></li>
                     <li><input type="email" placeholder="Email"></li>
                     <li><input type="password" placeholder="Password"></li>
                     <li><button class="but_2">Get Started</button></li>
                </ul>
              </div>      
                     <img class="main-picture" src="img/main.jpg" alt="">
              <span>MODERN AXURE TEMPLATE <br> FOR BEAUTIFUL PROTOTYPES</span>
              <img src="img/modern_line.png" alt="">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean <br>
                euismod bibendum laoreet. Proin gravida dolor sit amet lacus <br>
                accumsan et viverra justo commodo.
              </p>
              <a  href="img/Logo.png" download><button class="download">Download</button></a>              
             </div>                    
       </div>


а вот CSS
не нашел выделитель для css


Код:
body{
    font-family: 'Times New Roman';
       background-color: #282828;     
}         
body p{
    color:#bcbcbe;
}
.wrapper{         
    max-width: 1400px;
/*    min-width: 800px;*/
    margin: 0 auto;
}
 .clear{
        clear:both;
    }
                            /* header */
.bg_h{   
    background-color:#000;    
}
header{
    max-width:1400px;
    margin: 0 auto;    
    height: 70px;
}
header>a{
    display: inline-block;
}
header li{
    display:inline-block;    
}
header img{
    width: 250px;
    height: 75px;    
}
.sidebar_head{
    float:right;   
    margin-top: 25px;
    margin-right: 150px;    
}
.sidebar_head a{
    color:#c9c9c9;
    font-size: 14px;
    font-family: 'Times New Roman';
    margin-left: 43px;
}
                        /*header end*/
.block_1{
    min-height: 640px;
    position: relative;
    padding: 0 140px 0 140px; 
/*    background-color: #9a9a9a;    */
}
.modern{ 
      
}
.modern .main-picture{ 
    position: absolute;  
    z-index: -5;
    width:100%;
    height:100%;
}
.block_1 span{
    display: block;
    color: #fff;
    font-size: 36px;
    font-weight: normal;
    font-family: 'Times New Roman';
    padding-top: 200px;
}
.block_1 img{
    margin-top:40px;
}
.block_1 p{
    font-size: 16px;
    line-height: 23px;
    color:#c6c6c6;
    margin-top: 40px;    
}
 .download{
    font-size: 15px;
    line-height: 15px;
    color:#fff;
    padding: 13px 28px;
    border:2px solid #f5f5f5;
    margin-top: 45px;
    background-color: inherit;
}
.form{
    float: right;
    width: 362px;
    height: 362px;
    margin-top: 140px;
    background-color: #fff; 
    border-radius: 5px 5px 5px 5px;
}
.but_1{
    width: 362px;
    font-size: 20px;
    line-height: 60px;
    background-color: #f5f5f5;
    border:none;
    border-radius: 5px 5px 0 0;
}
.but_2{
    color:#fff;
    font-size: 15px;
    background-color: #ff9b51;    
    height: 53px;
    width: 362px;
    border: none;
    margin-top: 44px;
    border-radius:0 0 5px 5px ;    
}
.form input{
    margin:0 40px;
    margin-top: 35px;
    width:275px;
    height: 30px;
    border:none;
    border-bottom: 1px solid #d6d6d6;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #fbfbfb;    
}
Изображения
Тип файла: jpg Безымянный.jpg (70.5 Кб, 147 просмотров)

Последний раз редактировалось Alex11223; 15.04.2017 в 20:56.
gldas вне форума Ответить с цитированием
Старый 15.04.2017, 20:54   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Цитата:
Сообщение от gldas Посмотреть сообщение
не понимаю откуда возникли эти отступы?
Так откройте DevTools (кнопка F12 в Хроме/FF/IE) и посмотрите.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мобильная верстка - уехала верстка Phillbot HTML и CSS 0 13.04.2017 10:29
Проблема с отступами... Ничччего не понимаю... Bulat Ibrahim HTML и CSS 8 25.02.2017 11:14
Печать текста с отступами(margins) roperd Общие вопросы Delphi 2 12.10.2011 08:46
Странности с отступами evheniys HTML и CSS 7 06.06.2011 10:42
IE6 Верстка и проблемы Alex Cones HTML и CSS 5 29.08.2010 21:12