私は楽しみと学習の目的で取り組んでいる Web ページを持っています。2 列のレイアウトです。左の列が固定され、右の列がスクロールします。右側の列には、ビデオを埋め込む iframe があります。ビデオを再生し、左の列の固定位置が壊れるまで、すべて問題ありません。Heres js フィドル画像が機能しないことをお詫びします。
また、Firefoxでは問題なく動作しますが、SafariとChoromeでは機能しません。
HTMLはこちら
<div id="main">
<div id= "main-right">
<div id="banner">
<img src="images/banner.gif" alt="Zombie Apocalypse Survival Guide">
</div>
<div id="right_col">
<h1>Overview of Zombies & the Zombie Apocalypse</h1>
<hr style="border-color: #000000" id="zombie">
<h2>What is a Zombie</h2>
<hr>
<div class="content">
<h3>ZOM-BIE: (Zom'be) n. also ZOM-BIES pl.</h3>
<ul>
<li>An animated corpse that feeds on living human flesh.</li>
<li>A voodoo spell that raises the dead.</li>
<li>A Voodoo snake god.</li>
<li>One who moves or acts in a daze "like a zom- bie." [a word of West African origin]</li>
</ul>
<p><img class="contentImage" src="images/Zombie.jpg" alt="Zombie Picture">A zombie is the recently reanimated corpse of a human. This reanimation is unexplained and for our purpose we don't really care about why. We just need to deal with the result. They are slow moving and mindless but determined. There only goal is to feed. We really have no idea why they crave flesh. Taken one or two at a time they pose no problem to an armed and prepared individual. In groups of four or more, problems can begin to arise. Zombies show no fear, feel no pain, and will never stop, there is not a more determined foe on the face planet. This is what makes them so dangerous, oh and the fact that they can be riddled with bullets and not die.</p>
<p>To kill a zombie you must completely destroy the brain, or sever the spinal cord from the head. Be aware that this method leaves the head still capable of functioning. Meaning if you get close enough it can still bit you and infect you. No amount of damage to other parts of the body will kill a zombie. You can make them almost safe by dismembering them and removing the jaw but if you are going to go to that much effort just end them.
</p>
<h3>How to Kill a Zombie</h3>
<iframe src="http://video.vulture.com/video/Walking-Dead-Kills/player?layout=compact&read_more=1" width="416" height="322" frameborder="0" scrolling="no"></iframe>
</div>
<hr id="zombieApoc" style="border-color: #000000" >
<h2>What is the Zombie Apocalypse</h2>
<hr>
<div class="content">
<p><img src="images/zombie-apocalypse.jpg" alt="Zombie Apocalypse Picture" class="contentImage">This basically means that a zombie plague has taken over the world and society as we know it has collapse on a global scale. Humans are no longer the top of the food chain. All of the modern conveniences like cell phones, electricity, and well, with the failure of electricity that ends of most of the other modern day conveniences. Survival has become the main priority. Over time and with proper planning basic survival may not need to be such a high priority.</p>
<p>Human kind is isolated and in small groups scattered through out the world. In this world people have to be wary of roaming zombies as well as other people. Wealth is no longer contingent on how much money you have, but on what kind of supplies you have. Food, weapons, and location are now what makes you rich. With this there will be groups of people that will want what you have. You will have to be almost as weary of the stranger you meet as of the zombie. If you are part of a group you need to be prepared to defend what you have at all costs. It is a ruff world and no one knows How long it will last for. See <a href="extendedSurvival.htm#duration">Extended Survival</a> for more information regarding the duration of the Zombie Apocalypse.</p>
</div>
<div id="footer">
<div id="footerNav">
<a href="index.htm" style="color: #000000; background: #ffffff;">Home</a> —
<a href="surviveFirstNight.htm">Surviving First Night</a> —
<a href="extendedSurvival.htm">Extended Survival</a> —
<a href="weapons.htm">Weapons</a> —
<a href="humanElement.htm">Human Element</a> —
<a href="refMaterial.htm">Reference / Contact</a>
</div>
<a href="images/imageCitation.pdf">Image Citation</a><br>
Copyright © 2013 Per Larsen<br>
<a href="mailto:jokerfwb@yahoo.com">Per Larsen</a>
</div>
</div>
</div>
<div id="main-left">
<div id="leftLogo">
<img src="images/zombieSurvival.png" alt= "Zombie Survival">
</div>
<div id="left_col">
<div class="menu">
<ul>
<li><a href="index.htm" style="color: #ffffff">Home</a>
<div class="subMenu">
<ul>
<li><a href=index.htm#zombie>What is a Zombie</a></li>
<li><a href=index.htm#zombieApoc>What is the Zombie Apocalyspe</a></li>
</ul>
<br>
</div>
</li>
<li><a href="surviveFirstNight.htm">Surviving First Night</a>
<div class="subMenu">
<ul>
<li><a href=surviveFirstNight.htm#firstNight>What is First Night</a></li>
<li><a href=surviveFirstNight.htm#prepared>Prepare/Planning</a></li>
<li><a href=surviveFirstNight.htm#survivalKit>Zombie Survival Kit</a></li>
<li><a href=surviveFirstNight.htm#group>Form a Group</a></li>
</ul>
<br>
</div>
</li>
<li><a href="extendedSurvival.htm">Extended Survival</a>
<div class="subMenu">
<ul>
<li><a href=index.htm#zombie>What is a Zombie</a></li>
<li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
</ul>
<br>
</div>
</li>
<li><a href="weapons.htm">Weapons</a>
<div class="subMenu">
<ul>
<li><a href=weapons.htm#melee>Melee Weapons</a></li>
<li><a href=weapons.htm#firearms>Firearms</a></li>
<li><a href=weapons.htm#projectile>Projectile Weapons</a></li>
<!--<li><a href=weapons.htm#explosives>Explosives</a></li> -->
</ul>
<br>
</div>
</li>
<li><a href="humanElement.htm">Human Element</a>
<br>
</li>
<li><a href="refMaterial.htm">Reference / Contact</a>
<div class="subMenu">
<ul>
<li><a href=refMaterial.htm#refer>Reference Material</a></li>
<li><a href=refMaterial.htm#contact>Contact Info</a></li>
</ul>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
レイアウトを設定する CSS はこちら
/* DIV set up*/
#main
{
width: 90%;
min-width: 700px;
margin-left: auto;
margin-right: auto;
opacity: .88;
}
#main-right
{
width: 79%;
position: relative;
float: right;
}
#main-left
{
width: 19%;
position: fixed;
float: left;
}
#left_col
{
width: 17.5%;
min-width: 135px;
width: 95%;
padding: 10px 0px 0px 0px;
text-align: center;
/*
opacity: .99;
background-color: #663333;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
*/
}
#right_col
{
width: 95%;
background-color: #663333;
float: left;
padding: 10px 0px 0px 0px;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}
.content
{
width: 90%;
color: #000000;
padding: 1px 15px 5px 10px;
background-color: #B8B8B8;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 3px 3px #181818;
-moz-box-shadow: 3px 3px #181818;
box-shadow: 3px 3px #181818;
}
.contentImage
{
float:left;
margin-right: 5px;
width: 40%;
}
#footer
{
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: .80em;
font-style: italic;
text-align: center;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
clear: both;
}
#footerNav
{
font-size: 1em;
font-style: normal;
text-align: center;
color: #000000;
}
#footerNav a
{
text-decoration: none;
color: #ffffff;
padding: 0px 3px 0px 3px;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
#footerNav a:visited
{
color: #ffffff;
}
#footerNav a:hover
{
background: #000000;
}
#leftLogo
{
width: 100%;
min-width: 135px;
height: 115px;
}
#leftLogo img
{
min-width: 135px;
width: 95%;
height: auto;
margin-top: 30px;
}