vertikalno centriranje strani @ Slo-Tech

Forum » Izdelava spletišč »
vertikalno centriranje strani

vertikalno centriranje strani

Baja :: 25. mar 2005, 20:40

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 :: 26. mar 2005, 01:23

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

root987 :: 26. mar 2005, 03:29

google ne grize

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

blackmumba :: 27. mar 2005, 13:43

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 :: 27. mar 2005, 23:23

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 :: 28. mar 2005, 05:47

@ 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 :: 28. mar 2005, 13:04

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 (28. mar 2005 ob 13:08)

Jester :: 28. mar 2005, 15:12

lol........
valign="middle"

HP notebook, AMD Turion 64 1,6 GHz, 512 MB RAM, ATI Radeon X300 128 MB

rokpok :: 28. mar 2005, 17:07

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

Rad bi bil pingvin.

blackmumba :: 28. mar 2005, 21:08

http://lanobald.pointclark.net/crr/

CaqKa :: 28. mar 2005, 21:28

-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 (28. mar 2005 ob 21:31)

blackmumba :: 28. mar 2005, 21:44

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…

spremenil: blackmumba (28. mar 2005 ob 21:44)

CaqKa :: 28. mar 2005, 22:12

imaš zgoraj enih par primerov kako :)

CaqKa :: 30. mar 2005, 00:29

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

webfreak :: 30. mar 2005, 00:41

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

njok :: 30. mar 2005, 02:59

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 :: 30. mar 2005, 11:57

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 :: 30. mar 2005, 16:43

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

rokpok :: 30. mar 2005, 20:17

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 ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1298	347227 (6364)	sunniegoldie 11. sep 2024 05:12:48
»	Vodič: kako centrirati element s CSS-jem cungalungaa Oddelek: Izdelava spletišč	8	1123 (981)	cungalungaa 17. dec 2014 00:01:08
»	HTML in CSS težava pri razporeditvi DIV elementov SkIDiver Oddelek: Izdelava spletišč	14	978 (798)	MisterR 24. mar 2013 21:20:04
»	CSS - DIV - Brez Tabele jernejp Oddelek: Izdelava spletišč	23	1597 (1300)	jernejp 25. jan 2012 21:04:53
»	Centriranje strani meacho Oddelek: Izdelava spletišč	6	1392 (1250)	root987 24. sep 2005 23:31:11

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Izdelava spletišč »
vertikalno centriranje strani

vertikalno centriranje strani