Jump to content
  • 0

Склеить два элемента


serjdjio
 Share

Question

Помогите советом. Как склеить два элемента?

код нижнего: 

.underhead {
    background: #ededed;
    padding: 35px 0 22px 50px;
}

.underhead li {
    float: left;
    padding: 12px 0 12px 90px;
}

.underhead h3 {
    font-size: 15px;
    color: #575757;
}

.underhead:auto {
    content: '';
    display: table;
    clear: both;
}

Скриншот приложил. Заранее спасибо

Screenshot_1.png

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Полный код + screenshot 

  margin: 0;
  padding: 0;  
}

ul { /*для списка отменяем маркеры*/
    list-style: none;
}

a { /*для ссылок отменяем подчёркивание*/
    text-decoration: none;
}

body {
    background: url(../images/background1.png) no-repeat 50% 0 #0e0e0e;
    font: 12px/1.67 Arial, Helvetica, sans-serif;
    padding: 40px 0;    
}

.wrapper {
    width: 960px;
    margin: 0 auto;
}
       
       /*HEADER BEGIN*/
    header {
        background: #ffffff;
        height: 97px;
        -webkit-border-radius: 7px 7px 0 0;/*для разных браузеров которые могут не потдерживать(webkit - движок, опера и мозила)*/
        -o-border-radius: 7px 7px 0 0;
        -moz-border-radius: 7px 7px 0 0;
        border-radius: 7px 7px 0 0;
    }  
    
    header h1 {
        float: left;
        margin: 30px 0 0 40px;
    }
    
    .tel {
        background: url(../images/bg-phone.png) repeat-x 0 0;/*repeat-x-Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat*/
        padding: 3px 27px 3px 90px;/*размер картинки*/
        font-size: 18px; 
        font-weight: bold;
        color: #c0c0c0;
        float: right;
    }
      nav{
        float: right;
        clear: right;        
      }
      
      nav li {
         float: right;
        margin: 20px 30px 0px 5px;         
      }
      
      nav li a {
        color: #808080;
        text-transform: uppercase; /*заглавные буквы*/
        font-weight: bold;
        padding: 3px 15px;        
      }
      
      nav li a:hover {
        background: url(../images/bg-bt.gif) repeat-x 0 0;
        color: #ffffff;
        border-radius: 4px;        
      }
      
      nav li.current a {
        background: url(../images/bg-bt.gif) repeat-x 0 0;
        
        color: #ffffff;
        border-radius: 4px;
        border: 1px solid #00224b;        
      }
      
      
      
      
      /*HEADER END*/
      
     @font-face {
        font-family: Treb;
        src: url(../fonts/treb.ttf);        
     } 
      
      
      .slider-block {
        background: url(../images/slider-bg.png) no-repeat 0 0;
        height: 332px;
        padding: 85px 50px 0;
        font-size: 29px;
         font-family:  Treb;
        color: #fff;
        line-height: 34px;
      }
      
      
      .fs-35 {
        font-size: 35px;
        font-style: bold;
        text-transform: uppercase;
        margin: 10px 0 35px;
      }

.started {
    background: url(../images/rr.png) no-repeat 95% 55%, 
    url(../images/bg-button.gif) repeat-x 0 0;/*95 и 60 - repeat по x и y*/
    
    font-size: 20px;
    color: #b90016;
    text-transform: uppercase;
    font-weight: bold;
    padding: 15px 50px 13px 25px;
    border-radius: 8px;
    -o-border-radius: 8px;    
    -webkit-border-radius: 8px;    
    -moz-border-radius: 8px;        
}

.underhead {
    background: #ededed;
    padding: 35px 0 22px 50px;
}

.underhead li {
    float: left;
    padding: 12px 0 12px 90px;
}

.underhead h3 {
    font-size: 15px;
    color: #575757;
}

.underhead:auto {
    content: '';
    display: table;
    clear: both;
}

Screenshot_1.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By gars
      Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. 
      Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. 
      и вижу. что блок main наехал на блок header.
      Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки).  как решить и почему произошло?     Заранее благодарю всех за помощь
      Скрин прикрепляю.   
      HTML
      <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS
      body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }  

    • By intman
      Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм.   И составил  их в столбец, обернув все в общий блок.
      <div class="d4"> <div class="d1"></div> <div class="d5"></div> <div class="d3"></div> </div> Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело.
      Код CCS  такой
      Треугольник сверху
      width: 0; height: 0; border-top: 100px solid #68B8AE; border-right:425px solid transparent; display:inline-block; margin-top:600px; параллелогамм
      -moz-transform: rotate(76deg) skew(7deg, 15deg); -webkit-transform: rotate(76deg) skew(7deg, 15deg); -o-transform: rotate(76deg) skew(7deg, 15deg); -ms-transform: rotate(76deg) skew(7deg, 15deg); transform: rotate(76deg) skew(7deg, 15deg); width:250px;  height:450px; border:4px solid #8B0000; background:#7FFF00;  margin-left:86px; треугольник снизу
      width: 0; height: 0; border-bottom: 100px solid red ; border-left: 425px solid transparent; margin-bottom:700px; display:inline-block; }  
    • By iiwanc
      Здравствуйте!
      Простите, если не сюда пишу.
      Только начинаю изучать HTML и CSS. 
      Сверстал страницу, на которой присутствуют шапка, футер, меню.
      Страница трехколоночная. Сайт планирую делать многостраничным.
      Теперь задался вопросом: Как разместить основные блоки сайта на всех страницах?
      Имею в виду: футер, шапку, боковые колонки.
      Не размещать же их на каждой странице. Имею в виду, если кликнуть на ссылку в меню, то открывается новая страница без меню, футера и т.д.
      Как сделать, чтобы эти основные блоки отображались во всех страницах.
      Буду рад советам!
      По форуму искал и читал, но не смог применить некоторые наброски к своему сайту.
      Так понимаю, необходимо какие-то скрипты подключить?
      Сайт на PHP не хотелось бы писать. Еще не дорос до него
      Прикрепляю файлы, что сделано.
      index.html
      style.css
    • By Eugenice
      Добрый вечер, уважаемые форумчане.
      Я пишу с нуля свой первый сайт и у меня на этапе верстки возникла проблема с размещением меню, что вкладывается в блок header. При масштабировании страницы, меню меняет свои значения: либо оно вылазит за пределы блока-родителя, либо не доходит до его границ (появляются неприятные белые полосы). Возникает вопрос, как зафиксировать меню так, чтобы масштабирование не меняло расположение его блоков?
      + при масштабе в 100% приходится использовать не целочисленное значения в отступах nav ul li a {padding:41.6px 50px;} для того, чтобы избавиться от белой линии под блоком (методом подгона). Хочется понять, как можно "вылечить" и этот дефект. Раз высота шрифта 15px, а высота блока header 100px, то отступы сверху-снизу должны быть (100-15)/2=42.5. Откуда тогда берется 41.6 не совсем понятно. 
      Прикладываю скриншот https://yadi.sk/i/HOGOClqb3Gmy2k с описанием для лучшего понимания ситуации, а сам код прикрепил к сервису codepen:
      С уважением, Евгений.
    • By Anna-15
      Нужно чтобы блоки стояли так:

      Сейчас блоки стоят так:

      Подскажите, пожалуйста, как выронить блоки, чтобы они стояли ровно?
      Код:

      #content {margin-left: 270px;padding: 10px;background: #f0f0f0;height: 900px;}.cat {height: 190px;width: 340px;float: left;padding: 1px;margin-top: 20px;margin-left: 20px;text-align: left;border: 1px solid #8fa09b;background: #ffffff;}—-<div id="content"><div class="cat"></div><div class="cat"></div><div class="cat"></div><div class="cat"></div></div>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy