View previous topic :: View next topic |
Author |
Message |
smasher
Joined: 10 Jan 2004 Posts: 229 Location: Zaprešić
|
Posted: 05.05.2005 18:36 Post subject: CSS: center |
|
|
evo ovako. mene zanima kako da pozicioniram neki div u centar stranice. I vertikalno i horizontalno. Ako mu dodam margin:auto 0 auto 0, on ce bit samo horizontalno centriran. Sad sam ja mislio ako mu na margin stavim sve auto, mislio sam logično da je to to, al ne radi...
pomagajte. |
_________________ http://3DHR.net - Srce hrvatskih 3d artista
http://www.Rhino3DHelp.com |
|
Back to top |
|
|
keye
Joined: 24 Nov 2003 Posts: 2465 Location: Paris - France
|
Posted: 05.05.2005 18:51 Post subject: |
|
|
nedavno se pricalo o tome pa sam otkrila da dok god imas doctype deklariran ne mozes staviti vertikalno u centar (decki su pricali o nekakvom quirk mode-u, to ce ti netko bolje objasniti, ja se nis ne kuzim u to).
ali mislim da je poanta u tome da ako hoces standard html document ne mozes centrirati vertikalno.
moze bit i da sam pljusnula glupost ali ja sam to tako skuzila. |
_________________ Google is a blind person |
|
Back to top |
|
|
ivan2704
Joined: 05 May 2005 Posts: 13
|
|
Back to top |
|
|
Pekx
Joined: 09 Sep 2004 Posts: 559
|
Posted: 05.05.2005 20:31 Post subject: |
|
|
misliš li na ovo:
Code: | <div align="center" class="nekiclass">content unutar diva</div> |
a okomito možeš jedino da mu postaviš margine, koliko ja znam, a jako malo znam |
_________________ mp3hr.com |
|
Back to top |
|
|
smasher
Joined: 10 Jan 2004 Posts: 229 Location: Zaprešić
|
Posted: 05.05.2005 21:16 Post subject: |
|
|
Pekx wrote: | misliš li na ovo:
Code: | <div align="center" class="nekiclass">content unutar diva</div> |
a okomito možeš jedino da mu postaviš margine, koliko ja znam, a jako malo znam |
ma štima to sa marginom ali treba bit u centru na svim rezolucijama. Mislio sam da se može to sa čistim CSS-om... očito ne.
Palo mi je na pamet prek php uzimat user resolution pa pomoću tog pozicionirat div sa gornjom marginom...
al vidit ću kaj veli ovaj javascript...
thnx ljudi |
_________________ http://3DHR.net - Srce hrvatskih 3d artista
http://www.Rhino3DHelp.com |
|
Back to top |
|
|
strija
Joined: 14 Sep 2003 Posts: 473 Location: Čakovec
|
Posted: 05.05.2005 21:24 Post subject: |
|
|
Cini mi se da ako znas visinu i sirinu elementa mozes ovako pozicionirati:
Code: | div.center {
background-color: Red;
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 150px;
} |
Isprobao sam u IE 6, Firefoxu 1.0.3 i Operi 7.54. Za ostale neznam dal radi. |
_________________ We can exist in ambiguity, but it means the deepest loneliness. | creolab.hr | thefarewellreason.com |
|
Back to top |
|
|
ivan2704
Joined: 05 May 2005 Posts: 13
|
Posted: 05.05.2005 21:56 Post subject: |
|
|
Provaj i ovako
Code: | <!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>
<title>vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html {
height:100%;
margin:0;
padding:0;
}
#main {
width:400px;
height:400px;
position:relative;
margin-left:-200px;
left:50%;
margin-top:-200px;
top:50%;
border:1px solid red;
}
</style>
</head>
<body>
<div id="main">
Content goes here
</div>
</body>
</html> |
To san naša na stranici http://www.webmasterworld.com/forum21/9491.htm |
|
|
Back to top |
|
|
smasher
Joined: 10 Jan 2004 Posts: 229 Location: Zaprešić
|
Posted: 05.05.2005 23:35 Post subject: |
|
|
e to ivan2704 !!! to radi... al strija ovaj tvoj mi šteka neš. nekak mi je udesno previše... a ako marginu mijenjam, ništ se ne događa... hmhm???
Evo i javascript sam isprobao - radi... al mislim da ću ipak koristit ovaj kodić šta je ivan postao...
thnx ljudi puno!!! |
_________________ http://3DHR.net - Srce hrvatskih 3d artista
http://www.Rhino3DHelp.com |
|
Back to top |
|
|
fulspectrum
Joined: 20 Nov 2003 Posts: 296 Location: Ljubljana <>Split
|
Posted: 25.04.2006 13:20 Post subject: |
|
|
je, radi za box 400x400 ali za vece dimenzije se na 1024x768 totalno izgubi.... |
|
|
Back to top |
|
|
nme
Joined: 17 Sep 2003 Posts: 53 Location: Zagreb - Rijeka
|
Posted: 25.04.2006 14:02 Post subject: |
|
|
ja sam izgubio zivce dok sam dosao do toga ... samo stvar je u tome sto kod resizanja prozora (ako je manji od velicine centralno pozicioniranog diva) div bjezi van rubova browsera i ne pojavljuje se scrollbar .. probao sam i sa owerflow i sa raznim dispaly pokusajima ali nije islo....
IMHO mislim da je kod takvog kontepta centralo pozicionirane stranice bolje ici na tablice pa staviti:
Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Centralno pozicioniranje</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style type="text/css" media="screen">
<!--
body, html {
height:100%;
max-height:100%;
vertical-align:middle;
overflow:hidden;
}
.cont {
height: 100%;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="cont">
<tr>
<td align="center">
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td>Centralno pozicionirana tablica</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
|
PS ... strija je zaboravio staviti minus u css-u kod 150
Code: |
div.center {
background-color: Red;
width: 500px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -150px;
}
|
|
|
|
Back to top |
|
|
fulspectrum
Joined: 20 Nov 2003 Posts: 296 Location: Ljubljana <>Split
|
Posted: 25.04.2006 14:44 Post subject: |
|
|
Meni je gornji link riješio problem. |
|
|
Back to top |
|
|
|