Autor Zpráva
MilanJ
Profil
Řeším následující problém: mám stránku, kterou jsem vycentroval na střed, a to jak horizontálně, tak vertikálně...stránka je přesně ve středu při různých rozlišeních.
Problém je ten, že okno při zmenšování prohlížeče mizí za okraji prohlížeče a není možní se k okraji stránky posunout posuvníkem.

Celý web je uložený v DIVu a DIV je definovaný v CSS. Problém bude zřejmě v tom, že by se měla nastavit nějak minimální šířka, na které by se mělo "posouvání" webu, resp. centrování okna s obsahem, zastavit, jen nevím jak...

CSS styl DIVu:


#hlavni {
position:absolute;
left:0px;
top:0px;
width:631px;
height:560px;
z-index:2;
background-color: #FFFFFF;
top: 50%;
left: 50%;
margin: -280px 0 0 -315px;
voice-family: "\"}\"";
voice-family: inherit;
}
tiso
Profil
Skús to vycentrovať bez absolútneho poziciovania: http://tiso.wz.cz/center.php
MilanJ
Profil
Ale tím dosáhnu pouze horizontálního vycentrování! Potřeboval bych i vertikální.
tiso
Profil
Aha, to som nečítal... Potrebuješ na pozadí mať nejaký div s nastavenými tými minimálnymi rozmermi, kľudne aj prázdny... Ale neskúšal som to tak za výsledok neručím...
mata
Profil
MilanJ
bojoval jsem s tím stejně (přes marginy), nakonec jsem to udělal přes Javascript, což je sice prasečina, ale když někdo nemá zapnutý JS tak má prostě stránku zarovnanou nahoře.
MilanJ
Profil
mata
Budu to musez vymyslet sám nebo mi poradíš? :-)
mata
Profil

moveIt = function() {
if(typeof(window.innerWidth) == 'number') {
//Non-IE
w = window.innerWidth; h = window.innerHeight;
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
w = document.documentElement.clientWidth; h = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
w = document.body.clientWidth; h = document.body.clientHeight;
}
h = h/2 - 270;
w = w/2-385;
el = document.getElementById('center');
el.style.position = 'absolute'; el.style.top = h+'px'; el.style.left = w+'px';
}

if (window.attachEvent) {
window.attachEvent("onresize", moveIt);
window.attachEvent("onload", moveIt);
} else {
window.addEventListener("load", moveIt , false);
window.addEventListener("resize", moveIt , false);
}

Ty čísla u h=h/2 - 270 a w=w/2-385 jsou půlka výšky centrovaného bloku a půlka šířky centrovaného bloku takže u tebe zřejmě 280 a 315. Celý div, který se centruje má id="center".
MilanJ
Profil
mata
A kdy se na tuhle funkci odvoláváš? onLoad ?
Pokud ano, bude to asi složitější, já bych potřeboval, aby se stránka neposouvala za okraj prohlížeče i když uživatel mění velikost okna.
mata
Profil
viz posledních 6 řádků
pro IE se přichytí událost (attachEvent) a to jak na onload tak na onresize
pro ostatní prohlížeče totéž, ale přes eventListener
onload k body vůbec dávat nemusíš - stačí prostě vložit odkaz na skript do hlavičky
MilanJ
Profil
stačí prostě vložit odkaz na skript do hlavičky
Teď si nejsemúplně jistej, že to chápu... kam vložit odkaz?
mata
Profil
prostě do hlavičky - třeba takhle

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>Centrovaná stránka</title>
<script type="text/javascript" src="muj_script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />
</head>
MilanJ
Profil
Já myslel že je to nějaká záludnost a ono takhle. :-)
Díky, vyzkouším.
MilanJ
Profil
mata
Tak jsem vytvoril JS soubor, vložil kód, v HTML souboru vložil do hlavičky link na javascriptový soubor a ono to nedělá vůbec nic. :-/
mata
Profil
odkaz by nebyl?
a jak jsem psal celé to musí být obalené v divu s id="center" (případně by se musel upravit kód)
MilanJ
Profil
mata
mrkni se na stránku, kterou bych chtěl upravit.
Zkoušel jsem to nastavit, ale nic moc výsledek, tedy spíš nic než moc, chovalo se to divně. Ta stránka je bez použití Tvého scriptu, tedy v původní podobě.
Plaváček
Profil
MilanJ

Možná ti pomůže tohle, http://www.malenek.cz/cs/clanky/webdesign/vertikalni-a-horizontalni-ce ntrovani - náš kodér řešil nedávno podobný problém. Přesto ale je třeba si uvědomit, že vertikální centrování jde zcela proti smyslu webové prezentace, protože, a to by sis měl uvědomit, nikdy nejsi schopen ovlivnit výšku zobrazovacího zařízení uživatele. Jinak řečeno, co se stane, budu-li mít rozlišení 800x600 a zvětším si písmo, ha? Přesto je odkazované řešení funkční a myslím, že i srozumitelně popsané.
MilanJ
Profil
Plaváček

Myslím, že je to přesně. Moc díky.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0