Forum FAQForum FAQSearchSearch MemberlistMemberlist Forum ignore listForum ignore list RegisterRegister ProfileProfile Log in to check your private messagesLog in to check your private messages Log inLog in
CSS: center

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side
View previous topic :: View next topic  
Author Message
smasher



Joined: 10 Jan 2004
Posts: 229
Location: Zaprešić

PostPosted: 05.05.2005 18:36    Post subject: CSS: center Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
keye



Joined: 24 Nov 2003
Posts: 2465
Location: Paris - France

PostPosted: 05.05.2005 18:51    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
ivan2704



Joined: 05 May 2005
Posts: 13

PostPosted: 05.05.2005 19:19    Post subject: Add user to your forum ignore list Reply with quote

Može se centrirati uz pomoć CSS-a i Java Scripta: http://www.alistapart.com/d/footers/footer_variation1.html
Back to top
View user's profile Send private message
Pekx



Joined: 09 Sep 2004
Posts: 559

PostPosted: 05.05.2005 20:31    Post subject: Add user to your forum ignore list Reply with quote

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 Very Happy

_________________
mp3hr.com
Back to top
View user's profile Send private message Send e-mail
smasher



Joined: 10 Jan 2004
Posts: 229
Location: Zaprešić

PostPosted: 05.05.2005 21:16    Post subject: Add user to your forum ignore list Reply with quote

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 Very Happy


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
View user's profile Send private message Visit poster's website
strija



Joined: 14 Sep 2003
Posts: 473
Location: Čakovec

PostPosted: 05.05.2005 21:24    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
ivan2704



Joined: 05 May 2005
Posts: 13

PostPosted: 05.05.2005 21:56    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message
smasher



Joined: 10 Jan 2004
Posts: 229
Location: Zaprešić

PostPosted: 05.05.2005 23:35    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
fulspectrum



Joined: 20 Nov 2003
Posts: 296
Location: Ljubljana <>Split

PostPosted: 25.04.2006 13:20    Post subject: Add user to your forum ignore list Reply with quote

je, radi za box 400x400 ali za vece dimenzije se na 1024x768 totalno izgubi....
Back to top
View user's profile Send private message Send e-mail Visit poster's website
nme



Joined: 17 Sep 2003
Posts: 53
Location: Zagreb - Rijeka

PostPosted: 25.04.2006 14:02    Post subject: Add user to your forum ignore list Reply with quote

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
View user's profile Send private message Visit poster's website
fulspectrum



Joined: 20 Nov 2003
Posts: 296
Location: Ljubljana <>Split

PostPosted: 25.04.2006 14:44    Post subject: Add user to your forum ignore list Reply with quote

ivan2704 wrote:
Može se centrirati uz pomoć CSS-a i Java Scripta: http://www.alistapart.com/d/footers/footer_variation1.html


Meni je gornji link riješio problem.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    mi3dot.org Forum Index -> Client-side All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group