Как сделать фиксированный HTML-заголовок горизонтальным с помощью CSS?

Я нашел этот HTML код для создания HTML фиксированного заголовка:Как сделать фиксированный HTML-заголовок горизонтальным с помощью CSS?

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html"/> 
    <meta charset="utf-8"/> 
    <title>NavBar</title> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<body> 
<div id="navigation"> 
    <div class="center"> 
     <div class="logo"> 
     <h1>Logo</h1> 
    </div> 
    <ul class="right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Our Apps</a></bli> 
     <li><a href="#">Support</a></li> 
     <li><a href="#">Press</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
    </div> 
</div> 
<div id="content"> 
    <hgroup> 
     <h1>Hello</h1> 
     <h2>Hello again</h2> 
     <h3>And Again!</h3> 
    </hgroup> 
    <article> 
     <section> 
      <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo  Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p> 
     </section> 
        <section> 
      <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p> 
     </section> 
         <section> 
      <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p> 
     </section>   <section> 
      <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p> 
     </section> 
    </article> 
</div> 
    </body> 
    </html>

Это файл style.css:

 body { 
      padding:0; 
      margin:0; 
      font-family: Helvetica, Arial, sans-serif; 
      font-size:12px; 
    } 
    #navigation { 
      position:fixed; 
      display:block; 
      top: 0; 
      width: 100%; 
      height:35px; 
      padding-top: 15px; 
      -webkit-box-shadow: 0px 0px 8px 0px #000000; 
      background-color: rgba(1,1,1,0.8); 
      color:rgba(1,1,1,0.8); 
      border-bottom:1px solid black; 
    } 

    .center {width: 1000px; margin: 0 auto;} 

    div.logo {display:inline-block; 

        } 

    .logo h1 { 
      display:inline-block; 
      margin:0; 
      padding:0; 
     color:white; 
    } 

    ul, li { 
      padding:0; 
      margin:0; 
    } 
    #navigation ul { 
      list-style: none; 
      float:right; 
    } 
    #navigation ul li { 
      display:inline; 
    } 

    #navigation a { 
      font-size:14px; 
      padding: 0 15px; 
      color:white; 
      text-decoration:none; 
    } 

    #navigation a:hover { 
      color:grey; 
    } 
    #content { 
      width:800px; 
      margin: 0 auto; 
      margin-top:80px; 
    }

Проблема заключается в том, что, когда я наезд на страницу, я только видеть элемент с текстом «Логотип», и я не могу прокручивать по горизонтали, чтобы видеть ссылки заголовка во время прокрутки. Просто попробуйте этот код, и вы поймете, что я имею в виду. Как заставить фиксированный заголовок прокручиваться по горизонтали?

источник

2013-12-06 tonix

Можете ли вы создать JS бен/скрипку? – sachinjain024

Я создал эту скрипку для OP: http://jsfiddle.net/FQ4LC/ – kalamar

Спасибо, любые предложения о том, как я могу достичь своей цели? – tonix

Попробуйте настроить это свойство в CSS, на котором размещен весь контент, который вы хотите прокрутить. 'Переполнение-X: прокрутка',

источник

2013-12-06 12:38:04 rohit12sh

Я поместил это «переполнение-x: прокрутка»; внутри моего id # navigation id, но я получаю еще одну полосу прокрутки внутри div, и это не то, что я хочу. Я просто хочу прокрутить фиксированный навигатор горизонтально с помощью прокрутки браузера. Есть ли у вас какая-то другая идея достичь этого? Спасибо! – tonix

Изменить

.center {width: 1000px; margin: 0 auto;}

.center {margin: 0 auto;}

Edit: С помощью этого решения заголовок не будет прокручиваться, но ссылки не исчезнет.

Edit 2: JavaScript решение (Jquery):

$(document).ready(function() { 

    $(window).resize(function() { 
     $("#navigation .center").css("maxWidth", $(window).width()); 
    }); 
});

источник

2013-12-06 12:51:45 kalamar

Пробовал это, но я хотел бы держать все в центре, когда я уменьшаю масштаб. Есть ли другой способ? – tonix

Я сделал некоторый прогресс, используя '#navigation {position: device-fixed;/* ... * /} ', но это все еще не работает. – kalamar

Да, это не работающее решение, потому что navbar теряет фиксированное положение, если вы прокручиваете страницу по вертикали ... Я не могу понять, как я могу решить эту проблему, вроде бы очень простая проблема, я думаю ... – tonix

Неподвижные элементы, как правило, не прокручиваются, они просто не для него, как они полностью вырваны из контекста для всего сайта. Я бы подумал об использовании position: absolute.

http://jsfiddle.net/FQ4LC/8/

источник

2013-12-06 14:08:15

Хм ... хороший. Но заголовок скрыт, когда вы прокручиваете вертикально. Тем не менее, это хорошая точка входа для решения JavaScript. – kalamar

Как сделать фиксированный HTML-заголовок горизонтальным с помощью CSS?

ответ

Смежные вопросы