проблема
Я хочу создать заголовок, который исправлен, который я могу сделать, используя 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;
}
Любая помощь будет принята с благодарностью!
#photoframe {
overflow-x: auto;
}
Положите jsfiddle тем, что, я думаю, вы пытались достичь.