http://www.kikbo.com/secret/about.html
Это разбивает мне яйца ... в зависимости от уровня масштабирования, используемого браузером, мои ящики не выстраиваются в ряд и выглядят как дерьмо (во всех браузерах),Какие-либо предложения?Могу ли я сделать это проще с jQuery?
HTML
</div>
<div class="tile" id = 'tile1' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>CPSIA</div>
<div class="tile" id = 'tile2' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>Drugs</div>
<div class="tile" id = 'tile3' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>Robots</div>
<div class="tile" id = 'tile4' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>The<br>Kikbo<br>Story<br></div>
<div class="tile-right" id = 'tile5' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>What's with the crazy colors?</div>
<div class="tile" id = 'tile6' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);">Are Kikbos available outside the United States?</div>
<div class="tile" id = 'tile7' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile" id = 'tile8' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile" id = 'tile9' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-right" id = 'tile10' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br>Where can I get my very own Kikbo?</div>
<div class="tile-bottom" id = 'tile11' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile12' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile13' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom" id = 'tile14' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-bottom-right" id = 'tile15' onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="fadeOutNoDisplay(this.id,100);"><br><br>hello!</div>
<div class="tile-small"><br><br>CPSIA</div>
<div class="tile-small"><br><br>˼½Ý</div>
<div class="tile-small"><br><br>RobsdfsdafotsÊ®´ó¸»ÉÌ´ó·¨Ê¦´ó·¨</div>
<div class="tile-small">Founded in Jan 2010, our mission is to entrench Kikbo Kick Shuttlecocks</div>
<div class="tile-right-small">There are six buttons up top and six feathers in every pack. The probability of each color appearing is the same for the buttons as it is for the feathers. <a href="javascript:colorize()">Try for yourself.</a></div>
<div class="tile-small"><br><br>nope.</div>
<div class="tile-small"><br><br>helasflo!</div>
<div class="tile-small"><br><br>helasdflo!</div>
<div class="tile-small"><br><br>hello!</div>
<div class="tile-right-small"><br><br>nowhere.</div>
<div class="tile-bottom-small"><br><br>asdfas</div>
<div class="tile-bottom-small"><br><br>hellasdfo!</div>
<div class="tile-bottom-small"><br><br>hello!</div>
<div class="tile-bottom-small"><br><br>hello!</div>
<div class="tile-bottom-right-small"><br><br>hello!</div>
</div>
CSS
div.tile {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}
div.tile:hover {
cursor: pointer;
}
div.tile-right{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}
div.tile-right:hover {
cursor: pointer;
}
div.tile-bottom {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}
div.tile-bottom:hover {
cursor: pointer;
}
div.tile-bottom-right{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 30px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 2;
position: relative;
}
div.tile-bottom-right:hover {
cursor: pointer;
}
div.tile-small {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}
div.tile-right-small{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}
div.tile-bottom-small {
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}
div.tile-bottom-right-small{
width: 192px;
height: 192px;
background-color: white;
border-color: grey;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
text-align: center;
margin: 0px;
float: left;
font: 15px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
z-index: 1;
position: relative;
top: -580px;
}
Javascript
document.write("<style type='text/css'>#big-pic {visibility:hidden;} </style>");
document.write("<style type='text/css'>#gallery {visibility:hidden;} </style>");
function startFade(objId,x) {
obj = document.getElementById(objId);
if (x == 'in') {
setOpacity(obj, 0);
obj.style.visibility = 'visible';
fadeIn(objId,0);
}
else if (x == 'out') {
setOpacity(obj, 100);
fadeOut(objId,100);
}
else {
alert('You must set x to "in" or "out"');
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.99999999999:opacity;
// IE4,5,6,7
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) { //function calls itself if the opacity is not yet over 100
setOpacity(obj, opacity);
opacity += 5; // the increment by which the opacity % changes.
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
}
else {
obj.style.removeAttribute('filter'); //IE bug
}
}
}
function fadeOut(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity >= 0) { //function calls itself if the opacity is not yet under zero
setOpacity(obj, opacity);
opacity -= 5; // the increment by which the opacity % changes.
window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
}
else {
obj.style.display = 'none';
}
}
}
window.onload = function() {
startFade('big-pic','in');
window.setTimeout("startFade('whitediv_headings','out');",1400);
window.setTimeout("startFade('gallery','in');",2800); //maybe change to a white div to present a choppy intro...?!
window.setTimeout("startFade('whitediv_navbar','out');",2800);
window.setTimeout("startFade('whitediv_text-right','out');",2800);
};
function fadeOutNoDisplay(objId,opacity) {
if (document.getElementById) {
document.getElementById(objId).onclick = null;
document.getElementById(objId).onmouseover = null;
document.getElementById(objId).onmouseout = null;
obj = document.getElementById(objId);
if (opacity >= 0) { //function calls itself if the opacity is not yet under zero
setOpacity(obj, opacity);
opacity -= 5; // the increment by which the opacity % changes.
window.setTimeout("fadeOutNoDisplay('"+objId+"',"+opacity+")", 50); //=> the opacity will change by the increment in the line above every X seconds where X is the lenght of the setTimeout
}
else {
document.getElementById(objId).style.visibility = 'hidden';
}
}
}