View previous topic :: View next topic |
Author |
Message |
indigo_child
Joined: 28 Jan 2007 Posts: 58 Location: Right here, right now!
|
Posted: 28.01.2007 16:31 Post subject: Css center layout |
|
|
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 |
_________________ Hello! |
|
Back to top |
|
|
Tristan
Joined: 01 Aug 2006 Posts: 614 Location: Under the sky
|
Posted: 28.01.2007 17:18 Post subject: |
|
|
ja koristim
Code: | margin-left: auto; margin-right: auto; |
nadam se da je to dobro... |
_________________ Carpe diem... |
|
Back to top |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 28.01.2007 17:37 Post subject: |
|
|
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:
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 |
_________________ some are born awesome, some achieve awesomeness and some have awesomeness thrust upon them |
|
Back to top |
|
|
indigo_child
Joined: 28 Jan 2007 Posts: 58 Location: Right here, right now!
|
Posted: 28.01.2007 17:40 Post subject: |
|
|
thanx
ali sam negdje procitao da ovo AUTO ne radi u IE tj da valjda radi u 7mici tek pa sam htio izbjeci probleme
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 |
|
|
1knap
Joined: 23 Mar 2004 Posts: 18 Location: LJ, SLO
|
Posted: 28.01.2007 19:01 Post subject: |
|
|
za IE treba ti "text-align: center;" -->
#main {
margin: 0 auto;
text-align: center;
} |
|
|
Back to top |
|
|
nel`chee
Joined: 08 Jul 2004 Posts: 2087 Location: Rijeka
|
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 28.01.2007 19:45 Post subject: |
|
|
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
u IE6 margin:auto radi i text-align hack nije potreban |
|
|
Back to top |
|
|
1knap
Joined: 23 Mar 2004 Posts: 18 Location: LJ, SLO
|
Posted: 28.01.2007 21:56 Post subject: |
|
|
hvala nel'chee - ni se mi dalo pisat
ie5 je imho (nažalost) još uvijek relevantan... |
|
|
Back to top |
|
|
Eric
Joined: 27 Jun 2005 Posts: 248 Location: Rijeka on rails
|
Posted: 28.01.2007 22:06 Post subject: |
|
|
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 |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 28.01.2007 22:10 Post subject: |
|
|
@ 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 |
|
|
Eric
Joined: 27 Jun 2005 Posts: 248 Location: Rijeka on rails
|
Posted: 28.01.2007 22:58 Post subject: |
|
|
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 |
|
|
sinisa.kusic
Joined: 26 Jul 2005 Posts: 728 Location: Rijeka
|
Posted: 28.01.2007 23:05 Post subject: |
|
|
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 |
|
|
Eric
Joined: 27 Jun 2005 Posts: 248 Location: Rijeka on rails
|
Posted: 28.01.2007 23:19 Post subject: |
|
|
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 |
_________________ I WRITE BEAUTIFULL CODE, NO MORE, NO LESS.
http://del.icio.us/jardas |
|
Back to top |
|
|
indigo_child
Joined: 28 Jan 2007 Posts: 58 Location: Right here, right now!
|
Posted: 29.01.2007 03:36 Post subject: |
|
|
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 |
_________________ Hello! |
|
Back to top |
|
|
Sulien
Joined: 04 Jan 2004 Posts: 2905 Location: Zagreb
|
Posted: 29.01.2007 11:35 Post subject: |
|
|
1knap wrote: | ie5 je imho (nažalost) još uvijek relevantan... |
hmm možda si u pravu ----- ne, nisi
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 |
|
|
Eric
Joined: 27 Jun 2005 Posts: 248 Location: Rijeka on rails
|
Posted: 29.01.2007 15:29 Post subject: |
|
|
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 |
|
|
1knap
Joined: 23 Mar 2004 Posts: 18 Location: LJ, SLO
|
Posted: 29.01.2007 20:19 Post subject: |
|
|
Sulien wrote: |
hmm možda si u pravu ----- ne, nisi
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
/sorry za OT |
|
|
Back to top |
|
|
|