Верстка сайта, фиксированный header

Тема в разделе "Web-design и ваши работы", создана пользователем vanush0k, 2 мар 2015.

  1. vanush0k

    vanush0k New Member

    Регистрация:
    2 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Я в этом деле новичок, решил поупражняться, сделать сайт для друга. Но возникла проблема - решил зафиксировать header сверху, но так как фон полупрозрачный, текст из cont'a наезжает на него. Можете посоветовать способ (кроме "непрозрачного header'a"), чтобы тот текст, который оказывается в области header'a исчезал, его не было видно?
    help.png

    Код (CSS):
    #header {
    height: 70px;
    width:1000px;
    border-bottom: solid 2px #000000;
    position: fixed;
    left: auto;
    top: 10px;
    overflow: hidden;
    }
    #cont{
    padding: 5px 10px;
    padding-top:72px;
    }
     
  2. -master-

    -master- Well-Known Member

    Регистрация:
    14 янв 2012
    Сообщения:
    629
    Симпатии:
    19
    область надо делать не под хидер
     
  3. vital

    vital Больной Компом Детектед
    Команда форума Web Team

    Регистрация:
    29 янв 2006
    Сообщения:
    2.474
    Симпатии:
    27
    z-index: 999; стоит добавить для шапки, что бы она была всегда сверху. Как вариант, подубрав прозрачность и сделав градиент.
    Ну или область которая cont, cтоит обрамить в див, которому проставить отступ сверху(top) равный высоте шапки, что бы текст не налазил на блок шапки, вот и все.
     
  4. vanush0k

    vanush0k New Member

    Регистрация:
    2 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    b
    А можете мысль развить?:)
    [DOUBLEPOST=1425380432,1425380229][/DOUBLEPOST]
    Отступ уже сделан, проблема возникает именно когда начинаешь листать страницу вниз. Когда страница в самой верхней точке, все выглядит вот так:
    help-2.png
    z-index попробовал добавить - ничего не получилось. Я могу приложить полный код сайта и буду премного благодарен, если вы согласитесь помочь:)
     
  5. -master-

    -master- Well-Known Member

    Регистрация:
    14 янв 2012
    Сообщения:
    629
    Симпатии:
    19
    полный не надо, только там где проблема
     
  6. vanush0k

    vanush0k New Member

    Регистрация:
    2 мар 2015
    Сообщения:
    3
    Симпатии:
    0
    Код (HTML5):
    <!DOCTYPE html>
    <html>
    <head>
    <title>Бабочки</title>
    <meta charset="UTF-8">
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="js/main.js" rel="stylesheet" type="text/js">
    <link href='http://fonts.googleapis.com/css?family=Lora:400,400italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,300italic,400italic,500italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <div id="page_align">
    <div id="header">
    <h1>WYLabt</h1>
    <div id="header_nav">
    <ul>
    <li><a href="#">Контакты</a></li>
    <li><a href="#">Доставка</a></li>
    <li><a href="#">Гарантия</a></li>
    <li><a href="#">Каталог</a></li>
    </ul>
    </div>
    </div>
    <div id="cont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <footer>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </footer>
    <div class="clr"></div>
    </div>
    </body>
    </html>

    Код (CSS):
    #page_align{
    width: 1000px;
    margin: 10px auto;
    background: rgba(0,0,0,0.63);
    box-shadow: 0px 3px 10px #000;
    overflow: hidden;
    }
    #header {
    height: 70px;
    width:1000px;
    border-bottom: solid 2px #000000;
    position: fixed;
    left: auto;
    top: 10px;
    }
    #header_nav{
    float: left;
    margin-right: 100px;
    }
    #header_nav ul {
    list-style: none;
    }
    #header_nav ul li{
    border-right: solid 2px #000;
    float: right;
    line-height: 70px;
    padding:0px 30px;
    font-size: 24px;
    }
    #header_nav ul li:nth-child(1){
    border-right: none;
    }
    #header_nav ul li a{
    display: block;
    }
    h1{
    float: left;
    line-height: 70px;
    padding: 0px 30px;
    font-family: 'Lora', serif;
    font-size: 36px;
    }
    #cont{
    padding: 5px 10px;
    margin-top:72px;
    }
    .clr{
    clear: both;
    }
    footer{
    border-top:solid 2px #000000;
    padding: 5px 10px;
    }
     
  7. devunion

    devunion Member

    Регистрация:
    3 ноя 2008
    Сообщения:
    13
    Симпатии:
    0
    Как решили проблему?

    https://jsbin.com вам в помощь в следующий раз при выкладывании кода.
     
Загрузка...

Поделиться этой страницей