centriranje strane [HTML]
- Začetnik teme munchkin
- Datum pokretanja
Z
[ZoNi]
Guest
<div align="center"> sadržaj </div>
Poslednja izmena:
Vlasterx
Čuven
- Učlanjen(a)
- 23.01.2004
- Poruke
- 4,992
- Poena
- 740
Horizontalno centriranje se na ispravan način radi preko CSSa. Cela filozofija se sastoji u tome da napraviš jedan DIV sloj određene širine koji će biti centriran horizontalno i onda njega puniš ostalim sadržajem.
To izgleda ovako recimo:
<div style="margin: 0 auto; width: 300px;">
sadržaj
</div>
ključ horizontalnog centriranja je u margin: 0 auto
Vertikalno centriranje nije baš adekvatno rešeno preko CSSa, a to možeš da uradiš na "divljački" način preko tabela gde ćeš napraviti tabelu sa jednim poljem širine i visine 100% gde je sadržaj te ćelije poravnan po centru vertikalno i horizontalno.
To izgleda ovako recimo:
<div style="margin: 0 auto; width: 300px;">
sadržaj
</div>
ključ horizontalnog centriranja je u margin: 0 auto
Vertikalno centriranje nije baš adekvatno rešeno preko CSSa, a to možeš da uradiš na "divljački" način preko tabela gde ćeš napraviti tabelu sa jednim poljem širine i visine 100% gde je sadržaj te ćelije poravnan po centru vertikalno i horizontalno.
Poslednja izmena:
AlexxandarYo
Čuven
- Učlanjen(a)
- 08.07.2003
- Poruke
- 390
- Poena
- 619
Ne moraju se koristiti tabele, ima i full css rešenja [GOOGLE]vertical align page css[/GOOGLE]
Zavisi samo koje ti je najzgodnije...
Zavisi samo koje ti je najzgodnije...
- Učlanjen(a)
- 29.11.2006
- Poruke
- 4,511
- Poena
- 440
ZoNi, cenim što želiš da pomogneš, ali nemoj dečku poturati nogu. To što si ti napisao mu neće pomoći, i možda ga navede na pogrešan put učenja HTML/CSSa.
Kao što R0B0T0 kaže, pravilan načine je preko CSSa, ako smem da dodam i najbolji način. Zamisli DIVove kao kutije/kontejnere u koje smeštaš sadržaj, a praznu HTML stranu kao slobdan, ne definisan prostor, koji je ograničen jedino veličinom browserovog prozora (može i šire, ali ti za početak tako).
Pokušao sam da sastavim jednostavan kod, prema sećanju, na jedan koji sam video davno, na osnovu floatovanja i negativnih margina.
HTML
CSS
U CSS kodu IDjevi #holder i #kontejner su najvažniji.
Prvi će ti odmaknuti po vertikali i horizontali, stim da će služiti samo kao "graničnik". Bitno je da znaš da negativna margina "podiže" sadržaj, i ona treba da ti bude polovina visine box-a. U drugom IDju, #kontejner ćeš ustvari podesiti visinu i širinu box-a kakvog želiš, tj. naknadno definisati negativnu marginu u prvom IDju.
Kao što R0B0T0 kaže, pravilan načine je preko CSSa, ako smem da dodam i najbolji način. Zamisli DIVove kao kutije/kontejnere u koje smeštaš sadržaj, a praznu HTML stranu kao slobdan, ne definisan prostor, koji je ograničen jedino veličinom browserovog prozora (može i šire, ali ti za početak tako).
Pokušao sam da sastavim jednostavan kod, prema sećanju, na jedan koji sam video davno, na osnovu floatovanja i negativnih margina.
HTML
Kod:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Primer CSS centriranja Vert. + Hor.</title>
<link href="center.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="holder"></div>
<div id="kontejner">
<div id="sadrzaj">
<h1>Ovo je centrirano.</h1>
<p>Zar ne?</p>
</div>
</div>
</body>
</html>CSS
Kod:
/* CSS centriranje */
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
body
{
color: #333333;
text-align: center;
background: #99CC00;
}
#holder
{
width: 1px;
height: 50%;
float: left;
background: #CC9900;
margin: 0 0 -200px 0;
}
#kontejner
{
clear: left;
width: 450px;
height: 400px;
margin: 0 auto;
text-align: left;
position: relative;
background: #669999;
border: 1px solid #333333;
}
#sadrzaj
{
float: right;
width: 450px;
text-align: center;
}U CSS kodu IDjevi #holder i #kontejner su najvažniji.
Prvi će ti odmaknuti po vertikali i horizontali, stim da će služiti samo kao "graničnik". Bitno je da znaš da negativna margina "podiže" sadržaj, i ona treba da ti bude polovina visine box-a. U drugom IDju, #kontejner ćeš ustvari podesiti visinu i širinu box-a kakvog želiš, tj. naknadno definisati negativnu marginu u prvom IDju.
Poslednja izmena:
OP
OP
munchkin
Cenjen
- Učlanjen(a)
- 29.04.2009
- Poruke
- 41
- Poena
- 159
hvala 
OK hvala vam svima, samo imam jos jedno pitanje... prikacio sam sajt koji radim, e sad treba mi animacija kao slide da se otvori strana. kada se klikne na npr 'biografija' da se ne pojavi odmah strana, vec da se slajduje na stranu, otkricajuci sadrzaj. To mi nije neophodno mada me zanima da li mogu nekim HTML kodom to da dodam, ili su za to potrebni AJAX ili Flash.
Puno hvala ponovo :banana:
OK hvala vam svima, samo imam jos jedno pitanje... prikacio sam sajt koji radim, e sad treba mi animacija kao slide da se otvori strana. kada se klikne na npr 'biografija' da se ne pojavi odmah strana, vec da se slajduje na stranu, otkricajuci sadrzaj. To mi nije neophodno mada me zanima da li mogu nekim HTML kodom to da dodam, ili su za to potrebni AJAX ili Flash.
Puno hvala ponovo :banana:
- Učlanjen(a)
- 29.11.2006
- Poruke
- 4,511
- Poena
- 440
HTML ne moze da proizvede takav efekat. Ako zelis tako nesto da pravis prvo se odluci koju Ajax biblioteku zelis da koristis. Preporucujem ti mootools, zato sto je pocetnicima mnogo pristupacniji sa vizuelne strane.
Poslednja izmena:
