Autor Zpráva
Fred
Profil
#1 · Zasláno: 2. 5. 2005, 16:30:47 · Upravil/a: Fred
Odpovědět Citovat
Udělal jsem si kompletně gumový a centrovaný em-layout, ale protože možnosti css jsou v některých směrech omezené, rozhodl jsem se některé prvky dopočítávat javascriptem (jde jen o vzhled, takže mi vypnutý js nevadí).

Celé to vypadá nějak takhle, script je trochu delší protože ve zdroji nejsou idéčka, kterých bych se chytnul.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<meta content="text/html; charset=windows-1250" http-equiv="Content-Type">
<meta content="cs" http-equiv="Content-Language">
<title>Redakční systém pro blog</title>
<style type="text/css"><!--
*{padding:0;margin:0;vertical-align:middle;text-align:center;}
body{background: url(face.jpg) #000 0 0 no-repeat fixed;}/*tohle je pozadí co mění pozici*/
div.main-blok{margin:0.1em auto;background:#efe9d2}
div.main-blok{width:38em;border:0.2em solid #c6c6c6;_width:39em;}
--></style>
<script type="text/javascript">
<!--
function pozadi(){
var theWidth=getBrowserWidth();
var vse=document.getElementsByTagName('div');
for(var i=0;i<vse.length;i++){
if ('main-blok'==vse[i].className) {
var main=vse[i].scrollWidth;
var prostor=(theWidth-main)/2;
if (prostor<156){
var xxx=theWidth/2-main/2-164;
document.body.style.backgroundPosition=xxx+'px 0';}
else{
document.body.style.backgroundPosition='0 0';}
return true;} }}
function getBrowserWidth(){//thx http://www.themaninblue.com/experiment/ResolutionLayout/
if (window.innerWidth){return window.innerWidth;}
else if (document.documentElement&&document.documentElement.clientWidth!=0){
return document.documentElement.clientWidth;}
else if(document.body){return document.body.clientWidth;}
return 0;}
function addEvent(obj,evType,fn){if(obj.addEventListener){obj.addEventListener( evType,fn,true);return true;}
else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}
else{return false;}}
addEvent(window,'load',pozadi);
addEvent(window,'resize',pozadi);
//-->
</script>
<body>
<div class="main-blok">
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
lorem ipsum oposum
</div>
</body>
</html>


Všude to funguje dle mých představ (s tím že Opera je při změně velikosti písma mimo hru, protože mění velikost fontu spolu s celým layoutem). To znamená pozadí se posouvá při změně velikosti okna a mělo by se posouvat i při změně velikosti písma, protože jeho pozice se počítá z rozdílu šířky okna a šířky divu co v něm je uzavřený celý obsah to celé lomeno dvěmi mínus šířka obrázku na pozadí. Ale bohužel gecko to jaksi na změnu velikosti písma přepočítá až po reloadu, na změnu velikosti okna reaguje správně. Dotaz tedy je lze nějak javascriptem vyvolat funkci na změnu velikosti písma (v IE to funguje a v Opeře se to nedá zjistit, díky jejímu zoomu) . Cílem je, aby pravá hrana orázku byla kousek od levého okraje divu s class="main-blok"
Časová prodleva: 3 dny
Peta
Profil *
#2 · Zasláno: 5. 5. 2005, 11:58:57
Odpovědět Citovat
Proc nedelas polohovani obrazku jako 50% ? Teda jestli spravne chapu, ze to cely ma obrazek na pozadi vystredit.
{background:transparent url("kulicky5.gif") no-repeat 50% 0%}
Fred
Profil
#3 · Zasláno: 6. 5. 2005, 09:51:33
Odpovědět Citovat
Nepochopil jsi to podívej se sem na demo http://xy.wz.cz/rs-vzhled/
habendorf
Profil
#4 · Zasláno: 6. 5. 2005, 13:07:54
Odpovědět Citovat
Buď jsem to špatně pochopil, nebo gecko (FF 1.0.2) nereaguje správně ani na změnu velikosti okna - ta modrá tvář se v něm neposouvá.
Problém by mohl být v chybějícím </head>
Fred
Profil
#5 · Zasláno: 6. 5. 2005, 18:09:17
Odpovědět Citovat
Ten tag head jsem asi umázl omylem, ale na resize mě to tedy funguje v každém gecku co na počítači mám. Firefox 1.01, Firebird 0.7, Mozilla 1.6, Netscape 7, Netscape 7.2, K-meleon 0.9 a K-meleon 0.7.
Fred
Profil
#6 · Zasláno: 6. 5. 2005, 18:16:30 · Upravil/a: Fred
Odpovědět Citovat
habendorf
Už jsem si vzpoměl, máš velkou obrazovku. Je to totiž nastaveno dobře do 1024px šířky, když jsem narazil na problém s velikostí fontů, nedomyslel jsem do důsledků ten výpočet polohy pozadí. Je to nastaveno na
polovina šířky obrazovky mínus polovina šířky toho obalovacího divu (to je vlastně levý margin obalovacího divu) - 156px (to je šířka obrázku) a druhá podmínka je, že pokud je ten levý margin menší než 156px aby ten obrázek právě při větší obrazovce nebyl utržený od levého okraje.
Yuhů
Profil
#7 · Zasláno: 6. 5. 2005, 19:30:16
Odpovědět Citovat
na mě je to moc složité. Proč je tam vůbec ten javascript?
Fred
Profil
#8 · Zasláno: 6. 5. 2005, 19:49:45
Odpovědět Citovat
Aby se pozadí body při menší obrazovce než 1024px plynule posouvalo doleva, mělo by se to správně posouvat i pokud je mezera nalevo menší než velikost obrázku na pozadí.
habendorf
Profil
#9 · Zasláno: 7. 5. 2005, 18:09:15
Odpovědět Citovat
Fred: jj, koukal jsem na to na 1280x1024. Jinak pochybuju že se někomu bude chtít v tom vrtat, sorry. Zkus si přestat dělat život tak složitej, už jsem ti to tuším říkal nedávno u tý hlavičky s nápisovým logem. Čím je něco složitější, tím je to náchylnější k chybám. A síla a elegance je v jednoduchosti. Já ti fakt neporadím, já bych se na to osobně vykašlal. A doporučuju to i tobě. Přeji chladnou hlavu.
Časová prodleva: 20 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0