» »

vertikalno centriranje strani

vertikalno centriranje strani

Baja ::

stran je visoka za pol visine ekrana. kako doseci da bi bla stran vedno v sredini torej četrt praznega zgoraj pa četrt spodaj.

namesto tako:
------------------------------------------------
-----------------------------------
stran
-----------------------------------


pol ekrana prazbi
--------------------------------------------------

tako:
----------------------------------------------------------

-------------------------------------
enakomerno zgoraj pa spodaj
--------------------------------------

----------------------------------------------------------------

mogoce bo bolj jasno tako. lp

tec ::

Vse skupaj vrzes v tabelo in das w in h vrednosti na 100%

root987 ::

"Myths which are believed in tend to become true."
--- George Orwell

blackmumba ::

v javaskriptu dobiš velikost okna, pol pa od te velikosti odšteješ velikost tabele ki jo hočeš met na sredini in deliš z dva ... rezultat je razmak od zgornjega roba v pikslih.

pol nardiš div, ki je tolk odmaknjen od zgornega roba

pivmik ::

Ne prosim tabel ki niso namnjene za to, pa javascript tudi ne paše.
Vse se da s CSS. ;)


Tole sem enkrat napisal:
(ta vodič lahko kopirate/spreminjate/objavljate kolior vam srce poželi, le navedite, da sem jaz (bil) originalni avtor ;-) )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="all">
body {
/*
BODY element mora imet 100% višino,
to pomeni da je html dokument visok cez celo
brskalnikovo okno in ne samo do tam, kjer
'segajo' elementi.
*/
height: 100%;
/*
BODY elementu je treba dolociti, da
nima oddaljenosti od robov. Stran mora biti
visoka toliko kolikor je okno brskalnika. Ce
bi bila nastavljena še oddaljenost od
robov(padding in margin) bi se pojavili drsniki,
ker bi bila stran vecja od brskalnikovega okna.
(height(100%) + margin+padding = vecje od 100%)
*/
margin: 0; 
padding: 0;
}

/*
Ustvariti bo treba nov blok (DIV) v katerem bo
Flash animacija. Tukaj bloka še ne ustvariamo,
pac pa samo dolocamo njegove lastnosti.
*/
#predstavitev {
/*
Bloku nastavimo absolutno pozicioniranje, zato
da mu bomo lahko dolocili koordinate njegove pozicije.
*/
position: absolute;
/*
Dolociti mu moramo oddaljenost od vrha(top) in
od leve strani (left). To bomo napisali v procentih, saj
le tako bo pravilno scentrirano ne glede na
obiskovalcevo resolucijo, velikost zaslona, okna....
Ker hocemo imeti Flash animacijo na sredini(vertikalno
in horizontalno) bomo dolocili oddaljenost 50%.
*/
top: 50%;
left: 50%;
/*
Trenutno je naš blok centriran le v njegovem izhodišcu,
zato bo treba izvesti en trik. Blok bo treba pomakniti
bolj gor in bolj desno, da bo pravilno centriran. Navzgor
ga bomo premaknili ravno za polovico njegove višine in
v levo za polovico njegove širine. S tem bo koncno
pravilno centriran.
Toreticno bomo našemu bloku dolocili negativno
oddaljenost od robov (oz. dolocili mu bomo približanje
k robovom), v praksi pa bomo blok dejansko premaknili
navzgor in desno.
*/
margin: -144px 0 0 -216px;
/*
Ker nimam delujoce flash animacije sem dodal obrobo
bloku, tako da ga bom lahko sploh videl njegovo
obliko/velikost in pozicijo. Obrobe so zelo uporabne
pri analiziranju obnašanja blokov in brskalnikov v
HTML straneh. Mislim pa da FireFox unici EMBED
elemente oz. Flash v kolikor animacije ne najde.
Tako da v FireFoxu 'praznega prostora' (v velikosti
flash animacije) ne bo, ampak bo samo zelo majhna
obroba našega bloka(2x2 piksla= 4 sivi piksli). Za moje
pojme je takšna reakcija FireFox-a slaba.
*/
border: 1px dotted red;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pwnstavitev</title>
</head>
<body>
<!-- Tukaj ustvarimo nov blok imenovan predstavitev: -->
<div id="predstavitev">
<!-- V bloku vstavimo Flash animacijo ki želimo, da bo centrirana: -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="432" height="288">
<param name="movie" value="predstavitev.swf">
<param name="quality" value="high">
<embed src="predstavitev.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="423" height="288"></embed>
</object>
<!-- Zakljucitev bloka:  -->
</div>

</body>
</html>
LP, Gregor GRE^

Lith ::

@ PicNiK:
2 much

@ Baja:

poglej si source na tej strani

mislim da je to kar iščeš, če ne še kaj napiši

LP
¤ black holes rule; I like the speed, speed kills ¤

rokpok ::

Ena izmed rešitev:

.centerBox {
	background-color:#339900;
	width: 300px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -75px 0 0 -150px;
}
To je primer, kako se neka stvar vertikalno centrira. Če pa neveš točno, koliko je "ta stvar" visoka/dolga, pa si pač pomagaš z javascript-om in potem preko .style.width/height spreminjaš vrednosti.

Lp
Rad bi bil pingvin.

Zgodovina sprememb…

  • spremenil: rokpok ()

Jester ::

lol........
valign="middle"
HP notebook, AMD Turion 64 1,6 GHz, 512 MB RAM, ATI Radeon X300 128 MB

rokpok ::

Nemo - to pa bi res rad videl, kako bi ti z valign to rešil.8-O
Rad bi bil pingvin.

blackmumba ::

CaqKa ::

-Lan- tale rešitev je špartanska, ker kakohitro resizeaš okno browsera je vse šlo po maloro :)


poleg tega stran na 640x480 dela obupno.

Zgodovina sprememb…

  • spremenil: CaqKa ()

blackmumba ::

ne poznam nikogar ki bi imel 640x480 resolucijo.
če pa resizaš daš pa refreš pa je ;) to je pa zarad tega ker se background stretch-a vertikalno in horizontalno. dela pa v vseh brskalnikih

kako bi pa ti do drugače naredu ?

Zgodovina sprememb…

CaqKa ::

imaš zgoraj enih par primerov kako :)

CaqKa ::

heh sem ugotovil da sem tudi ja eni strani z tem valign rešil zadevo.

webfreak ::

Meni se osebno dopadejo "čiste" CSS rešitve. Pomoje bom ob priliki malo Picnicovo kodo preštudiral da vidim kaj je on naredil :). Trenutno sem malo preveč zaposlen - toda mi bo pa tole pri enmu projektu kar fanj prav prišlo :) In tudi jaz sem razmišljal o odprtju ene take teme :D

njok ::

Nimas kode kaj dosti studirat. Mogoce se je kdo ustrasil zaradi dolzine, vendar gre v vecini za komentarje. Vse kar je treba storiti za vertikalno centriranje je absolutna postavitev elementa z odmikom 50% od vrha in levega roba. Nato se z negativnim levim in zgornjim robom (margin), v velikosti polovice sirine/visine element dokoncno centrira.

Zadeva sfali v IE4 win in starejsih (zaradi nepodpore negativnim robovom) in IE5 mac in starejsih. Bogve kako je s tem na NN. Druge, popolne (kar se tice prikaza) resitve, potrebujejo dodaten markup v html kodi, tako da niso "čiste", kot pravi webfreak. Jaz imam rajsi "picnikovo" kodo.

CaqKa ::

valign dela na firefoxu, ie6, operi7. kaj še hočete več?
če se zadeva ne zvalidira, potem je to samo dokaz kak glupi so pri w3c, da ne znajo za vertikalno centiranje specificirat enega simple ukaza.

njok ::

CaqKa, zakaj bi pa predstavitev mesal z vsebino? IMHO vertikalno centriranje nima v markupu kaj delat.

rokpok ::

Se strinjam z njokom - ne mešati vizualnega izgleda z vsebino. Mogoče je prehod na css na začetku malo težak in moraš vložiti kar nekaj truda, se pa pozneje trud vsekakor povrne (večkratno).
Rad bi bil pingvin.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297335413 (59562) htmltroubles
»

Vodič: kako centrirati element s CSS-jem

Oddelek: Izdelava spletišč
81060 (918) cungalungaa
»

HTML in CSS težava pri razporeditvi DIV elementov

Oddelek: Izdelava spletišč
14916 (736) RockyS
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč
231503 (1206) jernejp
»

Centriranje strani

Oddelek: Izdelava spletišč
61337 (1195) root987

Več podobnih tem