От: ACTA е приета (вдъхновител на SOPA)
Няма да споря.
След като грешките са "оправени":
Грешното:
Код:
<div style="position:absolute; left:30px; z-index:400000000;">
Правилното:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" lang="bg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>503 Site is Temporary Unavailable.</title>
<!-- script src="blackout/jquery-1.c" type="text/javascript"></script -->
<style>
BODY {
background-color: black;
margin: 0px; padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
overflow: none;
text-align: center;
background: url('blackout/blackout.gif');
}
a{
color:red;
}
a:hover{
color:red;
}
a:visited{
color:red;
}
#black_bg
{
width: 100%;
background: black;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
#outer {
width: 960px;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
padding:12px;
font-size:13px;
}
#outer h1 { margin-top: 40px; margin-bottom: 40px; }
#outer h2 { margin-top: 30px; margin-bottom: 60px; }
.img_floatleft { margin-top: 50px; width: 408px; text-align: justify; }
.img_floatleft img { float: left; margin-right: 20px; }
.img_nofloat { margin-top: 50px; width: 408px; text-align: center; }
.fontsize18 { font-size: 18px; }
.fontsize28 { font-size: 28px; }
</style>
<script>
function hide_blackoutpic()
{
if (document.all)
{
document.getElementById('black_bg').style.filter = 'alpha(opacity=100)';
}
else
{
document.getElementById('black_bg').style.mozOpacity = '1.00';
document.getElementById('black_bg').style.opacity = '1.00';
}
}
</script>
</head>
<body onload="hide_blackoutpic();">
<div id="black_bg">
<center>
<div id="outer">
<h1>503 Site is Temporary Unavailable.</h1>
<h2>Онлайн протест срещу ACTA! "ACTA Blackout" 25.02.2012г.</h2>
<!--–googleoff: all–-->
<!-- script src='blackout/blackout2.js' type='text/javascript'></script -->
<div class="img_floatleft">
<img src="blackout/acta.png" alt="stop acta" title="stop acta">
Здравейте, приятели. Днес е ден на траур на Интернет
заради подписването на тайното споразумение наречено ACTA. Като
несъгласни с това ние и други САЙТОВЕ решихме да затъмним САЙТОВЕТЕ си в
знак на протест срещу ACTA!!! За тези, които не знаят какво е ACTA
прочетете <a href="http://www.youtube.com/watch?v=eNhxqgveVpo" rel="nofollow" target="_blank">тук</a>.
Ние казваме не на ACTA кажете го и вие <a href="http://www.avaaz.org/en/eu_save_the_internet/?vl" rel="nofollow" target="_blank">тук</a>!
</div>
<div class="img_nofloat">
<p>Ще бъдем отново онлайн в 23:00 на 25.02.2012</p>
<p><iframe src="http://www.youtube.com/embed/RZB22Z7dNJM?autoplay=1&autohide=1&border=0&wmode=opaque" allowfullscreen="" frameborder="0" height="304" width="405"></iframe></p>
<p>Онлайн протест:
<a href="http://www.acta.stopcensorship.net/" rel="nofollow" target="_blank">
Офицялна страница на онлайн протеста!
</a>
</p>
<p>Онлайн протест: Официална Facebook група!
<a href="http://www.facebook.com/groups/328165807224679/" rel="nofollow" target="_blank">
http://www.facebook.com/groups/328165807224679/
</a>
</p>
<p>Обществено събитие за Онлайн протест срещу ACTA! "ACTA Blackout "
<a href="http://www.facebook.com/events/380320331994742/" rel="nofollow" target="_blank">
http://www.facebook.com/events/380320331994742/
</a>
</p>
<p>Офлайн протести в България 25.02.2012:</p>
<p>София:
<a href="https://www.facebook.com/events/271624316241985/" rel="nofollow" target="_blank">
https://www.facebook.com/events/271624316241985/
</a>
</p>
<p>Добрич:
<a href="https://www.facebook.com/events/182861465149496/" rel="nofollow" target="_blank">
https://www.facebook.com/events/182861465149496/
</a>
</p>
<p>Благоевград:
<a href="https://www.facebook.com/events/182861465149496/" rel="nofollow" target="_blank">
https://www.facebook.com/events/182861465149496/
</a>
</p>
<p>Сандански:
<a href="https://www.facebook.com/events/276488395756456/" rel="nofollow" target="_blank">
https://www.facebook.com/events/276488395756456/
</a>
</p>
<p>Вeлико Търново:
<a href="http://www.facebook.com/events/172817776167200/" rel="nofollow" target="_blank">
http://www.facebook.com/events/172817776167200/
</a>
</p>
<p class="fontsize18">Образовай се:</p>
<p>
<iframe src="http://www.youtube.com/embed/eNhxqgveVpo?autohide=1&border=0&wmode=opaque" allowfullscreen="" frameborder="0" height="304" width="405"></iframe>
</p>
<p class="fontsize28">Още интересно видео:</p>
<p class="fontsize18">Бъди горд:</p>
<p>
<iframe src="http://www.youtube.com/embed/C_SXrh_sJYU?autohide=1&border=0&wmode=opaque" allowfullscreen="" frameborder="0" height="304" width="405"></iframe>
</p>
<p class="fontsize18">Бъди Българин:</p>
<p>
<iframe src="http://www.youtube.com/embed/ARySTvSBOYo?autohide=1&border=0&wmode=opaque" allowfullscreen="" frameborder="0" height="304" width="405"></iframe>
</p>
<p class="fontsize18">Бъди Европеец:</p>
<p>
<iframe src="http://www.youtube.com/embed/g8M8XN0hzhY?autohide=1&border=0&wmode=opaque" allowfullscreen="" frameborder="0" height="304" width="405"></iframe>
</p>
<p class="fontsize18">Но най-вече бъди човек!</p>
<p class="fontsize18">Уважавай другите и не мисли само за пари!</p>
<p class="fontsize18">Свободата е най-ценото нещо не позволявай да я изгубим:</p>
<p class="fontsize28">Кажи не на "ACTA"!</p>
<p class="fontsize18">Както го направихме и ние!</p>
</div>
<!-- NACHALO NA TYXO.BG BROYACH -- >
<script type="text/javascript">
<!--
d=document;d.write('<a href="https://www.tyxo.bg/?132442" title="Tyxo.bg counter"><img width="0" height="0" border="0" alt="Tyxo.bg counter" src="'+location.protocol+'//cnt.tyxo.bg/132442?rnd='+Math.round(Math.random()*2147483647));
d.write('&sp='+screen.width+'x'+screen.height+'&r='+escape(d.referrer)+'"></a>');
//-- >
</script><a href="https://www.tyxo.bg/?132442" title="Tyxo.bg counter"><img alt="Tyxo.bg counter" src="503_files/132442.png" border="0" height="0" width="0"></a><noscript><a href="http://www.tyxo.bg/?132442" title="Tyxo.bg counter"><img src="https://cnt.tyxo.bg/132442" width="0" height="0" border="0" alt="Tyxo.bg counter" /></a></noscript>
<!-- KRAI NA TYXO.BG BROYACH -->
<!--–googleon: all-->
</div>
</center>
</div>
</body>
</html>
Та с две думи защо казвам, че твоя вариант е грешен, а моя "правилен":
При теб картинката от Матрицата е с
position: relative, а съдържанието с
position: absolute и то отива където си иска. Това:
Код:
<div style="position:absolute; left:30px; z-index:400000000; top: 100px;">
ще го свали надолу със 100 пиксела и няма да се припокрива.
И цялата тази щуротия е направена с цел... да се виждат заглавията докато зареди страницата, което при бърза връзка едва ли някой ще забележи - трябва през тези 1-2 секунди да се дзвери, за да ги види, щото анимацията отзад ги маскира хубаво...
Според мен няма нужда да е така, затова в моя вариант заглавията са полупрозрачни, заедно с всичко останало, докато зареди страницата. Така елиминирам нуждата от position: absolute. Само не ми хрумва как да разкарам предупреждението за "Blocked content" в IE8. Ето как става:
Цялото BODY е на разположение (margin:0, padding:0), фон - Матрицата и бял цвят за текста; всички линкове червени.
В него един DIV black_bg (заема цялата страница - width 100% & height 100%) - той е черен и полупрозрачен, докато зареди страницата - така се вижда Матрицата зад него. Когато страницата зареди, JavaScript-а го прави напълно непрозрачен (чрез opacity =1.0)
Вътре в black_bg има друг DIV - outer (width: 960px) - този е отговорен да ти центрира по подразбиране всичко в страницата. Не е широк 100%, щото ще се появи хоризонтален скролер.
Същото нещо се получава и ако посетителя смали прозореца. Частично решение е да свиеш оuter до 410px, при което h1 и h2 ще идат на два реда; умишлено съм направил outer толкова широк - за да запазя страницата във вида, в който искам да е.
И вече в него е самото съдържание:
- 2-те заглавия (h1 & h2)
- картинката с текстовия абзац отдясно й (float: left я слага отляво на текста) - това е оформено в DIV img_floatleft
- всички останали текстови абзаци (p) и клипове (iframe) в DIV img_nofloat
А като се сдобиеш с ракия - наздраве! :beer:
