Как мне использовать фиксированный заголовок с горизонтально прокручивающимся телом?

0

проблема

Я хочу создать заголовок, который исправлен, который я могу сделать, используя CSS

#Header{
        position:fixed;
       }

Однако я не могу заставить остальные страницы прокручивать по горизонтали!

Это моя разметка.

<div id="Header">

    <div class="title">
      <h1>Bass Clef Photography</h1>
    </div>
    <div class="tagline">Passion 4 Live Music & Passion 4 Photography</div>


  <div id="tabsContainer">
   <div class='tab zero'>
      <ul>
        <li><a href="BassClef.html">Home</a></li>
      </ul>
    </div>
   <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
      <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
  </div>

</div>

<div class="spacer"></div>
<div id="photoframe">
      <div class="pics"> <img src="uploads/picture01.jpg" alt=""></div>
      <div class="pics"><img src="uploads/picture02.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture03.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture04.jpg" alt=""></div>
         <div class="pics"><img src="uploads/picture05.jpg" alt=""></div>
      <div class="pics"> <img src="uploads/picture06.jpg" alt=""></div>
      <div class="pics"><img src="uploads/picture07.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture08.jpg" alt=""></div>
   </div>



   </div>
</body>

Это рамка div, которую я хочу прокрутить по горизонтали. Трудная вещь - "фоторамка" содержит изображения, которые не имеют фиксированной ширины. поэтому я не хочу устанавливать его свойство CSS с фиксированной шириной, например.

#photoframe
{
Width:1000px;
}    

Любая помощь будет принята с благодарностью!

Теги:

1 ответ

2
Лучший ответ
#photoframe {
    overflow-x: auto;
}

Положите jsfiddle тем, что, я думаю, вы пытались достичь.

  • 0
    Это именно то, что я искал, большое спасибо!
  • 0
    @aliicam, я знаю, что это не входит в суть вопроса, но как бы я разместил фоторамку внизу страницы или, по крайней мере, сделал бы полосу прокрутки внизу?
Показать ещё 4 комментария
Сообщество Overcoder
Наверх
Меню