横に長いサイト つくる

◆ページ全体を横長にするとき

＜div＞のボックスを横長にfloatで配置。

ブラウザの幅を超えるとfloatしたボックスが下にながれる。

解決策↓↓

floatを囲ってるものに対して
横幅を広げる　2000pxとか、


bodyに

overflow:hidden;

◆部分的に横に流れるものをつくるとき

※コピペすると同じものができる

画像というか、色付けしてある「div」をクリックすると、 それがまん中にいく

 ▼html側

<div id="all">

<h1>画像の切替</h1>

<h2>クリックすると画像がかわる</h2>

<div id="yoko">
  <div id="yoko_in">
  <div id="no01" class="yoko_all">
    <h3>見出し01</h3>
     <img src="img_01.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
   
   <div id="no02" class="yoko_all">
    <h3>見出し02</h3>
     <img src="img_02.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
   
   <div id="no03" class="yoko_all">
    <h3>見出し03</h3>
     <img src="img_03.png" alt="AAA" width="200" height="150" />
     <p>内容<br>テキストダミー</p>
   </div>
  </div><!--//yoko_in-->
</div><!--//yoko-->


<p>テキストテキストテキスト</p>

</div>

▼js側

$("#no01").click(function(){
$("#yoko_in:not(:animated)").animate({left:"200px"},"slow","swing");

});

$("#no02").click(function(){
$("#yoko_in:not(:animated)").animate({left:"-300px"},"slow","swing");
});

$("#no03").click(function(){
$("#yoko_in:not(:animated)").animate({left:"-800px"},"slow","swing");
});

▼css

body{
background:#eeeeee;
margin: 20px 0;
}

#all{
width:900px;
margin:0 auto;
text-align:center;
}

#yoko{
position:relative;
height:500px;
width:100%;
background:#ff8800;
overflow:hidden;
text-align:center;
}

#yoko #yoko_in{
width:2000px;
position:absolute;
top:0;
left:-300px;
background:#000000;
}

.yoko_all{
text-align:center;
height:500px;
width:500px;
float:left;
}

#no01{background:#fff0f5;}
#no02{background:#e0ffff;}
#no03{background:#faebd7;}