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 layout

 
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
indigo_child



Joined: 28 Jan 2007
Posts: 58
Location: Right here, right now!

PostPosted: 28.01.2007 15:31    Post subject: Css center layout Add user to your forum ignore list Reply with quote

Novi sam sa CSSom pa me zanima koji je "najbolji nacin" za centrirat layout, tj da je uvijek u sredini stranica. Trenutno koristim ono left 50% pa margin left na pola skupa sa absolute positionigom.

tj ovo

#main {
margin: 0px;
padding: 0px;
left: 50%;
position: absolute;
margin-left: -373px;
}

ima li neki bolji nacin, ovo mi izgleda kao hack Smile

_________________
Hello!
Back to top
View user's profile Send private message
Tristan



Joined: 01 Aug 2006
Posts: 614
Location: Under the sky

PostPosted: 28.01.2007 16:18    Post subject: Add user to your forum ignore list Reply with quote

ja koristim
Code:
margin-left: auto; margin-right: auto;


nadam se da je to dobro...

_________________
Carpe diem...
Back to top
View user's profile Send private message Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 28.01.2007 16:37    Post subject: Add user to your forum ignore list Reply with quote

kao početniku savjetujem ti da se okaneš apsolutnog pozicioniranja.
Koristi margin: 0 auto; s kojim si dodao top i bottom vrijednosti margine 0 px a lefti right auto.

Za ubuduće da znaš redoslijed.

za ovaj primjer:
Code:
margin: 0 auto;

je prva vrijednost dodjeljena top i bottom a druga left i right

a ovaj primjer:
Code:
margin: 0 auto 0 auto;

je ovaj redoslijed top right bottom left

isti shortcut-i se mogu primjeniti kod padding-a
nadam se da te nisam zbunio Very Happy

_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them
Back to top
View user's profile Send private message Send e-mail MSN Messenger
indigo_child



Joined: 28 Jan 2007
Posts: 58
Location: Right here, right now!

PostPosted: 28.01.2007 16:40    Post subject: Add user to your forum ignore list Reply with quote

thanx
ali sam negdje procitao da ovo AUTO ne radi u IE tj da valjda radi u 7mici tek pa sam htio izbjeci probleme Smile

p.s.
niti meni se ne svidja, ali me zanima zasto izbjegavat apsolutno pozicioniranje i pojava layera u Dreamu.? mislim jeli ne radi dobro u browserima ili sto?

_________________
Hello!
Back to top
View user's profile Send private message
1knap



Joined: 23 Mar 2004
Posts: 18
Location: LJ, SLO

PostPosted: 28.01.2007 18:01    Post subject: Add user to your forum ignore list Reply with quote

za IE treba ti "text-align: center;" -->

#main {
margin: 0 auto;
text-align: center;
}
Back to top
View user's profile Send private message
nel`chee



Joined: 08 Jul 2004
Posts: 2087
Location: Rijeka

PostPosted: 28.01.2007 18:35    Post subject: Add user to your forum ignore list Reply with quote

1knap wrote:
za IE treba ti "text-align: center;" -->

#main {
margin: 0 auto;
text-align: center;
}
krivo.
Code:
body {
    text-align: center;
}
#main {
    margin: 0 auto;
    text-align: left;
}

_________________
art & design portfoliofree Photoshop brushes stuffsketchblogfacebook
Back to top
View user's profile Send private message Visit poster's website Twitter profile
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 28.01.2007 18:45    Post subject: Add user to your forum ignore list Reply with quote

nel`chee wrote:
Code:
body {
    text-align: center;
}
#main {
    margin: 0 auto;
    text-align: left;
}

krivo. taj hack služi samo za IE5, a tko još pazi na IE5, molim vas Rolling Eyes

u IE6 margin:auto radi i text-align hack nije potreban
Back to top
View user's profile Send private message Send e-mail Visit poster's website
1knap



Joined: 23 Mar 2004
Posts: 18
Location: LJ, SLO

PostPosted: 28.01.2007 20:56    Post subject: Add user to your forum ignore list Reply with quote

hvala nel'chee - ni se mi dalo pisat Embarassed

ie5 je imho (nažalost) još uvijek relevantan...
Back to top
View user's profile Send private message
Eric



Joined: 27 Jun 2005
Posts: 248
Location: Rijeka on rails

PostPosted: 28.01.2007 21:06    Post subject: Add user to your forum ignore list Reply with quote

Postoje dva nacina:
1.Sa auto marginom
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centering using auto margins</title>


<style type="text/css">

/* Pretty Stuff
================================== */

body {
  font: 100%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  background-color: #ccc;
  margin: 0;
  padding: 0;
}

#wrapper {
  background-color: #fff;
  padding: 20px;
}

/* Centering Technique
================================== */

body {
  text-align: center;
  min-width: 760px;
}

#wrapper {
  width: 720px;
  margin: 0 auto;
  text-align: left;
}


<!--
-->
</style>
</head>

<body>

<div id="wrapper">
<h1>Lorem ipsum dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</body>

</html>


2.Sa negativnom marginom
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centering using positioning and negative margins</title>


<style type="text/css">

/* Pretty Stuff
================================== */

body {
  font: 100%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  background-color: #ccc;
  margin: 0;
  padding: 0;
}

#wrapper {
  background-color: #fff;
  padding: 20px;
}

/* Centering Technique
================================== */

#wrapper {
  position: relative;
  left: 50%;
  width: 720px;
  margin-left: -360px;
}

<!--
-->
</style>
</head>

<body>

<div id="wrapper">
<h1>Lorem ipsum dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<h2>Ea commodo consequat</h2>
<p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<h2>Magna aliquam erat volutpat</h2>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

</body>

</html>

_________________
I WRITE BEAUTIFULL CODE, NO MORE, NO LESS.
http://del.icio.us/jardas
Back to top
View user's profile Send private message Send e-mail Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 28.01.2007 21:10    Post subject: Add user to your forum ignore list Reply with quote

@ eric
hm da... postoji i način di možeš nešto objasnit u rečenici ili dvje i onaj di moraš skrolat ko budala da bi dokazao očito.

_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them
Back to top
View user's profile Send private message Send e-mail MSN Messenger
Eric



Joined: 27 Jun 2005
Posts: 248
Location: Rijeka on rails

PostPosted: 28.01.2007 21:58    Post subject: Add user to your forum ignore list Reply with quote

Ajde ohladi...Ako ti se neda scrolat nemoj,nitko ne ne tjera da gledas ovaj topic.
Covjeku sam dao primjere na kojima moze vidjet tocno kako sta funkcionira. Mislim da mu vise koristi ovo nego da sam sad tu objasnjavao previse...

_________________
I WRITE BEAUTIFULL CODE, NO MORE, NO LESS.
http://del.icio.us/jardas
Back to top
View user's profile Send private message Send e-mail Visit poster's website
sinisa.kusic



Joined: 26 Jul 2005
Posts: 728
Location: Rijeka

PostPosted: 28.01.2007 22:05    Post subject: Add user to your forum ignore list Reply with quote

Eric wrote:
Ajde ohladi...Ako ti se neda scrolat nemoj,nitko ne ne tjera da gledas ovaj topic.
Covjeku sam dao primjere na kojima moze vidjet tocno kako sta funkcionira. Mislim da mu vise koristi ovo nego da sam sad tu objasnjavao previse...

yup upravu si.. ove dvije stranice ( na 1600x1200 res ) lorem ipsuma je ful edukativno

_________________
some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them
Back to top
View user's profile Send private message Send e-mail MSN Messenger
Eric



Joined: 27 Jun 2005
Posts: 248
Location: Rijeka on rails

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

Ma neda mi se svadat...Kao sto sam rekao nitko te ne tjera da citas ovu temu...
Mozes pitat admina da uvede limit na duzinu posta Laughing

_________________
I WRITE BEAUTIFULL CODE, NO MORE, NO LESS.
http://del.icio.us/jardas
Back to top
View user's profile Send private message Send e-mail Visit poster's website
indigo_child



Joined: 28 Jan 2007
Posts: 58
Location: Right here, right now!

PostPosted: 29.01.2007 02:36    Post subject: Add user to your forum ignore list Reply with quote

thanx eric, ja ti nebi nista prigovorio da to sto si poslao, barem sto se tice koda, nije sve bilo receno u postovima prije, i tehnika sa neg. marinama i ova sa autom. Ipak naveo si nesto bitno sto mislim da nije nitko a to je da kod auto margina moras odrediti i sirinu toga div taga na sto stavljas auto inace ne radi. Steta da nisi prije poslao jer bi me postedio zivciranja Smile

_________________
Hello!
Back to top
View user's profile Send private message
Sulien



Joined: 04 Jan 2004
Posts: 2905
Location: Zagreb

PostPosted: 29.01.2007 10:35    Post subject: Add user to your forum ignore list Reply with quote

1knap wrote:
ie5 je imho (nažalost) još uvijek relevantan...

hmm možda si u pravu ----- ne, nisi Razz

kod mene je 0.8%, a to je dosta mali postotak s obzirom koliko treba muke i znoja da se nešto presloži da radi u IE < 6
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Eric



Joined: 27 Jun 2005
Posts: 248
Location: Rijeka on rails

PostPosted: 29.01.2007 14:29    Post subject: Add user to your forum ignore list Reply with quote

indigo_child: ma htio sam da imas na primjerima obadvije stvari pokazane i malo dopunjene. Drago mi je da sam pomogao...

_________________
I WRITE BEAUTIFULL CODE, NO MORE, NO LESS.
http://del.icio.us/jardas
Back to top
View user's profile Send private message Send e-mail Visit poster's website
1knap



Joined: 23 Mar 2004
Posts: 18
Location: LJ, SLO

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

Sulien wrote:

hmm možda si u pravu ----- ne, nisi Razz

kod mene je 0.8%, a to je dosta mali postotak s obzirom koliko treba muke i znoja da se nešto presloži da radi u IE < 6


hehe... znam znam, IE5.5 je svakog dana večja rariteta (ie 5.0 več je izumrli dinozaver)- ali ponekad tih 0.8% deli pro-je od amatera Very Happy

/sorry za OT
Back to top
View user's profile Send private message
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